Question

我是JSON架构的新手，在我的代码（ASP.Net 3.5）中，从Web方法，我从数据表返回一个数组，如下所示：

ID | Number
___________

1 | 200  
1 | 300  
2 | 400  
2 | 500  
3 | 600

我将此表中的数组返回给JSON Object 我想要做的是使用JQuery构建数据如下：

<div id="1">ID = 1</div>
    <div id="11">200</div>
    <div id="12">300</div>
</div>
<div id="2">ID = 2</div>
    <div id="21">400</div>
    <div id="22">500</div>
</div>
<div id="3">ID = 3</div>
    <div id="31">600</div>
</div>

Answer 1

对于渲染本身，我建议使用javascript模板库，例如jsRender。至于JSON格式，最好的办法是在服务器端对数据进行分组，并让每个属性包含一个数组，这样你的JSON就像这样：

var data = {
    "1": ["200", "300"],
    "2": ["400", "500"],
    "3": ["600"]
}

Answer 2

您应该手动执行此操作，使用对象对值进行分组。假设您的JSON对象反序列化为：

var myTable = [{ID: 1, Number:200}, {ID: 1, Number:300}, {ID: 2, Number:400}, {ID: 2, Number:500}, {ID: 3, Number:600}]

然后，此代码将对值进行分组：

var myObject = {};
$.each(myTable, function() {
    if (!myObject[this.ID]) myObject[this.ID] = [];
    myObject[this.ID].push(this.Number);
}

然后你应该构建你的html代码结构......像：

var myHtml = $("");
$.each(myObject, function(ID, Numbers) {
    if (Numbers) {
        var divId = $("<div></div>").attr("id", ID);
        $.each(Numbers, function(index, number) {
            divId.append($("<div></div>").attr("id", ID.toString() + (index+1).toString()).html(number));
        }
        divId.appendTo(myHtml);
    }
}

请注意，问题html中的内容无效，它的结束标记太多</div>，因此您可以根据需要调整代码。

分组JSON数据

2 个答案: