Reading object in json using jquery

Question

i have below json which i get from Remote.

{

    "name":"planning Diet",
    "day1":{
        "morning":"chicken",
        "evening":"mutton",
        "night":"Juice"
    },
    "day2":{
        "morning":"burger",
        "evening":"pizza",
        "night":"Juice",
        "late night":"water"
    }

}

Below is what i tried.

$.getJSON("http://domain.com/hello.json",function(result){
  $.each(result, function(i, field)
{
console.log(field);
});

This returns something like

"planning diet"
[object object]
[object object]

Now how can i traverse or loop through all the object... ?

@oGeez : i need to add all those items in my html elements ! — Vishnu, Feb 04 '14 at 11:11
@Cerbrus : that url have answers which is really complicated ! i am expecting some easy solution. — Vishnu, Feb 04 '14 at 11:14

Pranav C Balan · Accepted Answer · 2014-02-04T11:42:22.897

3

In your case you can use something like this,

$.getJSON("http://domain.com/hello.json", function(result) {
    $.each(result, function(i, field) {
        if (typeof field == "object") {
            console.log(i);  
            $.each(field, function(i, f) {
                console.log(f);
            });
        }
        else {
            console.log(field);
        }
    });
});

You can use typeof field == "object" to check the current item is an object or not

edited Feb 04 '14 at 11:42

answered Feb 04 '14 at 11:14

Pranav C Balan

113,687
23
165
188

1

perfect ! will accept soon – Vishnu Feb 04 '14 at 11:19
hey ! how can i get object name ? that is day1 and day 2 ? – Vishnu Feb 04 '14 at 11:33
use the `i` variable inside if condition – Pranav C Balan Feb 04 '14 at 11:34
field where ?? console.log(field) gives object object – Vishnu Feb 04 '14 at 11:36
try `console.log(i)` inside if – Pranav C Balan Feb 04 '14 at 11:36
no its returning "name" – Vishnu Feb 04 '14 at 11:38
wait i will give you a fiddle example – Pranav C Balan Feb 04 '14 at 11:38
can you edit your solution please – Vishnu Feb 04 '14 at 11:39
1

http://jsfiddle.net/pranavcbalan/ZmzUB/2/ – Pranav C Balan Feb 04 '14 at 11:42
1

http://jsfiddle.net/pranavcbalan/ZmzUB/3/ – Pranav C Balan Feb 04 '14 at 11:42

score 1 · Answer 2 · answered Feb 04 '14 at 11:14

You need a function with recursive loop as below:

function getValues(obj) {
    if(typeof obj== "object") {
        $.each(obj, function(key,value) {
            getValues(value);
        });
    }
    else {
       console.log(obj);
    } 
}

Here you are basically doing this:

1) Iterate over the json item, check if item is an object. 
2) If so,iterate over this new object, else print the value. 
3) This goes on till all the values are printed and whole json structure is iterated.

The parameter to the function should be json which you get from remote location.

score 0 · Answer 3 · answered Feb 04 '14 at 11:14

var traverse = function(result){
    $.each(result, function(i, field) {
        if ($.isPlainObject(field)) {
            traverse(field);
        } else {
            console.log(field);
        }
    });
}
$.getJSON("http://domain.com/hello.json", traverse);

score 0 · Answer 4 · answered Feb 04 '14 at 11:14

0

function traverse(obj){
   for(prop in obj){
       if(typeof obj[prop] === "object"){
           traverse(obj[prop]);
       }else{
          console.log(obj[prop]);
       }
   }
}

JS Fiddle: http://jsfiddle.net/Rbs9A/

answered Feb 04 '14 at 11:14

Kevin Bowersox

93,289
19
159
189

score 0 · Answer 5 · answered Feb 04 '14 at 11:16

You need to loop with $.each() only when you have got [{},{},{}...] multiple objects array, but in your case you just have a object which holds another object, so you don't have to do any iteration in a loop. You can refer with its keys:

$.getJSON("http://domain.com/hello.json",function(result){
   console.log(result); // gives you your object
   console.log(result.name); // gives you you "planning Diet"

   console.log(result.day1.morning); // gives you you "chicken"
});

score 0 · Answer 6 · answered Feb 04 '14 at 11:20

0

Try this, field.day1.morning

data=[{

    "name":"planning Diet",
    "day1":{
        "morning":"chicken",
        "evening":"mutton",
        "night":"Juice"
    },
    "day2":{
        "morning":"burger",
        "evening":"pizza",
        "night":"Juice",
        "late night":"water"
    }

}]
$.each(data, function(i, field){
alert(field.day1.morning)
})

Demo http://jsfiddle.net/Aj9eJ/

answered Feb 04 '14 at 11:20

dhana

6,487
4
40
63

no this is not traverse..its just getting particular item from json – Vishnu Feb 04 '14 at 11:21

Reading object in json using jquery

6 Answers6