-2

Tengo este objeto en json:

{
  "transporte": "Vehiculo",
  "color": "Negro",
  "placas": 123,
  "Movimientos": [
    {
        "ruta": "Mexico",
        "estadia": "2 dias"
    },
    {
        "ruta":"Campeche",
        "estadia":"3 dias"
    }
  ],
  "estado": 1
}

Como puedo mostrar el objeto en forma de tabla de la siguiente manera:

introducir la descripción de la imagen aquí

Hay alguna manera de mostrar la tabla de esta manera ya sea usando bootstrap o vuetify ?

1 respuesta 1

0

He hecho una aproximación a lo que pides, usando vanilla javascript y algo de bootstrap (pero solo para hacerlo más bonito). En el propio codigo he puesto lo que hace. Lo que no entiendas pregunta.

// Datos de partida
var arr = [{
  "transporte": "Vehiculo",
  "color": "Negro",
  "placas": 123,
  "Movimientos": [{
      "ruta": "Mexico",
      "estadia": "2 dias"
    },
    {
      "ruta": "Campeche",
      "estadia": "3 dias"
    }
  ],
  "estado": 1
}];

// inicializamos la salida
html = '';

// recorremos los datos
for (var i = 0; i < arr.length; i++) {

  // asignamos a variable 
  var obj = arr[i];

  // recorremos los movimientos de cada vehiculo
  for (var j = 0; j < obj['Movimientos'].length; j++) {
    var movimientos = obj['Movimientos'][j];

    // agregamos fila a la salida
    var html = html + '<tr><td>' + obj['transporte'] + '</td><td>' + obj['color'] + '</td><td>' + obj['placas'] + '</td><td>' + movimientos['ruta'] + '</td><td>' + movimientos['estadia'] + '</td></tr>';
  }
}

// asignamos a variable el id del DOM donde insertar el resultado
var elem = document.querySelector('#eltbody');

// modificamos el DOM con la salida generada
elem.innerHTML = html;
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="container">
  <table class="table table-bordered" id="salida">
    <thead class="table-light">
      <th>Transporte</th>
      <th>Color</th>
      <th>Placas</th>
      <th>Rutas</th>
      <th>Estadia</th>
    </thead>
    <tbody id="eltbody"></tbody>
  </table>
</div>

3
  • Estás haciendo muy buenos aportes a la comunidad, aún así, fijate que el OP (autor de la pregunta) hizo una pregunta amplia y no mostró lo que intentó hasta el momento (básicamente está haciendo lo que en inglés se conoce como gimme the codez o su equivalente denme el código, asumiendo así que Stack Overflow en español es un servicio de código). Recordá que es mejor responder a preguntas bien formadas.
    – padaleiana
    el 24 dic. 2021 a las 13:00
  • @padaleiana: Gracias por la aclaración y entiendo perfectamente lo que dices. Cuando les doy el código de esta forma es porque a su vez he aprendido ha hacerlo yo mismo (mi nivel de javascript antes de empezar a responder aquí era cero patatero), y asi la comunidad tambien puede corregirme a mi tambien y aprender de ello. Soy un egoista, porque ademas solo lo hago en casos faciles donde entiendo lo que piden a pesar que no se hayan preocupado demasiado en codificarlo minimamente :-) Y tambien para que no huyan cuando les decimos lo del Cómo preguntar y todos esos enlaces que a segun quien les abruma.
    – masterguru
    el 24 dic. 2021 a las 13:10
  • @padeleiana: Tambien piensa que soy relativamente nuevo aqui posteando respuestas, aunque ya hace alguna semana más que me inicié en el SO en ingles y alli veo que enseguida cierran preguntas de este estilo, pero aquí noto una cierta dejadez en ello, y veo las preguntas abiertas "in eternum" y si me interesa pues decido contestar como he explicado antes. Si las terminan cerrando pues nada, yo ya me he divertido y de paso he ayudado a alguien que quizas no sepa preguntar pero necesita un cable potente o terminar una tarea de cole pronto.
    – masterguru
    el 24 dic. 2021 a las 13:15

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.