如何在 JS 中访问嵌套的 JSON？

Question

所以我有这个我已经成功传递给 JS 的 JSON 结构：

{
"StepOne": [
    {
        "id": "2",
        "type": "1",
        "description": "How are you feeling?",
        "options": [
            {
                "opt_id": "1",
                "opt_desc": "Good"
            },
            {
                "opt_id": "2",
                "opt_desc": "Perfect"
            },
            .... etc

它一直持续到 PageFive，每个步骤的问题数量从 1 到 4 个不等，每个问题的选项从 null 到大约 10 个不等。我想使用这些信息在 Javascript 中生成多步骤表单，但我不知道如何访问内部数据。我只能找到“PageOne”、“PageTwo”等。我正在使用以下代码来执行此操作：

$(document).ready(function()
    {       
        $('#show-results').click(function() 
        {
            $.post('json.php', function(data) 
            {
                var pushedData = jQuery.parseJSON(data);


                $.each(pushedData, function(i, serverData)
                {
                    alert(i);
                })
            })
        })
    });

现在我已经尝试了这些函数来获取内部值：

var desc = pushedData.PageOne.description;

var desc = pushedData['PageOne']['Description'];

在每个循环中我都尝试过类似的东西

var desc = PageOne.description;

var desc = PageOne['description'];

这一切都以未定义的形式出现。有没有一种方法可以像遍历页面一样遍历每个页面中的每个问题？然后从那里冲洗并重复以迭代每个问题的选项？如果我可以访问每个级别，我应该准备好动态生成投票，这是这里的最终目标。

我认为这段代码有点意思（在我发布后立即发现）。虽然不太好用。

$(document).ready(function()
    {       
        $('#show-results').click(function() 
        {
            $.post('JSAAN.php', function(data) 
            {
                var pushedData = jQuery.parseJSON(data);

                $.each(pushedData, function(i, stepData)
                {
                    $.each(stepData, function(j, questionData)
                    {
                      // Print question here
                           $.each(questionData, function(k, optionData)
                           {
                                // Print option here
                           })

                    })
                })
            })
        })
    });

Answer 1

应该是的

jsonData.StepOne[0].description

因为你有一个额外的 [] 数组包装器。

根据你的结构，省略额外的[]，然后你可以直接访问所有的对象属性，它应该是这样的：

{
"StepOne":
    {
        properties
    },
"StepTwo":
    {
        properties
    }
}

不过，有这样的结构也没关系——现在你必须写StepOne[x].prop

"StepOne":[
    {
        properties
    },
    {
        other props
    }],
 "StepTwo":[{...

根据您发布的代码，这可能是您想要的，因为您每个步骤都有几个问题（？）。

简单的循环如下所示：

for (var key in o) {
  if (o.hasOwnProperty(key)) {
    console.log(key + " -> " + o[key]);
  }
}

嵌套循环更复杂：

function loop(obj) {
    $.each(obj, function(key, val) {
        if($.isPlainObject(val) || $.isArray(val)) {

            console.log(key + " is an Object");
            // object or array -> call recursively
            loop(val);

        } else {
           // plain value
           console.log(key + "->" + val);
        }
    });
}

看看this example。

Answer 2

除了 StepOne !== PageOne 问题：

StepOne 是一个数组，其中包含一个对象。

这对我来说毫无意义，因为在 StepOne 中可能应该只有一步...... ...但那只是我。

所以你必须去：

jsonData.StepOne[0].description;
jsonData.StepOne[0].options[0].opt_desc;
jsonData.StepOne[0].options[1].opt_desc;

等等……