Jquery ajax 解析具有不同命名数组的 json 文件

Jquery ajax parse json file with different named arrays

本文关键字：数组 文件 json ajax Jquery      更新时间：2023-09-26

我刚刚完成了jquery ajax使用json的教程。我已经能够创建一个ajax页面。但要让事情变得更加复杂。我有一个包含两种数组类型的 json 文件。下面的示例（第一个对象属于人员数组，接下来的两个对象属于新闻源）： 

{  
   "people":[  
      {  
         "name":"John Constable",
         "occupation":"CEO",
         "location":"Toronto, Canada",
         "division":"Health & Epidemics",
         "profileImage":"",
         "followers":123
      },
      {  
         "name":"Edward Monet",
         "occupation":"Lead Developer",
         "location":"Toronto, Canada",
         "division":"Health & Epidemics",
         "profileImage":"",
         "followers":9923
      }
   ]
},
{  
   "newsfeed":[  
      {  
         "Title":"Evaluations of disaster education programs for children",
         "date":"Dec 10, 2015",
         "tags":[  
            "disaster",
            "tornado",
            "risk management"
         ],
         "division":"Health & Epidemics",
         "Image":"",
         "share":123
      },
      {  
         "Title":"UNISDR Annual Report 2014",
         "date":"Dec 10, 2015",
         "tags":[  
            "disaster",
            "tornado",
            "risk management"
         ],
         "division":"Civil & Cyber Security",
         "Image":"",
         "share":123
      }
   ]
}

我现在的jquery代码是 

$.getJSON( "ajax/result1-F.json", function( index ) {
    var jasondata = [];
    $.each(index, function( i, val ) {
           $container1.append( "<div><ul>" + val.profileImage + "</ul><ul><li>"+       val.name + "</li><li>" + val.occupation +"</li><li>"  + val.location + "</li><li>" + val.division + "</li></ul>" + "<ul><li> <button> FOLLOW </button> </li>" + "<li>" + val.followers + "</li><li>followers</li><ul></div>");
    }); 
});

container1显示人员阵列的所有信息。现在，我陷入了如何同时在单独的container2中显示新闻源的问题。

谁能指出我正确的直接？谢谢

我不明白为什么你不能做这样的事情：

var jsonObj = {
    "people": [{
        "name": "John Constable",
        "occupation": "CEO",
        "location": "Toronto, Canada",
        "division": "Health & Epidemics",
        "profileImage": "",
        "followers": 123
    }, {
        "name": "Edward Monet",
        "occupation": "Lead Developer",
        "location": "Toronto, Canada",
        "division": "Health & Epidemics",
        "profileImage": "",
        "followers": 9923
    }]
},
{
    "newsfeed": [{
        "Title": "Evaluations of disaster education programs for children",
        "date": "Dec 10, 2015",
        "tags": ["disaster", "tornado", "risk management"],
        "division": "Health & Epidemics",
        "Image": "",
        "share": 123
    }, {
        "Title": "UNISDR Annual Report 2014",
        "date": "Dec 10, 2015",
        "tags": ["disaster", "tornado", "risk management"],
        "division": "Civil & Cyber Security",
        "Image": "",
        "share": 123
    }]
};
var people = jsonObj.people;
var newsfeed = jsonObj.newsfeed;
people.map(function(person) {
    $container1.append("<div><ul>" + person.profileImage + "</ul><ul><li>" + person.name + "</li><li>" + person.occupation + "</li><li>" + person.location + "</li><li>" + person.division + "</li></ul>" + "<ul><li> <button> FOLLOW </button> </li>" + "<li>" + person.followers + "</li><li>followers</li><ul></div>");
});
newsfeeds.map(function(news) {
    //do stuff
});

您当前正在尝试遍历整个 JSON 对象。而是从对象中选择该属性并循环访问该属性。

$.each(index.people, function( i, val ) {//what you already have});

然后对新闻源执行类似操作

$.each(index.newsfeed, function( i, val ) {//printing what you have in newsfeed into $container2});

我不明白。为什么不加入这两个数组？

{
    "people": [{...}, {...}],
    "newsfeed": [{...}, {...}]
}

现在，使用 jasondata.people[0].name .对于新闻源：jasondata.newsfeed[0].Title .

相关文章：