Question

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.

Answer 1

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.