Reading object in json using jquery [duplicate]

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
– Vishnu, Commented Feb 4, 2014 at 11:11
@Cerbrus : that url have answers which is really complicated ! i am expecting some easy solution. — Vishnu
– Vishnu, Commented Feb 4, 2014 at 11:14

Pranav C Balan · Accepted Answer · 2014-02-04 11:42:22Z

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 4, 2014 at 11:42

answered Feb 4, 2014 at 11:14

Pranav C Balan

115k25 gold badges172 silver badges195 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Vishnu Over a year ago

perfect ! will accept soon

Vishnu Over a year ago

hey ! how can i get object name ? that is day1 and day 2 ?

Pranav C Balan Over a year ago

use the i variable inside if condition

Pranav C Balan Over a year ago

jsfiddle.net/pranavcbalan/ZmzUB/2

Pranav C Balan Over a year ago

jsfiddle.net/pranavcbalan/ZmzUB/3

|

Pruthvi Raj Nadimpalli · Accepted Answer · 2014-02-04 11:14:48Z

1

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.

answered Feb 4, 2014 at 11:14

Pruthvi Raj Nadimpalli

1,3731 gold badge16 silver badges31 bronze badges

Comments

Danilo Valente · Accepted Answer · 2014-02-04 11:14:27Z

0

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

answered Feb 4, 2014 at 11:14

Danilo Valente

11.4k8 gold badges55 silver badges71 bronze badges

Comments

Kevin Bowersox · Accepted Answer · 2014-02-04 11:14:56Z

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 4, 2014 at 11:14

Kevin Bowersox

94.6k19 gold badges164 silver badges198 bronze badges

Comments

Jai · Accepted Answer · 2014-02-04 11:16:15Z

0

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

answered Feb 4, 2014 at 11:16

Jai

74.8k12 gold badges76 silver badges104 bronze badges

Comments

dhana · Accepted Answer · 2014-02-04 11:20:35Z

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 4, 2014 at 11:20

dhana

6,5255 gold badges43 silver badges66 bronze badges

1 Comment

Vishnu Over a year ago

no this is not traverse..its just getting particular item from json

Collectives™ on Stack Overflow

Reading object in json using jquery [duplicate]

6 Answers 6

10 Comments

Comments

Comments

Comments

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

10 Comments

Comments

Comments

Comments

Comments

1 Comment

Linked

Related