1

Buen día Tengo el siguiente código que me crea una tabla dinámica a partir de un arreglo.

var data = [
  {id:1, land: 'FINCA1',  product: "ROSA", week:25,  quantity: 2000}, 
  {id:1, land: 'FINCA2',  product: "ROSA", week:25, quantity: 1900}, 
  {id:1, land: 'FINCA3',  product: "ROSA", week:25, quantity: 350},
  {id:1, land: 'FINCA3',  product: "ROSA1",week:25, quantity: 410},
  {id:1, land: 'FINCA1',  product: "ROSA", week:26, quantity: 1254},
  {id:1, land: 'FINCA2' ,  product: "ROSA",week:26, quantity: 123},
  {id:1, land: 'FINCA3' ,  product: "ROSA",week:26, quantity: 200}
];

//Obtengo los keys del objeto para crear el Thead de la tabla y los guardo en una variable

var tabla = '';
var tableHead = '<tr>';

Object.keys(data[0]).forEach(function(prop){
  if(prop != 'week' && prop != 'quantity')
  tableHead += '<th>'+prop+'</th>';
});

var semanas = [];
    for(var i in data){
      semanas.push(
              data[i].week
      );
    }

    semanas = array_unique(semanas);
    var index = semanas.indexOf(undefined);
    if (index > -1) {
      semanas.splice(index, 1);
    }

    for(var a in semanas){
      tableHead += '<th style="text-align:right;">'+'Sem '+semanas[a]+'</th>';
    }

tableHead += '<th>Total</th>';


var arrayOrganizado = data.reduce(function(arr, item){
  item.week = {
    numero : item.week,
    cantidad : item.quantity
  }
  var ele = arr.find(it=>it.land === item.land && it.product === item.product);
  if(ele){
    ele.week.push(item.week);
    ele.total = ele.week.reduce((a, b)=> a + b.cantidad, 0);
  } else {
    item.week = [item.week];
    item.total = item.quantity;
    arr.push(item);
  }
  return arr;
}, []);

arrayOrganizado.forEach(function(fila){
 table += '<tr>';
  var f = Object.keys(fila).reduce( function(a, b){
    if(b != 'week' && b != 'quantity' && b != 'total')
      return a +  '<td>' + fila[b] + '</td>';
    return a;
  }, '');
  table += f + semanas.reduce( (a, _, i)=>a + '<td>' + (fila.week[i] ? fila.week[i].cantidad : 0) + '</td>', '') + '<td>' + fila.total + '</td>';   
});

Me genera el siguiente resultado (Nota: como se ve en la tabla en el HTML):

-----------------------------------------------------
Land     |     Product   |    25   |    26   | Total |
-----------------------------------------------------
FINCA1   |     ROSA      |   2000  |   1254  |  3254 |
-----------------------------------------------------
FINCA2   |     ROSA      |   1900  |   123   |  2023 |
-----------------------------------------------------
FINCA3   |     ROSA      |   350   |   200   |  550  |
-----------------------------------------------------
FINCA3   |     ROSA1     |   410   |    0    |  410  |
-----------------------------------------------------

Hasta aquí todo muy bien ya que me funciona excelente, lo que quiero es poder totalizar las columnas y quede de la siguiente manera:

-----------------------------------------------------
Land     |     Product   |    25   |    26   | Total |
-----------------------------------------------------
FINCA1   |     ROSA      |   2000  |   1254  |  3254 |
-----------------------------------------------------
FINCA2   |     ROSA      |   1900  |   123   |  2023 |
-----------------------------------------------------
FINCA3   |     ROSA      |   350   |   200   |  550  |
-----------------------------------------------------
FINCA3   |     ROSA1     |   410   |    0    |  410  |
-----------------------------------------------------
TOTAL    |               |   4660  |   1577  |  6237 |
------------------------------------------------------ 

Lo he intentado de la siguiente manera:

var tableFoot = '';
var totalsem  = 0;
var totalsum  = 0;
arrayOrganizado.forEach(function(fila){
  tableFoot = semanas.reduce( (a, _, i)=>a + '<td>' + (fila.week[i] ? (totalsem += fila.week[i].cantidad) : 0) + '</td>', '') + '<td>' + (totalsum += fila.total) + '</td>';   
});

De esta manera me hace la suma y funciona muy bien el el campo Total de la tabla pero en cada una de las columnas de la semana no funciona bien, Gracias por su colaboración. Saludos!

