jQuery loop through JSON array

Question

I have a json array which i fetch by a ajax call and would like to loop through it. The array outputs a category titel and some data records within that category. The array is as followed:

{"Travel":[{"title":"Beautiful title 1"},{"title":"Beautiful title 2"},{"title":"Beautiful title 3"}],"Other":[{"title":"Beautiful title 1"}]}

The basic each function like so can't help me.

$.each(data, function(key, value) {
 console.log(value.title);
}

I want to be able to output it with the main category title and under that have the data records shown.

So for example i want it to look like this:

Travel (3 results):

• Beautiful title 1
• Beautiful title 2
• Beautiful title 3
• List item

Other (1 results):

• Beautiful title 1

Any help would be greatly appreciated. Thank you.

• wallop: isnt it an object and not an array? or am i missing something here?

Answer 1

var data = {"Travel":[{"title":"Beautiful title 1"},{"title":"Beautiful title 2"},{"title":"Beautiful title 3"}],"Other":[{"title":"Beautiful title 1"}]};
$.each(data, function (key, value) {
 $('body').append($('<div></div>').html(key + ' (' + value.length + ' results)'));
 var list = $('<ul></ul>');
 $('body').append(list);
 $.each(value, function (index, titleObj) {
 list.append('<li>' + titleObj.title + '</li>');
 
 });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

• Adriaan: Thank you, that did the trick, changed the code a bit to fit my needs. I've marked your answer as correct answer!

Answer 2

You would need nested .each() as the array contains nested objects.

$.each(data,function(i,object){
 console.log(i +'('+object.length+')')
 $.each(object, function (index, obj) {
 console.log(obj.title);
 });
});

Fiddle

Answer 3

Try

$.each(data, function(key, value) {
 $("<ul />", {
 "class": key.toLowerCase(),
 "html": key + " (" + value.length + " results)<br />"
 }).append($.map(value, function(title, i) {
 return $("<li />", {
 "html": Object.keys(title)[0] + ":" + title.title
 })[0].outerHTML
 })).appendTo("body");
});

var data = {
 "Travel": [{
 "title": "Beautiful title 1"
 }, {
 "title": "Beautiful title 2"
 }, {
 "title": "Beautiful title 3"
 }],
 "Other": [{
 "title": "Beautiful title 1"
 }] 
};
$.each(data, function(key, value) {
 $("<ul />", {
 "class": key.toLowerCase(),
 "html": key + " (" + value.length + " results)<br />"
 }).append($.map(value, function(title, i) {
 return $("<li />", {
 "html": Object.keys(title)[0] + ":" + title.title
 })[0].outerHTML
 })).appendTo("body");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Answer 4

Actually you have a Travel key their

So you can do it like :

$.each(data.Travel,function(key, value){
 console.log(value.title);
}

• Adriaan: I can't because the category titles are pulled from database, there could be 300 different categories, so i would never know all the titles otherwise i would have already done that.