tabla y JSon con arrays anidados[Resuelta]

Respuestas:

•  

    1  

   

   

  Jorge Zabala Karma: 517

   
  Fecha: 17-01-2018 06:34:19 En el json vemos productos y ventas, en el código js artistas y albums :D   Votos: 1 - Link respuesta
   
•  

    1  

   

   

  Ernesto Peimbert Karma: 5332

   
  Fecha: 17-01-2018 14:43:48 Maria,
  Además de lo que Jorge menciona, el JSON que presentas no tiene lógica.
  
  Lo que representa es un objeto que tiene una propiedad erróneamente llamada 'productos'.
  'productos' es un arreglo que tiene un solo elemento.
  El único elemento dentro del arreglo productos es un objeto con tres propiedades llamadas '1', '2' y '3'.
  Las propiedades '1', '2' y '3' contienen cada una un objeto.
  El objeto dentro de cada propiedad aparentemente representa a un vendedor con su número, nombre y las ventas que ha hecho.
  La propiedad ventas de dicho vendedor es un arreglo (colección) de productos vendidos.
  
  Entonces tienes muchos problemas:
  1. El JSON y el código que compartes NO son compatibles por la razón que comenta Jorge.
  2. No puedes iterar sobre una instancia de la misma manera en que iteras sobre un arreglo.
  3. Es bueno utilizar let pero en VanillaJS puede que algunos navegadores no lo soporten hasta que adopten ES6.
  4. Generas contenido estático en tu script sin un motivo válido aparente.
  5. saldo y saldo_cum se pueden calcular al vuelo. No necesitas almacenarlo.
  
  Te dejo un fiddle que funciona con el código siguiente
  
  HTML:
  

  <table id="ventas">
        <thead>
          <tr>
            <th>Vendedor</th>
            <th>Producto</th>
            <th>Cantidad</th>
            <th>Precio Unitario</th>
            <th>Total</th>
            <th>Acumulado</th>
          </tr>
        </thead>
        <tfoot>
          <tr>
            <th colspan="5" style="text-align:right;">Total</th>
            <th id="total"></th>
          </tr>
        </tfoot>
        <tbody>
        </tbody>
      </table>
  

  
  
  Javascript:
  

  var datosVentas = {
    "productos": [{
      "1": {
        "per_nr": "1",
        "nombre": "Jose",
        "ventas": [{
          "tag": "1",
          "producto": "naranja",
          "cantidad": "5",
          "precio": "3",
          "saldo": 15,
          "saldo_cum": 15
        }, {
          "tag": "1",
          "producto": "naranja",
          "cantidad": "5",
          "precio": "5",
          "saldo": 25,
          "saldo_cum": 40
        }, {
          "tag": "1",
          "producto": "naranja",
          "cantidad": "10",
          "precio": "3",
          "saldo": 30,
          "saldo_cum": 70
        }, {
          "tag": "1",
          "producto": "naranja",
          "cantidad": "15",
          "precio": "2",
          "saldo": 30,
          "saldo_cum": 100
        }, {
          "tag": "1",
          "producto": "naranja",
          "cantidad": "12",
          "precio": "2",
          "saldo": 24,
          "saldo_cum": 124
        }]
      },
      "2": {
        "per_nr": "2",
        "nombre": "Maria",
        "ventas": [{
          "tag": "1",
          "producto": "naranja",
          "cantidad": "11",
          "precio": "2",
          "saldo": 22,
          "saldo_cum": 22
        }]
      },
      "3": {
        "per_nr": "3",
        "nombre": "Teresa",
        "ventas": [{
          "tag": "1",
          "producto": "naranja",
          "cantidad": "8",
          "precio": "4",
          "saldo": 32,
          "saldo_cum": 32
        }]
      }
    }]
  };
  
  function createCell(data) {
    var cell = document.createElement('td');
  
    cell.appendChild(document.createTextNode(data));
  
    return cell;
  }
  
  function createRow(vendedor, producto, cantidad, precio, total, acumulado) {
    var row = document.createElement('tr');
  
    var nameCell = createCell(vendedor);
    var productCell = createCell(producto);
    var quantityCell = createCell(cantidad);
    var priceCell = createCell('$' + precio);
    var totalCell = createCell('$' + total);
    var accruedCell = createCell('$' + acumulado);
  
    row.appendChild(nameCell);
    row.appendChild(productCell);
    row.appendChild(quantityCell);
    row.appendChild(quantityCell);
    row.appendChild(priceCell);
    row.appendChild(totalCell);
    row.appendChild(accruedCell);
  
    return row;
  }
  
  var ventas = datosVentas.productos[0];
  var totalVentas = 0;
  
  var tableBody = document.querySelector('#ventas > tbody');
  
  for (let venta in ventas) {
    var acumulado = 0;
    var vendedor = ventas[venta].nombre;
    var transacciones = ventas[venta].ventas;
    console.log(transacciones);
  
    for (let transaccion = 0; transaccion < transacciones.length; transaccion++) {
      var producto = transacciones[transaccion].producto;
      var cantidad = transacciones[transaccion].cantidad;
      var precio = transacciones[transaccion].precio;
      var total = precio * cantidad;
  
      acumulado += total;
      totalVentas += total;
  
      var fila = createRow(vendedor, producto, cantidad, precio, total, acumulado);
  
      tableBody.appendChild(fila);
    }
  }
  
  var totalSales = document.createTextNode('$' + totalVentas);
  var salesContainer = document.getElementById('total');
  
  salesContainer.appendChild(totalSales);
  

    Votos: 1 - Link respuesta
   
•  

    1  

   

   

  María Ulloa Karma: 151

   
  Fecha: 17-01-2018 22:08:58 Jorge Zavala, disculpa...metía texto ajeno al tema. Lo mismo vale por la indicación...Gracias.   Votos: 1 - Link respuesta
   
•  

    1  

   

   

  María Ulloa Karma: 151

   
  Fecha: 17-01-2018 22:15:00 Ernesto, muchas gracias, el código lo trataré de usar. La idea es, por el momento iterar por los objetos anidados, y eso lo quería tratar de entender. Ya lo entendí, por ello y las útiles funciones para preparar la salida en Tabla muy excelente. Tantas gracias a todos ustedes que se toman el trabajo, arman de paciencia y ayudan con tanta calidad y efectividad, al momento. Les estoy muy agradecida.   Votos: 1 - Link respuesta