Bir json dizisindeki tüm öğeleri görüntüleme

Question

Json ile çalışıyorum ve neredeyse ihtiyacım olan şeylere sahibim. Görüntülenecek doğru bilgiyi alıyorum ancak bir dizinin her bir öğeyi bir değişkene geçirmem gerekiyor ve sonra değişkeni yazdıracağım. Her dizideki tüm öğeleri görüntülemek istiyorum. Çalıştığım json verileri bir faturalandırma uygulamasından (www.curdbee.com) ve bir müşterinin her faturasını göstermeye çalışıyorum. Göstermek istediğim veriler, her satır öğesi, satır öğesi fiyatı ve toplam tutardır. İşte benim kodum:

$(document).ready(function() { 


    $.getJSON('https://nspirelab.curdbee.com/invoices.json?api_token=__token__', function(data){ 
     $.each(data, function(index, item){ 
      var total = item.invoice.total_billed; 
      var lineItemName1 = item.invoice.line_items[0].name_and_description; 
      var lineItemName2 = item.invoice.line_items[1].name_and_description; 
      var lineItemPrice1 = item.invoice.line_items[0].price; 
      var lineItemPrice2 = item.invoice.line_items[1].price; 

      $('#results').append('<div class="lineItem"><ul><li>' + lineItemName1 + lineItemPrice1 + '</li><li>' + lineItemName2 + lineItemPrice2 + '</li><li>' + total + '</li></ul></div>'); 
     }); 

    }); 

}); 

Answer 1

yuvalanmış döngü (jQuery veya, iç içe geçmiş bir $.each()) iş yapacak:

$.getJSON('https://nspirelab.curdbee.com/invoices.json?api_token=&client=104929', function(data){ 
    $.each(data, function(index, item){ 
     // create an empty ul (initially disconnected from the DOM) 
     var $ul = $("<ul/>"); 

     // iterate over the line items 
     $.each(item.invoice.line_items, function(i, lineItem) { 
     // create an li element with the line details and append 
     // it to the ul 
     $ul.append($("<li/>").html(lineItem.name_and_description + lineItem.price)); 
     }); 

    // add the totals to the end of the ul 
    $ul.append($("<li/>").html(item.invoice.total_billed)); 

    // create a new div, append the ul to it, and append the div to results 
    $('#results').append($('<div class="lineItem"/>').append($ul)); 
    }); 
}); 

Answer 2

Böyle şeyleri daha kolay hale getirmek için orada çok sayıda kütüphane var. Neleri kaçırdığınızı görmek için "javascript şablonları" araması yapın ve bunun için seçebileceğiniz çeşitli kütüphaneler hakkında bilgi edinin.

Answer 3

Sorunuzu doğru anladıysam, aradığınız şeyin bir çeşit yinelenen mekanizmalar olduğunu düşünüyorum, underscore.js'u deneyin.