3

tengo el siguiente csv recogido con un fetch en un API rest:

animales;numeros;nombres;
leon;21,5;Paula;
perro;32,4;Guillermo;
zebra;44;Elena;
gorila;100,4;Pepe;

Este csv lo guardo en una variable en un sessionStorage llamado datos.

Deseo convertirlo en tabla html con javascript:

animales numeros nombres
leon 21,5 Paula
perro 32,4 Guillermo
zebra 44 Elena
gorila 100,4 Pepe

Pero con la pega de que no deseo todos los campos, es decir me gustaría que solo fuera:

animales numeros
leon 21,5
perro 32,4
zebra 44
gorila 100,4

o solo:

animales nombres
leon Paula
perro Guillermo
zebra Elena
gorila Pepe

Es decir necesito seleccionar los campos que deseo utilizar.

He probado a tranformarlo en json:

function convCsvAJson(datos){

      var lines=datos.split("\n");
    
      var result = [];
    
      var headers=lines[0].split(",");
    
      for(var i=1;i<lines.length;i++){
    
        var obj = {};
        var currentline=lines[i].split(",");
    
        for(var j=0;j<headers.length;j++){
          obj[headers[j]] = currentline[j];
        }
        result.push(obj);
    
      }
      
      //return result; //JavaScript object
      return JSON.stringify(result); //JSON
    }

    console.log(convCsvAJson(datos));

dando como resultado:

{"animales;numeros;nombres;":"leon;21,5;Paula;"}
{"animales;numeros;nombres;":"perro;32,4;Guillermo;"}
{"animales;numeros;nombres;":"zebra;44;Elena;"}
{"animales;numeros;nombres;":"gorila;100,4;Pepe;"}

Pero nose si es exactamente lo que necesito ya que debo realizar una columna de cada resultado con un header para cada dato y no necesito todos los datos que se guardan en el csv ya que debo seleccionar solo los que necesito.

También he probado a separar cada columna en un array o json distinto: he preguntado anteriormente pensando que esta podría ser la solucion

Dando como resultado a la pregunta:

/* Datos obtenidos del servicio web */
let datos_crudos = `animales;numeros;nombres;
leon;21,5;Paula;
perro;32,4;Guillermo;
zebra;44;Elena;
gorila;100,4;Pepe;`;

/* Elementos separados por líneas */
let datos_separados = datos_crudos.split('\n');

/* Obtengo el primero para conocer los nombres de las columnas */
let cabeceras = datos_separados.shift().split(';');

/* Predefinimos la salida y sus propiedades */
let datos = {};
cabeceras.forEach(cabecera => {
  datos[cabecera] = [];
});

/* Iteramos por el resto de datos */
while (elementos = datos_separados.shift()) {
  /* Iterams cada elemento del registro */
  elementos.split(';').forEach((elemento, indice) => {
    /* Lo agregamos a la cabecera dada por su índice */
    datos[cabeceras[indice]].push(elemento);
  });
}

/* Mostramos el resultado */
console.log(datos);

Pero tampoco he conseguido realizar lo que busco, alguien sabría como puedo resolverlo?? He estado buscando en internet pero no consigo encontrar el resultado adecuado, ya que la gran mayoría de resultados se basan en un csv subido por un usuario o tratan diferentes resultados que poco tienen que ver con lo que necesito. Así que después de muchas horas de darle al coco y de no saber que hacer ya me gustaría pediros ayuda a ver si alguien sabría decirme, Gracias.

3 respuestas 3

4

Podemos separar el string de respuesta por líneas, usando split, lo cual nos daría (más concretamente split("\n"))

[
    "animales;numeros;nombres;",
    "leon;21,5;Paula;"
    "perro;32,4;Guillermo;"
    "zebra;44;Elena;"
    "gorila;100,4;Pepe;"
]

Entonces, volveríamos a hacer un split, para separar los elementos por cada punto y coma

result = result.split(";")

Haremos split a la primera línea para obtener los datos

Nos quedaría

[
    "animales",
    "numeros",
    "nombres"
]

Basado en ese, simplemente podemos convertirlo a un Array de objetos, basándonos el en split de la primera línea

