Actualmente recibo una respuesta que devuelve una matriz como esta
const response = [{ time: 1, speed: 2, direction:3, image:'url' },{ time: 1, speed: 2, direction:3, image:'url' },{ time: 1, speed: 2, direction:3, image:'url' },{ time: 1, speed: 2, direction:3, image:'url' }]¿Cómo hago una tabla en la que la primera columna contiene solo los nombres de las propiedades? luego, las columnas posteriores contienen los datos de la respuesta, respectivamente, utilizando la URL de la imagen como encabezado. Nunca antes había usado tablas en JS. También debe ser dinámico para que se pueda generar cualquier número de resultados de la respuesta con cualquier número de claves del objeto, ya que todos los objetos de la matriz tendrán las mismas claves.
Idealmente, quiero que la tabla se vea así. Sé que es simple, pero es realmente frustrante, por lo que agradecería cualquier ayuda.
image image image time 1 1 1 speed 2 2 2 direction 3 3 3No estoy seguro si esto es lo que quieres. Puede iterar sobre las claves y valores del objeto.
<table> <thead> <tr> <td /> {response.map((el) => ( <td>{el.image}</td> ))} </tr> </thead> <tbody> {Object.keys(response[0]) .filter((k) => k !== "image") .map((k) => ( <tr> <td>{k}</td> {response.map((r) => ( <td>{r[k]}</td> ))} </tr> ))} </tbody> </table>