0

我正在尝试从 json 对象构建 html。我的 json 将采用以下结构。

[{"Property1":[{"IsDropDown":"true","Value":"Drp1Value1"},
    {"IsDropDown":"true","Value":"Drp1Value2"},
    {"IsDropDown":"false","Href":"Link1"}]}, 
{"Property2":[{"IsDropDown":"true","Value":"Drp2Value1"},
    {"IsDropDown":"true","Value":"Drp2Value2"},
    {"IsDropDown":"false","Href":"Link1"}]}]**

从这个 json 我需要通过检查属性 IsDropDown 和 1 个锚链接 (IsDropDown == false) 来构建 2 个下拉列表。请记住，属性对象（Property1）的长度不是固定的，甚至属性中的嵌套对象也不是固定的。所以我需要一个或多个模板来解决这个问题。

从上面的 json 输出应该像 2 个下拉列表，第一个下拉列表包含值 Drp1Value1、DrpValue2 和第二个下拉列表，包含值 Drp2Value1 和 DrpValue2。如果 IsDropDown 为 false，则使用 json 对象中的 href 构建一个锚标记（不应在上面的 json 2 下拉列表中允许重复，每个下拉列表有 2 个值，并构建一个锚标记 sho.lud）

我无法更改 json 结构，因为它来自第三方 api。是否可以使用任何模板框架作品？我尝试了 jTemplate 和 mustache.js 但我做不到。

4

2 回答 2

1

看看JQFaq.com中的这个工作示例。它有两个下拉框，当第一个下拉值更改时，它的子项会根据 json 数据显示在第二个下拉列表中。

代码：

var jsonData = [{
  "Property1": [{
    "IsDropDown": "true",
    "Value": "Drp1Value1"
  }, {
    "IsDropDown": "true",
    "Value": "Drp1Value2"
  }, {
    "IsDropDown": "false",
    "Href": "Link1"
  }],
  "Value": "Property1"
}, {
  "Property2": [{
    "IsDropDown": "true",
    "Value": "Drp2Value1"
  }, {
    "IsDropDown": "true",
    "Value": "Drp2Value2"
  }, {
    "IsDropDown": "false",
    "Href": "Link1"
  }],
  "Value": "Property2"
}];

var collection1 = [];
$.each(jsonData, function (key, value) {
  collection1.push(value.Value);
});

var $newOption = $.tmpl("<option>${Value}</option>", jsonData);
var $select = $("#Select1").append($newOption).change(function () {
  selectionChanged(this);
});
selectionChanged($select[0]);

function selectionChanged(select) {
  var selectedIndex = $.inArray(select.value, collection1);
  var newOpt = $.tmpl("<option>${Value}</option>", jsonData[selectedIndex][select.value]);
  $("#Select2").empty().append(newOpt);
}
于 2013-01-09T07:56:46.947 回答
0

这个块可能是你正在努力解决的问题：

var i, j, p;
var out = '';
for (i=0; i < json.length; i++) {
  for (p in json[i]) {
    if (json[i].hasOwnProperty(p)) {
      out += 'select name='+p+'<br/>';
      for (j=0; j < json[i][p].length; j++) {
        if (json[i][p][j].IsDropDown == 'true') {
          out += ' option='+json[i][p][j].Value+'</br>';
        }
      }
      break; // from for loop, since we only want one select per top-level object
    }
  }
}

所以我用常规for循环迭代数组。但是后来我用for inand找到了“属性”的名称hasOwnProperty。

请注意，我没有实现任何其他业务逻辑，因为我怀疑您在那里会遇到问题。

你可以在这里找到这个代码和你的数据的小提琴：http: //jsfiddle.net/5kKD9/

于 2013-01-08T20:07:35.157 回答