个人中心
gpt4 book ai didi

javascript - 如何访问嵌套的 json 对象并使用 javascript 动态显示？

转载 作者：行者123 更新时间：2023-11-30 21:19:56 28 4
gpt4 key购买 nike

所有这一切都是新的，但该程序的笑话是 json 数据动态填充 ListView ，以及当用户单击 ListView href 时，它会将它们发送到页面并动态加载该特定页面的内容(文本、图像和任何 url)到特定的单独的 div 中。关键是要动态使用 json 数据。请帮忙。

这是我的 JavaScript/HTML 代码以及 JSON 数据:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"><link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<!--<script type="text/javascript" src="cordova.js"></script>-->
<script>
    $(document).on("pagebeforeshow", "#ccc", function() {

  $.getJSON('js.json', function(data) {
    var output = "";
    var newpage = "";
    for(var i in data.mydata) {
      output += "<li>" +
        "<a href=\"#page" + data.mydata[i].myId + "\">" +
        "<h3>" + data.mydata[i].thename + "</h3>" +
        "<p>" + data.mydata[i].description + "</p>" + "</a>" +
        "</li>";
    if ($("#page" + data.mydata[i].myId).length == 0 && (data.mydata[i].myId == 0)) {
        newpage += "<div data-role=\"page\" id=\"page" + data.mydata[i].myId + "\">";
        newpage += "<div data-role=\"header\">" + "<a data-role=\"button\" data-rel=\"back\" data-icon=\"back\">Back</a>" + "<h3>" + data.mydata[i].thename + "</h3></div>";
        newpage += "<div role=\"main\" class=\"ui-content\">" + "<h1 >What type of Nursing is right for you?</h1>" +"</div>";
            //how to grab nested objects with for loop such as link 
            //  for loop that grabs myId AS WELL AS LINKid/textid/pictureID and displays 

        newpage += "<div data-role=\"footer\">" + "<h1>0Future Nurses</h1>"+ "<p class= \"center\">Telephone: <br/>" +
        +"</div>"+"</div>";
      }

    output += "";
    newpage += "";
    $('body').append(newpage);
    $("#mylist").html(output).listview('refresh');
  };
});
});

</script>
</head>
<body>
<div data-role="page" id="ccc">
  <div data-role= "header">
        <h1>Future Nursings</h1>
        <h2 class = "center">Action Coalition</h2>

  <div role="main" class="ui-content">
    <ul id="mylist" data-role="listview" data-inset="true">

    </ul>

  </div>
</div>

<div data-role="footer" >
        <h1>Future Nurses</h1>
        <p class= "center">Telephone: <br/>
        Email: </p>
        <h1>Get Social with us!</h1>
            <div class = "centerButton">
                <a href = "#" class = "ui-btn  ui-corner-all ui-shadow ui-btn-inline">Facebook</a></button><br/>
                <a href = "#" class = "ui-btn  ui-corner-all ui-shadow ui-btn-inline">Twitter</a></button><br/>
                <a href = "#" class = "ui-btn  ui-corner-all ui-shadow ui-btn-inline">Indeed</a></button><br/>
                <a href = "#" class = "ui-btn  ui-corner-all ui-shadow ui-btn-inline">Join Us</a></button><br/>
            </div>
    </div>
</div>






<div data-role="page" id="ccc">
  <div data-role= "header">
        <h1>Future Nurses</h1>
        <h2 class = "center">Action Coalition</h2>

  <div role="main" class="ui-content">
    <ul id="mylist" data-role="listview" data-inset="true">

    </ul>

  </div>
</div>

<div data-role="footer" >
        <h1>Future Nurses </h1>
        <p class= "center">Telephone: <br/>
        Email: </p>
        <h1>Get Social with us!</h1>
            <div class = "centerButton">
                <a href = "#" class = "ui-btn  ui-corner-all ui-shadow ui-btn-inline">Facebook</a></button><br/>
                <a href = "#" class = "ui-btn  ui-corner-all ui-shadow ui-btn-inline">Twitter</a></button><br/>
                <a href = "#" class = "ui-btn  ui-corner-all ui-shadow ui-btn-inline">Indeed</a></button><br/>
                <a href = "#" class = "ui-btn  ui-corner-all ui-shadow ui-btn-inline">Join Us</a></button><br/>
            </div>
    </div>
</div>
</body>
</html>





{
"mydata": [
    {
        "myId": "0",
        "thename": "Is Nursing for You?",
        "description": "This is the zero description",
        "links":[
            "google.com",
            "yahoo.com",
            "worldstarhiphop.com"
        ],
        "text": [
            "random text 0000",
            "random text 0000",
            "random text 0000"
        ],
        "imgPath": [
           "image/0000.png",
           "image/0001.png",
           "image/0002.png"
           ],
        "article" : [
            {
                "text": "random article 0",
                "img" : "image/0000.png"
            },
            {
                "text": "random article 0",
                "img" : "image/0000.png"
            }
            ]
    }, {
        "myId": "1",
        "thename": "Nursing Schools",
        "description": "This is the one description",
        "links":[
            "nordstrom.com",
            "google.com",
            "aol.com"
        ],
        "text": [
            "random text 0001"
        ],
        "imgPath": [
           "image/0100.png",
           "image/0101.png",
           "image/0102.png"
           ],
        "article" : [
            {
                "text": "random article 0001",
                "img" : "image/0001.png"
            }
            ]
    }
]

最佳答案

我认为你的错误可能是因为你的 json 格式不正确，你在最后错过了一个]。它应该像这样结束:

              {
                    "image": "image/2.png"
                }
            ]
    }
    ]
};

为了访问深层元素，您可以使用这种方法(更改要查找的元素的链接字符串:

 for (var element of data.mydata) {
      console.log(element.myId);
      var linkElements = element.link.filter(linkObject => {
        return linkObject["link"];
      });

      for (var linkElement of linkElements) {
        console.log(linkElement["link"]);
      }
    }

这将是这段代码的输出:

0
google.com
yahoo.com
worldstarhiphop.com

1
google.com
yahoo.com
worldstarhiphop.com

关于javascript - 如何访问嵌套的 json 对象并使用 javascript 动态显示？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45297279/

28 4 0
文章推荐： c# - Html.ListBoxFor() 的 ASP.NET MVC 问题
文章推荐： C# winForm 基础组合框
文章推荐： c# - .Net 桌面应用程序和 Web 应用程序之间的技术区别是什么？
文章推荐： c# - 使用 ASP.Net 跟踪打开的页面
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com