使用JavaScript解析JSON以构建HTML字符串

Question

我目前已经构建了一个发布JSON对象字符串的API。 JSON的一个简单示例是：

[ {
  "id" : 0,
  "name" : "test SAMPLE Att1 name",
  "attributes" : [ {
    "id" : -1,
    "name" : "AttKey1",
    "value" : "AttValue1"
  }, {
    "id" : -1,
    "name" : "AttKey2",
    "value" : "AttValue2"
  } ]
} ]

我的问题在于我的客户端代码：

function loadSamples() {
  $("#content").children().remove();
  $.getJSON("/api/samples", function (data) {
    $.each(data, function (key, val) {
      $("<tr><td>" + val.id + "</td><td>" + val.name + "</td><td>" + val.attributes + "</td>" +
        "</tr>").appendTo("#content");
    });
    initCallbacks();
  });
}

我正在遍历我发送的每个示例（在这种情况下只有一个，并将字段值附加到HTML字符串。如何遍历attributes并附加每个attribute.key和{{1字符串？

当前问题的图片：

Answer 1

使用另一个循环，遍历所有属性，以“property：value”格式构建属性数组，然后将连接数组追加到HTML：

$.each(data, function (key, val) {
  var attributes = [];
  for (var prop in val.attributes) {
    var value = val.attributes[prop];
    attributes.push(prop + ": " + value);
  }
  $("<tr><td>" + val.id + "</td><td>" + val.name +
    "</td><td>" + attributes.join(",") + "</td>" + "</tr>").appendTo("#content");
});

Answer 2

如果你觉得讨厌，你可以将对象序列化为一个JSON字符串，如下所示：

... + JSON.stringify(val.attributes) + ...

它是递归的，具有标准语法（JSON），并且根本不需要任何支持函数或其他代码。

Answer 3

您可以尝试使用此代码代替val.attributes

$.map(val.attributes, function(item){
   return item.key + ':' +item.value;
}).join(',')