Q:

Display all data from json in HTML

Hi All I had a Json data like this:
{"city_name": "A",
        "members": [
            {
                "members_name": "Jonathan Doe",
                "bod": "1980-01-20",
                "job": "Accounting",
            },
            {
                "members_name": "Lucy Dash",
                "bod": "1976-01-20",
                "job": "HR",
            },
]
    }

and the javascript call:
var res = info.city_name.filter(function(item){
  return item.city_name =='City A';
});
console.log(res);
var HTML = '<span>'+res[0].city_name+'</span>';
$('#name').append(HTML)
HTML = '<span>'+res[0].members_name+'</span>';
$('#members').append(HTML);

my above js call still using the row number value to print in html, what I want to do is to display all members name in one call "something like res[i].members_name but it's not working.
Thanks for any helps

A:

var res = info.city_name.filter(function(item){
  return item.city_name =='City A';
});    

//add this
res[0].members_names = res[0].members.reduce( (acc, curr) => {
    acc += ` ${curr.members_name} `
    return acc;
}, '');

//Then you can use res[0].members_names to display all the members names

You need to iterate over members array in order to display all of them. Maybe adding a new property members_names which is a concatenation of all the member names and displaying that instead will work for you.

