jqueryでJSON入れ子配列にアクセスする方法

Question

ドロップダウンメニュー のすべてのブランドと値にアクセスしようとしていますが、この方法ではできませんでした。

<select id="secim"> 
</select> 

var data = [ 
     { 
      "products": "Cars", 
      "brands_values" : [ 
      {"brand":"fiat","value":1}, 
      {"brand":"bmw","value":2} 
      ] 
     } 
     ]; 

$.each(data, function(i, item) { 
     $('#secim').append($('<option>', { 
      value: item.brands_values.value, 
      text: item.brands_values.brand 
     })); 
     }); 

どうすればいいですか？ありがとうございます

Answer 1

だけのブランドのために別のループを追加します。

var data = [ 
 
    { 
 
    "products": "Cars", 
 
    "brands_values" : [ 
 
     {"brand":"fiat","value":1}, 
 
     {"brand":"bmw","value":2} 
 
    ] 
 
}]; 
 

 
$.each(data, function(i, item) { 
 
    if (item.brands_values) { 
 
     item.brands_values.forEach(brands => { 
 
     $('#secim').append($('<option>', { 
 
      value: brands.value, 
 
      text: brands.brand 
 
     })); 
 
     }); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="secim"> 
 
</select>

注：あなたが、その場合にはネイティブ.forEachを使用したい場合があり、それがあるので、十分な。私はいつでも私ができる（check this）それを避けるように、私は過去にjQuery.each()とパフォーマンスの問題を持っていた：

data.forEach(item => { 
    if (item.brands_values) { 
     item.brands_values.forEach(brands => { 
      $('#secim').append($('<option>', { 
       value: brands.value, 
       text: brands.brand 
      })); 
     }); 
    } 
}); 

Answer 2

データだけでなくブランド価値を反復します。あなたはそれぞれのブランドと価値にアクセスすることができます。

var data = [ 
 
     { 
 
      "products": "Cars", 
 
      "brands_values" : [ 
 
      {"brand":"fiat","value":1}, 
 
      {"brand":"bmw","value":2} 
 
      ] 
 
     } 
 
     ]; 
 

 
    
 
    $.each(data[0].brands_values, function(i, item) { 
 
     $('#secim').append($('<option>', { 
 
       value: item.value, 
 
       text: item.brand 
 
      })); 
 
      });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="secim"> 
 
</select>

Answer 3

$.each(data, function(i, item) { 
    $.each(item.brands_values, function(j, brand){ 
    $('#secim').append($('<option>', { 
     value: brand.value, 
     text: brand.brand 
    })); 
    }); 
}); 

あなたが別の反復を必要とする - もちろん、最初の「ループ」は非常にエレガントではありませんが、これは、指定されたデータ形式のためです。

ワーキングフィドル：https://jsfiddle.net/3pL6n6pj/

Answer 4

はまず#reduce()機能を使用することによりdataからbrand_valuesのリストを作成します。次に、itemsとして$.eachに渡します。以下

参照のデモ：

var data = [{ 
 
    "products": "Cars", 
 
    "brands_values": [{ 
 
     "brand": "fiat", 
 
     "value": 1 
 
    }, 
 
    { 
 
     "brand": "bmw", 
 
     "value": 2 
 
    } 
 
    ] 
 
}]; 
 

 
var items = data.reduce(function(p,c){ 
 
    c.brands_values.forEach(function(e){ 
 
    p.push(e); 
 
    }); 
 
    return p; 
 
},[]); 
 

 
$.each(items, function(i,item) { 
 
    $('#secim').append($('<option>', { 
 
    value: item.value, 
 
    text: item.brand 
 
    })); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="secim"></select>