var data = `animales;numeros;nombres;
leon;21,5;Paula;
perro;32,4;Guillermo;
zebra;44;Elena;
gorila;100,4;Pepe;`.split("\n");

const names = data[0].split(";");
let result = [];

data.forEach((el,i) => {
  if (i === 0) return;
  const d = el.split(";").join(" ").split(" ");
  const obj = {};
  d.forEach((el,i) => {
    if (el === "") return
    obj[names[i]] = el;
  })
  result.push(obj);
});

console.log(result);

Entonces podríamos dibujar la tabla usando result.forEach

var data = `animales;numeros;nombres;
leon;21,5;Paula;
perro;32,4;Guillermo;
zebra;44;Elena;
gorila;100,4;Pepe;`.split("\n");

const names = data[0].split(";");
let result = [];
const table = document.createElement("TABLE");
const tr = document.createElement("TR");

names.forEach(el => {
  if (el === "") return;
  const th = document.createElement("TH");
  th.innerHTML = el;
  tr.appendChild(th);
});

table.appendChild(tr);
data.forEach((el,i) => {
  if (i === 0) return;
  const d = el.split(";").join(" ").split(" ");
  let tr2 = document.createElement("TR");
  const obj = {};
  d.forEach((el,i) => {
    if (el === "") return
    obj[names[i]] = el;
    let td2 = document.createElement("TD");
    td2.innerHTML = el;
    tr2.appendChild(td2);
    table.appendChild(tr2);
  });
  result.push(obj);
});
document.body.appendChild(table);

const soloAnimales = () => {
  const r = [];
  result.forEach(el => {
    r.push(el.animales);
  });
  return r;
};

console.log("Animales", soloAnimales());
td, th {
  border: 1px solid #ddd;
  padding: 8px;
}

tr:nth-child(even){background-color: #f2f2f2;}

th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #4CAF50;
  color: white;
}

table {
  border-collapse:collapse;
}

3
  • mm si solo quisiera un header de tabla como sería ?¿ y una ultima pregunta si deseo obtener por ejemplo solo animales y nombres como sería? Es que esto es un ejemplo estoy trabajando con 1500 datos y nose muy bien. Estoy tratando de entender el código pero hay cosas que se me pasan por alto, disculpa Commented el 18 feb. 2021 a las 16:20
  • @WinterIsBack ¿Cuál parte no entiendes?
    – Rodrigo
    Commented el 18 feb. 2021 a las 16:55
  • muchas gracias por tu ayuda :), habian partes que al no estar explicadas lo que hacian no entendia Commented el 18 feb. 2021 a las 18:21
3

Creo que has probado todas las posibilidades menos las que a mí me parece más obvia: crear un array de objetos, donde cada objeto es una línea:

let datos_crudos = `animales;numeros;nombres;
leon;21,5;Paula;
perro;32,4;Guillermo;
zebra;44;Elena;
gorila;100,4;Pepe;`;

function csvToObjects(csv,separator) {
  const lines = csv.split('\n');
  //sacamos el primer elemento, los headers
  const headers = lines.shift().split(separator); 
  
  const data = lines.map(line => {
    // para cada línea obtenemos los campos o columnas
    // y rellenamos un objeto con los valores
    const columns = line.split(separator);
    const obj = {};
    columns.forEach((column,index) => {
      // después del último separador puede haber un vacío, 
      // en ese caso no lo guardamos
      if (column) {
        obj[headers[index]] = column;
      }
    });
    return obj;
  });
  return data;
}

console.log(csvToObjects(datos_crudos,";"));

1

Creo que te estás complicando en la forma de armar la estructura, no necesitas que sea muy descriptiva, solo saber qué hacer con los datos y tener en cuenta que la primera línea es la que se usará para crear títulos.

Revisa comentarios en el código para ver qué se hace en cada paso y no dudes en preguntar si algo no quedó claro.

let txt = `animales;numeros;nombres;
leon;21,5;Paula;
perro;32,4;Guillermo;
zebra;44;Elena;
gorila;100,4;Pepe;`;

// Poner aquí los índices de columnas a mostrar
// 0 = animales
// 1 = numeros
// 2 = nombres
let columnas = [0, 2]; // No mostrar números

