Question

我想使用带有json数据的jquery生成我的html，但是它是嵌套的。

所以我有json数据：

{
  "A" : ['a1','b1','c1'],
  "B" : ['a2','b2','c2'],
  "C" : ['a3','b3','c3']
}

我希望附加到我的html：

<select option="A">
    <optgroup label ="A">
        <option>a1</option>
        <option>b1</option>
        <option>c1</option>
    </optgroup>
    <optgroup label ="B">
        <option>a2</option>
        <option>b2</option>
        <option>c2</option>
    </optgroup>
</select>

我可以使用jquery.each吗？这对我的网络表现有好处吗？还是有更好的方法可以用吗？

额外的问题是，数据溢出，但我可以过滤它，因为我只需要一些数组，而不是全部。

var shownData = ['A', 'C']：这意味着我只想显示2个optgroup，A和C

我尝试过使用嵌套的jquery，但是它未定义，可能是因为它是字符串（？），如下所示：

var arr = ['A'];
$.JSON("JSON.json", function(data){
 $.each(arr, function(index, value){
   $.each(data.value,function(i,val){
    console.log(val);
   });
 });
})

哦..用它作为数组..解决它：D

var arr = ['A'];
$.JSON("JSON.json", function(data){
 $.each(arr, function(index, value){
   $.each(data[value],function(i,val){
    console.log(val);
   });
 });
})

那么还有更好的方法吗？..

Answer 1

$.each()基本上是带有回调的for (name in object)，但据我所知，forEach通常比for循环更快。以下可能是第二快的方法：

var optGroup, 
    option, 
    select = document.getElementById('select');

for (og in obj) {
    optGroup = document.createElement('optgroup');
    optGroup.setAttribute('label', og);
    select.appendChild(optGroup);
    obj[og].forEach(function(opt) {
        option = document.createElement('option');
        option.textContent = opt;
        optGroup.appendChild(option);
    })     
}

演示 - ＆gt;的 http://jsfiddle.net/d7zys0z1/

最快的方法是在之后注入DOM的documentFragment中构建它。

Answer 2

您应该使用data[value]代替data.value：http://jsfiddle.net/u4sd5h1y/3/

您可以使用myObject.myProperty或myObject["myProperty"]来访问对象的属性。使用＆＃34;。＆＃34;当代码中已知属性的名称时。使用＆＃34; []＆＃34;当属性的名称存储在变量中时的方法。

嵌套的jquery包含大量数据

2 个答案: