JavaScript 对多维 JSON 进行排序

Question

我有这个 JSON 字符串：

{
"widgets":[
    {"column1":[
        {"weight":1, "bID":1, "hideMe":false, "collapse":false, "titleOf":"Test 1", "colorOf":"color-blue", "theFunction":"functionName"}, 
        {"weight":2, "bID":2, "hideMe":false, "collapse":false, "titleOf":"Test 2", "colorOf":"color-red", "theFunction":"functionName"}, 
        {"weight":3, "bID":3, "hideMe":false, "collapse":true, "titleOf":"Test 3", "colorOf":"color-yellow", "theFunction":"functionName"}
    ]},
    {"column2":[         
        {"weight":1, "bID":4, "hideMe":false, "collapse":false, "titleOf":"Test 4", "colorOf":"color-white", "theFunction":"functionName"}, 
        {"weight":3, "bID":5, "hideMe":false, "collapse":false, "titleOf":"Test 5", "colorOf":"color-green", "theFunction":"functionName"}, 
        {"weight":2, "bID":6, "hideMe":false, "collapse":true, "titleOf":"Test 6", "colorOf":"color-green", "theFunction":"functionName"}
    ]},
    {"column3":[
        {"weight":3, "bID":7, "hideMe":false, "collapse":false, "titleOf":"Test 7", "colorOf":"color-green", "theFunction":"functionName"}, 
        {"weight":2, "bID":8, "hideMe":false, "collapse":true, "titleOf":"Test 8", "colorOf":"color-yellow", "theFunction":"functionName"}, 
        {"weight":1, "bID":9, "hideMe":false, "collapse":false, "titleOf":"Test 9", "colorOf":"color-white", "theFunction":"functionName"}, 
    ]}
]}

如果我这样做

alert(testJSON.widgets.length);

我得到 3，但是如果我这样做了

alert(testJSON.widgets.column1.length);

我收到“testJSON.widgets.column3 未定义”错误。

我最终尝试做的是获取每列 1-3 并按重量对它们进行排序。通过类似的东西

testJSON.widgets.column1.sort(function(a,b) { return parseFloat(a.weight) - parseFloat(b.weight) });

然后我可以通过 jquery 执行 $.each()

Answer 1

代替：

alert(testJSON.widgets.column1.length);

使用

alert(testJSON.widgets[0].column1.length);

“column1”是数组“testJSON.widgets”对象的第一个属性

Answer 2

如果你想像你提到的那样访问，你需要这样布局：

{
"widgets": {
    "column1":[
        {"weight":1, "bID":1, "hideMe":false, "collapse":false, "titleOf":"Test 1", "colorOf":"color-blue", "theFunction":"functionName"},
        {"weight":2, "bID":2, "hideMe":false, "collapse":false, "titleOf":"Test 2", "colorOf":"color-red", "theFunction":"functionName"},
        {"weight":3, "bID":3, "hideMe":false, "collapse":true, "titleOf":"Test 3", "colorOf":"color-yellow", "theFunction":"functionName"}
    ],
    "column2":[
        {"weight":1, "bID":4, "hideMe":false, "collapse":false, "titleOf":"Test 4", "colorOf":"color-white", "theFunction":"functionName"},
        {"weight":3, "bID":5, "hideMe":false, "collapse":false, "titleOf":"Test 5", "colorOf":"color-green", "theFunction":"functionName"},
        {"weight":2, "bID":6, "hideMe":false, "collapse":true, "titleOf":"Test 6", "colorOf":"color-green", "theFunction":"functionName"}
    ],
    "column3":[
        {"weight":3, "bID":7, "hideMe":false, "collapse":false, "titleOf":"Test 7", "colorOf":"color-green", "theFunction":"functionName"},
        {"weight":2, "bID":8, "hideMe":false, "collapse":true, "titleOf":"Test 8", "colorOf":"color-yellow", "theFunction":"functionName"},
        {"weight":1, "bID":9, "hideMe":false, "collapse":false, "titleOf":"Test 9", "colorOf":"color-white", "theFunction":"functionName"},
    ]
    }
}

无需将列包装在数组中。

Answer 3

你有数组而不是对象。 而不是alert(testJSON.widgets.column1.length);，你应该写alert(testJSON.widgets[0].length);

Answer 4

“widgets”键包含一个数组对象，因此您需要指定一个偏移量来获取相应的列。

testJSON.widgets[0].column1; // returns "column1" object

testJSON.widgets[0].column1.length; // returns 3

You can try it here.

我会建议修改架构，以便将“columnX”改为“column”。这将简化遍历，因为您已经通过“小部件”的偏移量知道列号，例如：

alert(testJSON.widgets[0].column.length); 
alert(testJSON.widgets[1].column.length);

Demo (new schema).

Answer 5

testJSON.widgets.column1 未定义的原因是因为widgets 是Array，并且您没有访问数组索引。您可以改为访问 testJSON.widgets[0].column1，或将 JSON 重构为如下所示：

{
"widgets":{
    "column1":[
        {"weight":1, "bID":1, "hideMe":false, "collapse":false, "titleOf":"Test 1", "colorOf":"color-blue", "theFunction":"functionName"}, 
        {"weight":2, "bID":2, "hideMe":false, "collapse":false, "titleOf":"Test 2", "colorOf":"color-red", "theFunction":"functionName"}, 
        {"weight":3, "bID":3, "hideMe":false, "collapse":true, "titleOf":"Test 3", "colorOf":"color-yellow", "theFunction":"functionName"}
    ],
    "column2":[         
        {"weight":1, "bID":4, "hideMe":false, "collapse":false, "titleOf":"Test 4", "colorOf":"color-white", "theFunction":"functionName"}, 
        {"weight":3, "bID":5, "hideMe":false, "collapse":false, "titleOf":"Test 5", "colorOf":"color-green", "theFunction":"functionName"}, 
        {"weight":2, "bID":6, "hideMe":false, "collapse":true, "titleOf":"Test 6", "colorOf":"color-green", "theFunction":"functionName"}
    ],
    "column3":[
        {"weight":3, "bID":7, "hideMe":false, "collapse":false, "titleOf":"Test 7", "colorOf":"color-green", "theFunction":"functionName"}, 
        {"weight":2, "bID":8, "hideMe":false, "collapse":true, "titleOf":"Test 8", "colorOf":"color-yellow", "theFunction":"functionName"}, 
        {"weight":1, "bID":9, "hideMe":false, "collapse":false, "titleOf":"Test 9", "colorOf":"color-white", "theFunction":"functionName"}, 
    ]
}

更新：

其实我觉得你真正想要的是有一个“二维”数组（实际上是数组的数组）；在循环中不能方便地访问命名列。这将是满足您需求的更好结构：

{
    "widgets": [
        [
            {"weight":1, "bID":1, "hideMe":false, "collapse":false, "titleOf":"Test 1", "colorOf":"color-blue", "theFunction":"functionName"}, 
            {"weight":2, "bID":2, "hideMe":false, "collapse":false, "titleOf":"Test 2", "colorOf":"color-red", "theFunction":"functionName"}, 
            {"weight":3, "bID":3, "hideMe":false, "collapse":true, "titleOf":"Test 3", "colorOf":"color-yellow", "theFunction":"functionName"}
        ],
        [         
            {"weight":1, "bID":4, "hideMe":false, "collapse":false, "titleOf":"Test 4", "colorOf":"color-white", "theFunction":"functionName"}, 
            {"weight":3, "bID":5, "hideMe":false, "collapse":false, "titleOf":"Test 5", "colorOf":"color-green", "theFunction":"functionName"}, 
            {"weight":2, "bID":6, "hideMe":false, "collapse":true, "titleOf":"Test 6", "colorOf":"color-green", "theFunction":"functionName"}
        ],
        [
            {"weight":3, "bID":7, "hideMe":false, "collapse":false, "titleOf":"Test 7", "colorOf":"color-green", "theFunction":"functionName"}, 
            {"weight":2, "bID":8, "hideMe":false, "collapse":true, "titleOf":"Test 8", "colorOf":"color-yellow", "theFunction":"functionName"}, 
            {"weight":1, "bID":9, "hideMe":false, "collapse":false, "titleOf":"Test 9", "colorOf":"color-white", "theFunction":"functionName"}
        ]
    ]
}