ループと私はJSONデータを反復処理し、動的にjQueryを使用してコンテンツを投入しようとしている動的

Question

データを取り込みます。

1. まず私は、Ajaxリクエストにデータを通してその後
2. Iループを行い、各JSONのために、私は、「製品・ラッパー」のクラスでのdivコンテナを作成動的

をHTMLタグを作成しますオブジェクト（この場合、2つのdivsプロダクトラッパー）。あなたは私のJSONデータの例を見ることができるように、各オブジェクトは、オブジェクトの「詳細」のアレイを有します。私の第二のforeachループから

- どのように私はその適切な「製品・ラッパー」div要素内の「詳細」のデータを取り込むことができますか？

はJavaScript

myApp.init = function(){ 

    var rates = { 
     products: $('.products-container'), 
     init: function(){ 
      rates.showRates(); 
     }, 
     showRates: function(){ 
      $.each(utils.rates, function(index, value){ 
       rates.products.append(
        '<div class="product-wrapper">' + 
         '<div class="product-heading">' + value.name + '</div>' + 
         '<div class="product-details"></div>' + 
        '</div>' 
       ); 

       $.each(value.details, function(i,val){ 
        $('.product-details').append('<div class="detail-row">' + 
         '<div class="detail detail-balance">' + val.balance + '</div>' + 
         '<div class="detail detail-gross-rate">' + val.grossRate + '</div>' + 
         '<div class="detail detail-aer">' + val.aer + '</div>' + 
        '</div>'); 
       }); 
      }); 
     } 
    }; 

    var utils = { 
     rates: '', 
     url: $('.business-interest-rates').attr('data-rates-json'), 
     init: function(){ 
      utils.ajaxRequest(); 
     }, 
     ajaxRequest: function(){ 
      $.ajax({ 
       url: utils.url, 
       dataType: 'json', 
       success:function(data){ 
        utils.rates = data; 

        if($('#interest-rates').length > 0){ 
         rates.init(); 
        } 
       }, 
       error: function(e){ 
        console.log(e.message); 
       } 
      }); 
     } 
    }; 
    utils.init(); 
}; 

JSON

[ 
    { 
     "name":"Australian dollar (AUD)", 
     "currency":"AUD", 
     "details":[ 
      { 
       "balance": "1+", 
       "grossRate": "1.700", 
       "aer": "0.5" 
      }, 
      { 
       "balance": "500,000+", 
       "grossRate": "2.100", 
       "aer": "2.00" 
      }, 
      { 
       "balance": "1,500,000+", 
       "grossRate": "2.450", 
       "aer": "1.00" 
      } 
     ] 
    }, 
    { 
     "name":"EURO (EU)", 
     "currency":"EU", 
     "details":[ 
      { 
       "balance": "1+", 
       "grossRate": "1.700", 
       "aer": "1.50" 
      }, 
      { 
       "balance": "500,000+", 
       "grossRate": "2.100", 
       "aer": "2.20" 
      } 
     ] 
    } 
] 

Answer 1

自分のものが、固有のIDを追加するCSSクラスを使用するか、最初の全体のHTMLコードを生成しないのどちらか（ラッパーと詳細を一括して）追加して追加します。

// use unique IDs for appending 
function() { 
    $.each(utils.rates, function (index, value) { 
     rates.products.append(
      '<div class="product-wrapper">' + 
      '<div class="product-heading">' + value.name + '</div>' + 
      '<div id="product-details-' + value.name + '"></div>' + 
      '</div>' 
     ); 

     $.each(value.details, function (i, val) { 
      $('#product-details-' + value.name).append('<div class="detail-row">' + 
       '<div class="detail detail-balance">' + val.balance + '</div>' + 
       '<div class="detail detail-gross-rate">' + val.grossRate + '</div>' + 
       '<div class="detail detail-aer">' + val.aer + '</div>' + 
       '</div>'); 
     }); 
    }); 
} 

// first generate all html code, then append 
function() { 
    $.each(utils.rates, function (index, value) { 
     var html = '<div class="product-wrapper">' + 
      '<div class="product-heading">' + value.name + '</div>' + 
      '<div class="product-details">'; 
     $.each(value.details, function (i, val) { 
      html += '<div class="detail-row">' + 
       '<div class="detail detail-balance">' + val.balance + '</div>' + 
       '<div class="detail detail-gross-rate">' + val.grossRate + '</div>' + 
       '<div class="detail detail-aer">' + val.aer + '</div>' + 
       '</div>'; 
     }); 
     html += '</div>' + 
      '</div>'; 
     rates.products.append(
      html 
     ); 
    }); 
}