オブジェクトを通過するときにjQueryで.each（）を繰り返さないようにする

Question

私は$.each()をリファクタリングしようとしているので、この手順を繰り返して別のカテゴリのJSONを取得する必要はありません。

JSON--

var data = { 
"categories": { 
    "cat1": [ 
     { 
      "id": "1", 
      "code": "6001", 
      "name": "Item 1", 
      "size": "M"; 
     } 
    ], 
    "cat2": [ 
     { 
      "id": "232", 
      "code": "60021", 
      "name": "Item 31", 
      "size": ""; 
     } 
    ] 
} 

}

私は、私は以下の例を参照の二つの別々のコードを維持するために持っているようにちょっと迷惑である各カテゴリの$.each()をやっている瞬間。その後、私は2つが、それぞれのdiv同上

$.each(data.categories.cat1, function(index, value) { 
    var itemHtml = '<div>value.name</div>' // sample only 
    $('#cat1').append(itemHtml); 
}); 

$.each(data.categories.cat2, function(index, value) { 
    var itemHtml = '<div>value.name</div>' // sample only 
    $('#cat2').append(itemHtml); 
}); 

で各カテゴリを追加だから私はこのような何かをやってする仕事だろうと思っているが、明確にはしませんでした。

$.each(data, function(index, value) { 
var itemHtml = '...'; 
if(data.cat1) { 
    $('#cat1').append(itemHtml); 
} else if(data.cat2) { 
    $('#cat2').append(itemHtml); 
} 
} 

彼らはとにかく同じHTMLのレイアウトを持つことになりますよう$.each()毎回繰り返すことなくこれを行うための良い方法はあります。

Answer 1

$.eachを使用すると、オブジェクトや配列を反復処理できます。オブジェクトを反復処理すると、プロパティ名とプロパティ値がコールバックに渡されます。あなたがしたい、あなたのデータが実際に{cat1: [...], cat2: [...]}であると仮定すると：

$.each(data.categories, function(category, items) { 
    // `category` is either "cat1" or "cat2" 
    // `items` is an array 

    var $element = $('#' + category); 

    $.each(items, function(index, value) { 
    var itemHtml = '<div>Layout</div>' // sample only 
    $element.append(itemHtml); 
    }); 

}); 

は、あなたの実際の使用ケースに応じて、HTMLを生成し、追加のためのより良い方法は、潜在的にあります。

Answer 2

あなたはあなたがプロパティに繰り返すことができ、かなり簡単な方法でそれを行うには

Object.keys(data.categories).forEach(function(cat) { 
    var itemHtml = '<div>Layout</div>' 
    $('#' + cat).append(itemHtml) 
}) 

Answer 3

をObject.keysとforEachを使用することができます：オブジェクトを介して

$.each(data.categories, function(index, value) { 
    console.log(index); // current category 
    $.each(value, function(indexSub, valueSub) { 
     console.log(indexSub); 
     console.log(valueSub.id); 
     console.log(valueSub.code); 
     console.log(valueSub.name); 
    }); 
});