Question

我试图从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）的长度不固定，甚至Property中的嵌套对象也不固定。所以我需要一个或多个模板，我可以从中解决这个问题。

从上面的json输出应该是2个下拉列表第一个下拉列表，包括值Drp1Value1，DrpValue2和第二个dropDown，由值Drp2Value1和DrpValue2组成。如果IsDropDown为false，则使用来自json对象的href构建一个锚标记（不应该允许重复从上面的json 2下拉列表中每个2个值，并且建立一个锚标记sho.lud）

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

Answer 1

在JQFaq.com中查看此工作示例。它有两个下拉框，当第一个下拉值改变时，它的子项显示在第二个下拉列表中，基于json数据。

<强> CODE：

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);
}

Answer 2

这个块可能就是你正在努力的目标：

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循环迭代数组。但后来我找到了“{1}}和for in的”属性“的名称。

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

您可以在此处找到此代码和数据的小提琴：http://jsfiddle.net/5kKD9/

根据嵌套的json构建JavaScript下拉列表

2 个答案: