2

Tengo el siguiente código que me genera una tabla a partir de unos datos que llegan de un arreglo, el código me muestra los valores de cada producto por semana y su total 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 |
------------------------------------------------------


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 = 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>';
});


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)=>{


  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>';   
});

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>'; 

Hasta aquí todo esta bien, el problema es que cuando se aumentan las semanas, pueden haber semanas que no tengan valores y su resultado es 0, pero en lugar de poner ese valor en la semana que corresponde lo pone en la última, me explico:

El arreglo puede llegar de la siguiente manera

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},
      {id:1, land: 'FINCA3' , product: "ROSA", week:24, quantity: 200}
      {id:1, land: 'FINCA3' , product: "ROSA", week:23, quantity: 1200}
    ];

La tabla debería quedar así:

-----------------------------------------------------------------------
Land     |     Product   |    23   |    24   |   25  |  26  |   Total |
-----------------------------------------------------------------------
FINCA1   |     ROSA      |   0     |   0     |  2000 | 1254 |  3254   |
-----------------------------------------------------------------------
FINCA2   |     ROSA      |   0     |   0     |  1900 | 123  |  2023   | 
-----------------------------------------------------------------------
FINCA3   |     ROSA      |   1200  |   200   |  350  | 200  |  1950   |
-----------------------------------------------------------------------
FINCA3   |     ROSA1     |   0     |    0    |  410  |   0  |  410    |
-----------------------------------------------------------------------
TOTAL    |               |   1200  |   200   |  4660 | 1577 |  7637   |
-----------------------------------------------------------------------

Sin embargo, la tabla me queda así;

-----------------------------------------------------------------------
Land     |     Product   |    23   |    24   |   25  |  26  |   Total |
-----------------------------------------------------------------------
FINCA1   |     ROSA      |   2000  |  1254   |  0    | 0    |  3254   |
-----------------------------------------------------------------------
FINCA2   |     ROSA      |   1900  |   123   |  0    | 0    |  2023   | 
-----------------------------------------------------------------------
FINCA3   |     ROSA      |   1200  |   200   |  350  | 200  |  1950   |
-----------------------------------------------------------------------
FINCA3   |     ROSA1     |   410   |    0    |    0  |   0  |  410    |
-----------------------------------------------------------------------
TOTAL    |               |   1200  |   200   |  4660 | 1577 |  7637   |
-----------------------------------------------------------------------

Creo que es la función reduce que me genera el problema en esta parte:

tbody.innerHTML += f + semanas.reduce( (a, _, i)=>a + '<td>' + (fila.week[i] ? fila.week[i].cantidad : 0) + '</td>', '') + '<td>' + fila.total + '</td>';

No se si haya otra función similiar que haga lo mismo, o no se si es esa función, agradezco su ayuda

1
  • En la otra pregunta que hiciste sobre este tema te mencionaba que sería mejor obtener los datos ordenados y agrupados directamente desde la consulta a la base de datos. Sigo pensando que te ahorrarías muchos de los problemas que están surgiendo ahora.
    – Alvaro Montoro
    Commented el 23 jul. 2016 a las 19:01

1 respuesta 1

1

El problema no está en la función reduce sino en el ordenamiento de los datos y la inclusión de los datos Ausentes. No indagué mucho en el codigo ni pretendo hacerle mejoras, solo solucioné los errores que generaban que los datos se mostraran en las columnas incorrectas.

  1. No se ordenan los datos: si se quiere mostrar el numero de la semana por orden, siempre es necesario ordenarlos en algun punto. en el ejemplo que tienes, las semanas quedan ordenadas en la siguiente forma:

    25 | 26 | 24 | 23

Las semanas quedan en el mismo orden en el que se presentan en el arreglo llamado data. por lo que se puede aplicar sort en el arreglo semanas para que por lo menos la cabecera quede bien.

var semanas = data.reduce( (semanas_, elemento)=>{
  if(semanas_.indexOf(elemento.week) == -1)
    semanas_.push(elemento.week)
  semanas_.sort();
  return semanas_;
}, []);
  1. La información en cada fila se encuentra indexada incorrectamente, por ejemplo si en total se tienen 7 semanas, pero cada file tiene 2, 3 o 4 semanas, en la forma en que se estaba indexando siempre se mostrara la información en las primeras columnas de la fila y las demás se rellenarán con ceros. Hay muchas formas de hacerlo, una puede ser insertar en cada fila valores que representen las semanas faltantes, yo elegí al momento de mostrar cada celda, comprobar si existe esa semana para la fila actual, si existe mostrar el valor, poner cero sí no.

La diferencia entre los dos métodos depende mas del rendimiento esperado, pero para la mayoría de los casos no hay grandes penalidades en tiempo de ejecución.

tbody.innerHTML += f + semanas.reduce( function(a, c, i){
        var w = fila.week.find(function(current,index,fila_weeks){
        return current.numero===c;
            });
          if (w===undefined){
            w=0;
          }else{
            w=w.cantidad;
          }
        return a + '<td>' + w + '</td>'},   '') + '<td>' + fila.total + '</td>';   
});

Edit: se añade el ordenamiento a la fila de totales.

El código completo lo puedes probar en este jsfiddle.

3
  • Muchas gracias por tu respuesta, estuve mirando los totales de las columnas, he intentado algo paecido, pero no me dan los totales correctos Saludos! Commented el 24 jul. 2016 a las 18:36
  • Olvidé revisar la ultima fila, de igual forma la modificación es sencilla ya que es la misma lógica utilizada para el resto de las filas, revisa de nuevo el enlace, acabo de actualizar el jsfiddle.
    – moscoquera
    Commented el 24 jul. 2016 a las 20:00
  • Muchas gracias tenía la idea y estaba haciendo todo al contrario por eso no me daba, pero muchas gracias Saludos! Commented el 24 jul. 2016 a las 20:09

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.