Mostrar todos los elementos en una matriz json

Question

Estoy tratando de trabajar con json y casi tengo lo que necesito. Estoy obteniendo la información correcta para mostrar, pero tengo que pasar cada elemento de una matriz a una variable y luego imprimir la variable. Me gustaría mostrar todos los elementos en cada conjunto. Los datos json con los que estoy trabajando provienen de una aplicación de facturación (www.curdbee.com) y estoy tratando de mostrar cada factura para un cliente. Los datos que quiero mostrar son cada línea de pedido, el precio de la línea de pedido y la cantidad total. Aquí está mi código:

$(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

un bucle anidado (o, en jQuery, una anidada $.each()) hará el trabajo:

$.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

Hay un número ridículo de bibliotecas para facilitar este tipo de cosas. Haga una búsqueda de "plantillas de JavaScript" para ver lo que se ha perdido y para aprender sobre las distintas bibliotecas entre las que puede elegir.

Answer 3

Si entendí tu pregunta correctamente, creo que lo que estás buscando es algún tipo de mecanismo de iteración, prueba underscore.js.