带有大量数据的嵌套jquery

Nested jquery with lot of data

本文关键字：嵌套 jquery 数据      更新时间：2023-09-26

我想使用带有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);
   });
 });
})

那么有什么更好的方法吗？。。

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

演示->http://jsfiddle.net/d7zys0z1/

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

您应该使用data[value]而不是data.value：http://jsfiddle.net/u4sd5h1y/3/

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

相关文章：