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

Are you always going to get two arrays of people and newsfeed? Is index the entire JSON object? — Jeremy Jackson
– Jeremy Jackson, Commented Jan 20, 2016 at 22:48
actually I have a dropdown menu that influence both arrays, In this case I just want to figure out a simple way to display the two arrays in two different tables. and Yes Index is the entire JSON object. — tiancaishi
– tiancaishi, Commented Jan 20, 2016 at 22:56

Jeremy Jackson · Accepted Answer · 2016-01-20 22:58:27Z

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

Alex Taker · Accepted Answer · 2016-01-20 23:04:48Z

0

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

answered Jan 20, 2016 at 23:04

Alex Taker

2031 silver badge6 bronze badges

Comments

user2712674 · Accepted Answer · 2016-01-20 23:05:50Z

0

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.

answered Jan 20, 2016 at 23:05

user2712674

Collectives™ on Stack Overflow

Jquery ajax parse json file with different named arrays

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related