Jquery ajax parse json file with different named arrays

Question

I just finished tutorials for jquery ajax working with json. I had been able to create a ajax page. But to make things more complex. I have a json file that contain two types of array. example below(first objects belong to people array and the next two belong to newsfeed):

{  
   "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
      }
   ]
}

My jquery code now is

$.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>");
    }); 

});

The container1 display all the info for the people's array. Now I am stuck on how to display the newsfeed in a separate container2 simultaneously.

Can anyone point me to the correct direct? Thank you

Answer 1

I don't understand. Why don't you join the two arrays?

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

Now, use jasondata.people[0].name. And for newsfeed: jasondata.newsfeed[0].Title.

Answer 2

You're currently trying to loop over the entire JSON object. Instead select that property from the object and loop over that.

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

And then do something similar for the newsfeed

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

Answer 3

I don't see why you couldn't just do something like this:

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
});