1

¿Existe alguna forma de acceder a las propiedades de un JSON, sin tener que poner el nombre de dichas propiedades?, algo así como acceder a la propiedad1 del JSON y así con todas.

Ejemplo de lo que me gustaría hacer:

Quería hacer un método que me pinte una tabla para mostrar los datos que recibo de varias peticiones que me devuelven un JSON, pero, para no tener que crear un método para todas estas propiedades, me gustaría poder crear uno y allí decirle que me recorra la propiedad1 , propiedad2 y así con todas las que pueda tener.

Hasta ahora, lo hago de esta forma:

//Ejemplo del json de una respuesta 
const productos = [{
    id: 1,
    nombre: "Mouse Logitech",
    precio: 20,
    codigo: "123",
  },
  {
    id: 2,
    nombre: "Xiaomi Mi A1",
    precio: 5000,
    codigo: "123444",
  },
  {
    id: 3,
    nombre: "Galletas",
    precio: 10,
    codigo: "20205",
  },
  {
    id: 4,
    nombre: "Computadora portátil",
    precio: 30000,
    codigo: "7700545",
  },
];

const $cuerpoTabla = document.querySelector("#cuerpoTabla");
pintarTablaProductos(productos);

function pintarTablaProductos(datosRespuesta) {

  datosRespuesta.forEach(elemento => {
    const $tr = document.createElement("tr");
    let $tdNombre = document.createElement("td");
    // en vez de poner el nombre de la propiedad poner algo asi como propiedad1, propiedad2 ... y asi con todas 
    $tdNombre.textContent = elemento.nombre;
    $tr.appendChild($tdNombre);
    let $tdPrecio = document.createElement("td");
    $tdPrecio.textContent = elemento.precio;
    $tr.appendChild($tdPrecio);
    let $tdCodigo = document.createElement("td");
    $tdCodigo.textContent = elemento.codigo;
    $tr.appendChild($tdCodigo);
    $cuerpoTabla.appendChild($tr);
  });
}

¿Alguien sabe cómo podría acceder a las propiedades sin tener que poner sus nombre?

2
  • Hola @Roberto, ¿te refieres a crear una tabla HTML a partir de un JSON? Es decir, donde las propiedades representen los campos de la tabla sin tener necesidad de saber el nombre de dichas propiedades (valga la redundancia). Commented el 4 ene. 2021 a las 10:36
  • @DavidE.LunaM. Sí, me refiero a eso, si existe alguna forma para no tener que pasarle el nombre de la propiedad del json.
    – Peponchez
    Commented el 4 ene. 2021 a las 10:40

1 respuesta 1

1

Importante: lea los comentarios que se encuentran ubicados en el código que forma la tabla. Agregué algo de estilos para apreciar la tabla que se pretende crear.

Crearemos dos funciones con el objeto de simplificar el código y sea lo más fácil de entender.

Las funciones que crearemos son crear( elementoHTML ) y crearTabla( array ).

Una función para crear elementos HTML para evitar escribir en cada línea document.createElement:

const crear = ( elementoHTML ) => document.createElement( elementoHTML );

Y la que se encargará de crear la tabla a partir de JSON:

const crearTabla = ( array ) => {
    ...
}

Por lo tanto, lo que sigue es una Demo con comentarios incluidos, que son los que se encargarán de documentar las líneas [de código] claves que formarán la tabla:

const productos = [{
    id: 1,
    nombre: "Mouse Logitech",
    precio: 20,
    codigo: "123"
  },
  {
    id: 2,
    nombre: "Xiaomi Mi A1",
    precio: 5000,
    codigo: "123444"
  },
  {
    id: 3,
    nombre: "Galletas",
    precio: 10,
    codigo: "20205"
  },
  {
    id: 4,
    nombre: "Computadora portátil",
    precio: 30000,
    codigo: "7700545"
  }
];

const crear = (elementoHTML) => document.createElement(elementoHTML);

const crearTabla = (array) => {
  if (!(Array.isArray(array) || array.length)) return;

  // Elementos de una tabla
  const tabla = crear("table"),
    thead = crear("thead"),
    tbody = crear("tbody"),
    tr = crear("tr"),
    th = crear("th"),
    td = crear("td");

  // Preparando cuerpo y cabecera de la tabla:
  tabla.append(thead, tbody);

  array.forEach((objeto, indice) => {
    // Formar campos de la tabla a partir de
    // de las propiedades del objeto:
    if (indice === 0) {
      // Clonamos la primera fila:
      let fila = tr.cloneNode(),
        filaRegistro = tr.cloneNode();

      for (let propiedad in objeto) {
        let campo = th.cloneNode();
        let campoDatos = td.cloneNode();

        // Las propiedades del objeto pasan a ser campos de 
        // la tabla:
        campo.textContent = propiedad;
        fila.append(campo);

        // Se obtienen los valores del primero objeto
        // del array:
        campoDatos.textContent = objeto[propiedad];
        filaRegistro.append(campoDatos);
      }

      thead.append(fila);
      tbody.append(filaRegistro);
    }


    if (indice > 0) {
      // Agregamos los datos en la tabla:
      let fila = tr.cloneNode();

      for (let propiedad in objeto) {
        let campoDatos = td.cloneNode();
        campoDatos.textContent = objeto[propiedad];
        fila.append(campoDatos);
      }

      tbody.append(fila);
    }

  });

  return tabla;
};

const tabla = crearTabla(productos);
document.body.append(tabla);
table {
  width: 100%;
  border-collapse: collapse;
}

td,
th {
  padding: 10px;
  border: 1px solid;
}

Es posible realice ciertas actualizaciones con el objeto de mejorar la explicación del código.

1
  • 1
    Muchísimas gracias por responder y por el tiempo que le has dedicado, no solo me has indicado como obtener sus propiedades sino también has creado la tabla entera, Muchas gracias. Ahora me toca entender mejor esta parte del código. for (let propiedad in objeto)
    – Peponchez
    Commented el 4 ene. 2021 a las 11:48

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.