【问题标题】:Multi Level JSON with jQuery使用 jQuery 的多级 JSON
【发布时间】:2013-05-30 22:46:05
【问题描述】:

我正在尝试创建一些深度为几级的 json,但我在 2 个地方遇到了麻烦。首先,是正确的格式。我还想在数据集中添加一个“level_two”。

第二个是解析数据。任何帮助将不胜感激。

谢谢!

JSON:
{
    "math_problems": [
        {
            "level_one": {
                "addition": {
                   "problem": {
                        "data_set": [
                            3,
                            2
                        ]
                    },
                    "problem": {
                        "data_set": [
                            5,
                            1
                        ]
                    }
                },
                "subtraction": {
                    "problem": {
                        "data_set": [
                            4,
                            2
                        ]
                    }
                },
                "division": {
                    "problem": {
                        "data_set": [
                            3,
                            2
                        ]
                    }
                },
                "multiplication": {
                    "problem": {
                        "data_set": [
                            3,
                            2
                        ]
                    }
                }
            }
        }
    ]
}


jQuery:

$.getJSON('/data/math.json', function(data) {

        var the_data = [];

        $.each(data,function(index,item) {
            i = index;
            number_one = item[0]['level_one']['addition']['problem']['data_set'][0];
            number_two = item[0]['level_one']['addition']['problem']['data_set'][1];

            the_data += number_one + " + " + number_two;
        });

        $('<ul/>', {
            'class': 'my-new-list',
            html: the_data + " = " + (number_one + number_two)
        }).appendTo('body');
    });

我希望能够解析出来的数据说:

level_one > 加法 > 问题 1 > 3, 2

level_two > 减法 > 问题 1 > 4, 3

有什么想法吗?

【问题讨论】:

    标签: javascript jquery html json parsing


    【解决方案1】:

    所以正确的 JSON 是:

    var object = {
        levelOne: {
            // etc.
        },
        levelTwo: {
            // etc.
        }
    }
    

    使用JSON.parse()解析它然后遍历它就像:

    object.level_one.prop.prop1;
    object.level_two.otherProp.otherProp2;
    

    【讨论】:

      【解决方案2】:

      问题是,您在同一级别的哈希中定义了相同的键:

      "problem": {
          "data_set": [
              3,
              2
          ]
      },
      "problem": {
          "data_set": [
              5,
              1
          ]
      }
      

      这些将相互碰撞和覆盖。把它重组成一个数组,你应该很好。

      【讨论】:

        【解决方案3】:

        JSON 被转换为 javascript 对象,因此您在“添加”上重复关键“问题”这一事实使得第二个“问题”覆盖了第一个。

        你应该重新考虑你的 json 结构,可能是这样的:

        "math_problems" : {
          "level_one": {
            "addition": {
              "problems": [
                {
                  "data_set": [3,2]
                },
                {
                  "data_set": [5,1]
                }
              ]
            },
            "subtraction": ...     
          }  
        }
        

        或者,如果问题、问题类型和级别是高度动态的:

        "math_problems" : {    
          "levels": [
            {
              "name" : "Level one",
              "problems": [
                {
                  "type" : "addition",
                  "data_set": [3,2]
                },
                {
                  "type" : "addition",
                  "data_set": [5,1]
                },
                {
                  "type" : "subtraction",
                  "data_set": [2,1]
                }
              ]
            },
            {
              "name" : "Level two",
              "problems": [
                ...
              ]
            }
          ]
        }
        

        【讨论】:

        • 第 2 行出现错误:未捕获的 SyntaxError: Unexpected token :
        • 我不太明白“var object =”是什么意思,如果您使用 jQuery ajax 来获取 json,那么请求的结果将已经是一个 javascript 对象。您可以在浏览器控制台中检查 JSON,并使用 jsonlint.com 验证您的 JSON
        • 感谢您到目前为止的帮助,这就是我正在使用的,但我仍然不完全在那里.. $.ajax({ dataType: 'json', url: '/data/math. json', 成功 : function (response) { alert(response.math_problems.levels.level.problems.dataset[0]); } });
        • 尝试使用console.log(response);这会将对象输出到浏览器控制台,从那里您将清楚地了解生成的结构
        猜你喜欢
        • 1970-01-01
        • 2011-08-26
        • 2014-06-12
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多