// Separar por líneas: .split('\n')
// Recorrer .map()
// Eliminar ; del final de la línea item.substring(0, item.length - 1) evita un elemento vacío
// Separar por ; .split(';')
let data = txt.split('\n').map(item => item.substring(0, item.length - 1).split(';'));

// No necesitas una estructura muy elaborada:
console.log(data);

// Crear tabla, encabezado (thead) y cuerpo (tbody)
let table = document.createElement('table');
let thead = document.createElement('thead');
let tbody = document.createElement('tbody');

// Crear encabezados con datos de la primera fila
let tr = document.createElement('tr');
// Recorrer por elemento e índice
data[0].forEach((titulo, index) => {
    // Verificar que el índice está en el arreglo de columnas
    if(columnas.includes(index)) {
        // Crear celda de título, asignar contenido y agregar a fila
        let th = document.createElement('th');
        th.textContent = titulo;
        tr.appendChild(th);
    }
});
// Agregar fila a encabezado
thead.appendChild(tr);

// Recorrer resto de arreglo para agregar a cuerpo de tabla
for(let i = 1; i < data.length; i++) {
    let tr = document.createElement('tr');
    // Recorrer cada elemento para crear celda
    data[i].forEach((texto, index) => {
        if(columnas.includes(index)) {
            let td = document.createElement('td');
            td.textContent = texto;
            tr.appendChild(td);
        }
    });
    // Agregar fila a cuerpo
    tbody.appendChild(tr);
}


// Agregar encabezados y cuerpo a tabla
table.appendChild(thead);
table.appendChild(tbody);

// Agregar tabla al documento
document.body.appendChild(table);

También puedes filtrar las columnas usando títulos en lugar de índices:

let txt = `animales;numeros;nombres;
leon;21,5;Paula;
perro;32,4;Guillermo;
zebra;44;Elena;
gorila;100,4;Pepe;`;

// Poner aquí los índices de columnas a mostrar
let columnas = ['numeros', 'nombres']; // No mostrar animales

// Separar por líneas: .split('\n')
// Recorrer .map()
// Eliminar ; del final de la línea item.substring(0, item.length - 1) evita un elemento vacío
// Separar por ; .split(';')
let data = txt.split('\n').map(item => item.substring(0, item.length - 1).split(';'));

// No necesitas una estructura muy elaborada:
console.log(data);

// Crear tabla, encabezado (thead) y cuerpo (tbody)
let table = document.createElement('table');
let thead = document.createElement('thead');
let tbody = document.createElement('tbody');

// Crear encabezados con datos de la primera fila
let tr = document.createElement('tr');
// No se necesita recorrer por índice
data[0].forEach(titulo => {
    // Verificar que el título está en el arreglo de columnas
    if(columnas.includes(titulo)) {
        // Crear celda de título, asignar contenido y agregar a fila
        let th = document.createElement('th');
        th.textContent = titulo;
        tr.appendChild(th);
    }
});
// Agregar fila a encabezado
thead.appendChild(tr);

// Recorrer resto de arreglo para agregar a cuerpo de tabla
for(let i = 1; i < data.length; i++) {
    let tr = document.createElement('tr');
    // Recorrer cada elemento para crear celda, aquí sí se necesita el índice
    data[i].forEach((texto, index) => {
        // Con el índice se obtiene el título para ver si está en columnas y mostrar
        if(columnas.includes(data[0][index])) {
            let td = document.createElement('td');
            td.textContent = texto;
            tr.appendChild(td);
        }
    });
    // Agregar fila a cuerpo
    tbody.appendChild(tr);
}


// Agregar encabezados y cuerpo a tabla
table.appendChild(thead);
table.appendChild(tbody);

// Agregar tabla al documento
document.body.appendChild(table);

3
  • 1
    Deberías tener en cuenta los índices de las columnas a mostrar. Voy a editar la respuesta para poner un ejemplo.
    – Triby
    Commented el 18 feb. 2021 a las 16:40
  • @WinterIsBack, revisa la respuesta actualizada, realmente es muy sencillo lograrlo.
    – Triby
    Commented el 18 feb. 2021 a las 16:45
  • muchisimas gracias!!!!! creo que es porque también llevo muchos dias con el código y ya no veo nada en su sitio Commented el 18 feb. 2021 a las 16:59

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.