CODEWITHSUNDEEP
javascriptjson
Sagarmichael
Sagarmichael

Reputation: 1624

How can i navigate through the json?

I have some JSON which I have in a object but I can seem to return the values a sample of the json is as follows.

{
"rootLayout":"main",
"layoutDescriptions":[
{
  "id":"main",
  "container" : {
    "type":"Tabs",
    "content":[
      {
        "type":"Panel",
        "label":"Simple Address",
        "layout":"SimpleForm",
        "comment":"This form is simple name value pairs",
        "content":[
          { "type":"label", "constraint":"newline", "text":"Org Name" },
          { "type":"text", "property":"propOne" },
          { "type":"label", "constraint":"newline", "text":"Address" },
          { "type":"text", "property":"addrLine1" },
          { "type":"text", "property":"addrLine2" },
          { "type":"text", "property":"addrLine3" },
          { "type":"label", "constraint":"newline", "text":"Postcode" },
          { "type":"text", "property":"postcode" }
        ]
      },

I am trying to return the rootLayout using 

 obj[0].rootLayout.id

This doesn't work also I am wondering how to access the content elements.

I am new to json and I have been thrown in the deep end I think. I cannot find any good reading on the internet can anyone recommend some.

Thanks.

Upvotes: 0

Views: 18688

Answers (3)

Robert Koritnik
Robert Koritnik

Reputation: 105029

Some explanation because you don't seem to understand JSON

It's not as complicated as one may think. It actually represents javascript objects as if they'd be written by code.

So if you have JSON written as:

{
    id : 100,
    name: "Yeah baby"
}

This means that your object has two properties: id and name. The first one is numeric and the second one is string.

In your example you can see that your object has two properties: rootLayout and layoutDescriptions. The first one jsonObj.rootLayout is string and will return "main" and the second one is an array:

layoutDescriptions: [ {...}, {...},... ]

Apparently an array of objects because array elements are enclosed in curly braces. This particular array element object that you provided in your example has its own properties just like I've explained for the top level object: id (string), container (another object because it's again enclosed in curlies) etc...

I hope you understand JSON notation a bit more.

So let's go to your question then

You can get to id by accessing it via:

jsonObj.layoutDescriptions[0].id

and further getting to your content objects:

var contentObjects = jsonObj.layoutDescriptions[0].container.content[0].content;
for(var i = 0; i < contentObjects.length, i++)
{
    // assign this inner object to a variable for simpler property access
    var contObj = contentObjects[i];

    // do with this object whatever you need to and access properties as
    // contObj.type
    // contObj.property
    // contObj.text
    // contObj.constraint
}

Mind that this will only enumerate first content object's content objects... If this makes sense... Well look at your JSON object and you'll see that you have nested content array of objects.

Upvotes: 12

Andreas Wong
Andreas Wong

Reputation: 60526

Are you trying to get one of layoutDescriptions with id equals to obj.rootLayout?

var targetLayout = {};
for(var i = 0; i < obj.layoutDescriptions.length; i++) {
    if(obj.layoutDescriptions[i].id == obj.rootLayout) {
        targetLayout = obj.layoutDescriptions[i]; break; 
    }
}

console.log(targetLayout);

Upvotes: 1

Quentin
Quentin

Reputation: 943562

The object is an object, not an array, and it doesn't have a property called 0.

To get rootLayout:

obj.rootLayout

However, rootLayout is a string, not an object. It doesn't have an id. The first item in the layoutDescriptions array does.

obj.layoutDescriptions[0].id

Upvotes: 3

Related Questions