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

Question

所以我已经成功地将这个 JSON 结构传递到 JS 中:

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

一直持续到第五页，每个步骤的问题数量从 1 到 4 个不等，每个问题的选项从空到大约 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 。