Tengo el siguiente objeto con una matriz de objetos dentro que también contiene matrices.
Quiero crear una tabla HTML donde muestre los autos por marca. Quiero poner la misma marca una debajo de la otra si hay varios modelos donde solo se muestra el primero, el resto de los modelos deben mostrarse con una fila plegable.
En la siguiente tabla, el segundo modelo de Audi debe estar oculto y solo debe mostrarse con un clic en la fila.
<table> <tbody> <tr> <td>Brand</td> <td>Model</td> <td>Price</td> </tr> <tr> <td>BMW</td> <td>X</td> <td>200</td> </tr> <tr> <td>Audi</td> <td>Z</td> <td>150</td> </tr> <tr> <td>Audi</td> <td>T</td> <td>100</td> </tr> </tbody> </table>Estos son los datos con los que trabajo:
objeto de resultado var:
{ "BMW": [ { "id": 0, "title": "BMW", "model": "X", "price": "200" } ], "Audi": [ { "id": 0, "title": "Audi", "model": "Z", "price": "150" }, { "id": 0, "title": "Audi", "model": "T", "price": "100" } ] }¿Cómo puedo hacer esto?
Puede usar Object.keys para obtener los identificadores del objeto de nivel superior, luego solo .forEach para iterar
Aquí hay una demostración de trabajo, con sus datos:
const data = {"BMW":[{"id":0,"title":"BMW","model":"X","price":"200"}],"Audi":[{"id":0,"title":"Audi","model":"Z","price":"150"},{"id":0,"title":"Audi","model":"T","price":"100"}]}; Object.keys(data).forEach((carMake) => { data[carMake].forEach((model) => { console.log(model); }); });