如何在jquery中将Json数据解析为html

Question

我正在调用一个返回json数据的Web服务（使用Json.net进行jsonSerialize）。我想通过Jquery检索那些数据。

Json数据是：

{
  "DTItems":[
    {
      "ItemsId":23132,
      "Selection":"123",
      "Item1":5.0,
      "Item2":1000.000000,
      "Item3":0.0,
      "Item4":0.000000,
      "Item5":0.0,
      "item6":0.000000,
      "item7":1.0,
      "item8":1000.000000,
      "item9":0.0,
      "item10":0.000000,
      "item11":0.0,
      "item12":0.000000,
      "Allowed":false
    },
    {
      "ItemsId":23132,
      "Selection":"123",
      "Item1":5.0,
      "Item2":1000.000000,
      "Item3":0.0,
      "Item4":0.000000,
      "Item5":0.0,
      "item6":0.000000,
      "item7":1.0,
      "item8":1000.000000,
      "item9":0.0,
      "item10":0.000000,
      "item11":0.0,
      "item12":0.000000,
      "Allowed":false
    },
    {
      "ItemsId":23132,
      "Selection":"123",
      "Item1":5.0,
      "Item2":1000.000000,
      "Item3":0.0,
      "Item4":0.000000,
      "Item5":0.0,
      "item6":0.000000,
      "item7":1.0,
      "item8":1000.000000,
      "item9":0.0,
      "item10":0.000000,
      "item11":0.0,
      "item12":0.000000,
      "Allowed":false
    }
  ]
}

我想将每个项目分配给每个变量。请帮我。

<table>
    <tr>
        <td>item1</td>
        <td>item2</td>
        <td>item3</td>
        <td>item4</td>
        <td>item5</td>
        <td>item6</td>
        <td>item7</td>
        <td>item8</td>
        <td>item10</td>
        <td>item11</td>
        <td>item12</td>
    </tr>
</table>

像那样

Answer 1

在这种情况下，RegExp非常有用。检查此工作fiddle

HTML

<div id="div1">
...content here
</div>

的JavaScript

    var json = ...your json...

    for (var i = 0; i < json["DTItems"].length; i++) {
    var obj = json["DTItems"][i];
    var $table = $('<table>', {});
    var $tr = $('<tr>', {});
    $.each(obj, function (index, value) {
        // /Item\d+|item\d+/ = every Item or item followed by digits
        if (index.toString().match(/Item\d+|item\d+/) !== null) {

            var $td = $('<td>', {
                html: value
            });
            $($td).appendTo($tr);

        }
    });
    $($tr).appendTo($table);
    $($table).appendTo("#div1");
}