2 respuestas 2

0

Aquí tienes la solución, te añado los cambios respecto a la respuesta del otro post:

var data = [
  {id:1, land: 'FINCA1',  product: "ROSA", variety: "R01", week:25,  quantity: 2000}, {id:1, land: 'FINCA2', product: "ROSA", variety: "R01", week:25, quantity: 1900}, {id:1, land: 'FINCA3',  product: "ROSA",    variety: "R01", week:25, quantity: 350},{id:1, land: 'FINCA3',  product: "ROSA1",   variety: "V01", week:25, quantity: 410},{id:1, land: 'FINCA1',  product: "ROSA",    variety: "A01", week:26, quantity: 1254},{id:1, land: 'FINCA2' ,  product: "ROSA",    variety: "A01", week:26, quantity: 123},{id:1, land: 'FINCA3' ,  product: "ROSA",    variety: "A01", week:26, quantity: 200}
];

//Obtengo los keys del objeto para crear el Thead de la tabla y los guardo en una variable

var tabla = document.createElement('table');
var tableHead = document.createElement('tr');

Object.keys(data[0]).forEach(prop=>{
  if(prop != 'week' && prop != 'quantity')
  tableHead.innerHTML += '<th>'+prop+'</th>';
});

var semanas = data.reduce( (semanas_, elemento)=>{
  if(semanas_.indexOf(elemento.week) == -1)
    semanas_.push(elemento.week)
  return semanas_;
}, []);

semanas.forEach( semana=>{
  tableHead.innerHTML += '<th>'+semana+'</th>';
});

/* ESTO ES NUEVO */
var total_semanas = [];
/*****************/

tableHead.innerHTML += '<th>Total</th>';
tabla.appendChild(tableHead);

var tbody = document.createElement('tbody');

tabla.appendChild(tbody);

document.querySelector('body').appendChild(tabla);

var arrayOrganizado = data.reduce((arr, item)=>{
  
  /* ESTO ES NUEVO */
  var t = total_semanas.find(e=> e.semana === item.week);
  if (t) t.total += item.quantity;
  else total_semanas.push({ semana : item.week, total : item.quantity });
  /*****************/
  
  item.week = {
    numero : item.week,
    cantidad : item.quantity
  }
  var ele = arr.find(it=>it.land === item.land && it.product === item.product);
  if(ele){
    ele.week.push(item.week);
    ele.total = ele.week.reduce((a, b)=> a + b.cantidad, 0);
  } else {
    item.week = [item.week];
    item.total = item.quantity;
    arr.push(item);
  }
  return arr;
}, []);

arrayOrganizado.forEach(fila=>{
  var f = Object.keys(fila).reduce( (a, b)=>{
    //console.log(b);
    if(b != 'week' && b != 'quantity' && b != 'total')
      return a +  '<td>' + fila[b] + '</td>';
    return a;
  }, '');
  tbody.innerHTML += f + semanas.reduce( (a, _, i)=>a + '<td>' + (fila.week[i] ? fila.week[i].cantidad : 0) + '</td>', '') + '<td>' + fila.total + '</td>';   
});


/* ESTO ES NUEVO */


var f = Object.keys(arrayOrganizado[0]).reduce( (a, b)=>{
  //console.log(b);
  if(b != 'week' && b != 'quantity' && b != 'total')
    return a +  '<td> ---- </td>';
  return a;
}, '');

tbody.innerHTML += f + total_semanas.reduce( (a, _, i)=>a + '<td>' + _.total + '</td>', '') + '<td>' + total_semanas.reduce( (a, b) => a.total + b.total) + '</td>';   

1
  • 1
    Muchas gracias me sirvió mucho, gracias por tu esfuerzo Saludos! Commented el 17 jul. 2016 a las 1:18
0

Voy a dejar aquí una alternativa un poco diferente que no es tan eficiente como la que ya tienes, pero que sólo requiere cambios en una parte del código.

La idea es que se calcule y dibuje la tabla tal y como lo estás haciendo hasta ahora y, al final del todo, cuando ya esté generada, sumes las columnas a partir de los valores de las columnas en lugar de a partir del array con los datos.

El código comentado sería algo así:

// crea una nueva fila que servirá de pie de tabla
var tableFoot = document.createElement('tr');
// atraviesa la cabecera de la tabla y para cada elemento
tabla.querySelectorAll("th").forEach(function(elem, index, arr) {
  // si el contenido es un número de semana o la palabra "Total"
  if(elem.innerHTML == parseInt(elem.innerHTML) || elem.innerHTML == "Total") {
    // inicializa la suma a 0
    var aux = 0;
    // atraviesa todas las celdas de esa columna
    tabla.querySelectorAll("td:nth-child(" + (index+1) + ")").forEach(function(e, i, a) { 
      // y añade su contenido a la suma
      aux += parseInt(e.innerHTML); 
    });
    // inserta una celda en la fila pie con el valor de la suma
    tableFoot.innerHTML += "<td>" + aux + "</td>";
  } else {
    // si no es una semana o el total, inserta una celda con guiones a la fila pie
    tableFoot.innerHTML += "<td>---</td>";
  }
});
// inserta la fila de pie a la tabla
tabla.appendChild(tableFoot);

Y aquí dejo una demo (a partir del código de la respuesta a tu pregunta anterior):

var data = [
  {id:1, land: 'FINCA1',  product: "ROSA", variety: "R01", week:25,  quantity: 2000}, {id:1, land: 'FINCA2', product: "ROSA", variety: "R01", week:25, quantity: 1900}, {id:1, land: 'FINCA3',  product: "ROSA",    variety: "R01", week:25, quantity: 350},{id:1, land: 'FINCA3',  product: "ROSA1",   variety: "V01", week:25, quantity: 410},{id:1, land: 'FINCA1',  product: "ROSA",    variety: "A01", week:26, quantity: 1254},{id:1, land: 'FINCA2' ,  product: "ROSA",    variety: "A01", week:26, quantity: 123},{id:1, land: 'FINCA3' ,  product: "ROSA",    variety: "A01", week:26, quantity: 200}
];

//Obtengo los keys del objeto para crear el Thead de la tabla y los guardo en una variable

var tabla = document.createElement('table');
var tableHead = document.createElement('tr');

Object.keys(data[0]).forEach(prop=>{
  if(prop != 'week' && prop != 'quantity')
  tableHead.innerHTML += '<th>'+prop+'</th>';
});

var semanas = data.reduce( (semanas_, elemento)=>{
  if(semanas_.indexOf(elemento.week) == -1)
    semanas_.push(elemento.week)
  return semanas_;
}, []);

semanas.forEach( semana=>{
  tableHead.innerHTML += '<th>'+semana+'</th>';
});

tableHead.innerHTML += '<th>Total</th>';
tabla.appendChild(tableHead);

var tbody = document.createElement('tbody');

tabla.appendChild(tbody);

document.querySelector('body').appendChild(tabla);

var arrayOrganizado = data.reduce((arr, item)=>{
  item.week = {
    numero : item.week,
    cantidad : item.quantity
  }
  var ele = arr.find(it=>it.land === item.land && it.product === item.product);
  if(ele){
    ele.week.push(item.week);
    ele.total = ele.week.reduce((a, b)=> a + b.cantidad, 0);
  } else {
    item.week = [item.week];
    item.total = item.quantity;
    arr.push(item);
  }
  return arr;
}, []);

arrayOrganizado.forEach(fila=>{
  var f = Object.keys(fila).reduce( (a, b)=>{
    //console.log(b);
    if(b != 'week' && b != 'quantity' && b != 'total')
      return a +  '<td>' + fila[b] + '</td>';
    return a;
  }, '');
  tbody.innerHTML += f + semanas.reduce( (a, _, i)=>a + '<td>' + (fila.week[i] ? fila.week[i].cantidad : 0) + '</td>', '') + '<td>' + fila.total + '</td>';   
});


var tableFoot = document.createElement('tr');
tabla.querySelectorAll("th").forEach(function(elem, index, arr) {
  if(elem.innerHTML == parseInt(elem.innerHTML) || elem.innerHTML == "Total") {
    var aux = 0;
    tabla.querySelectorAll("td:nth-child(" + (index+1) + ")").forEach(function(e, i, a) { aux += parseInt(e.innerHTML); });
    tableFoot.innerHTML += "<td>" + aux + "</td>";
  } else {
    tableFoot.innerHTML += "<td>---</td>";
  }
});
tabla.appendChild(tableFoot);

1
  • Muchas gracias por tu respuesta, me parece bien conocer nuevas formas de buscar la solución Commented el 17 jul. 2016 a las 19:31

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.