javascript 我如何浏览 json？

How can i navigate through the json?

提问by Sagarmichael

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.

我在一个对象中有一些 JSON，但我似乎可以返回值，一个 json 示例如下。

{
"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

我正在尝试使用返回 rootLayout

 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.

我是 json 的新手，我认为我已经陷入了深渊。我在互联网上找不到任何好的读物，任何人都可以推荐一些。

Thanks.

谢谢。

回答by Robert Koritnik

Some explanation because you don't seem to understand JSON

一些解释，因为您似乎不了解 JSON

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

它并不像人们想象的那么复杂。它实际上代表了 javascript 对象，就好像它们是由代码编写的一样。

So if you have JSON written as:

因此，如果您将 JSON 写为：

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

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

这意味着您的对象有两个属性：id和name。第一个是数字，第二个是字符串。

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

在您的示例中，您可以看到您的对象有两个属性：rootLayout和layoutDescriptions。第一个jsonObj.rootLayout是字符串并将返回"main"，第二个是一个数组：

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...

显然是一个对象数组，因为数组元素用花括号括起来。您在示例中提供的这个特定数组元素对象具有自己的属性，就像我为顶级对象解释的一样：id(string)、container(另一个对象，因为它再次包含在 curl 中) 等...

I hope you understand JSON notation a bit more.

我希望您对 JSON 表示法有更多的了解。

So let's go to your question then

那么让我们来回答你的问题

You can get to idby accessing it via:

您可以id通过以下方式访问它：

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.

请注意，这只会枚举第一个内容对象的内容对象......如果这有意义......那么看看你的 JSON 对象，你会看到你嵌套了对象的内容数组。

回答by Quentin

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

该对象是一个对象，而不是一个数组，并且它没有名为 的属性0。

To get rootLayout:

得到rootLayout：

obj.rootLayout

However, rootLayoutis a string, not an object. It doesn't have an id. The first item in the layoutDescriptionsarray does.

然而，rootLayout是一个字符串，而不是一个对象。它没有id. layoutDescriptions数组中的第一项是。

obj.layoutDescriptions[0].id

回答by Andreas Wong

Are you trying to get one of layoutDescriptionswith idequals to obj.rootLayout?

你们是不是要得到一个layoutDescriptions与id等于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);