1

pues tengo este programa en el que creo un JSON, lo parseo y una vez hecho eso mediante un bucle creo la lista en la que debe ir para que se muestre por pantalla. El problema es que no se si lo he creado bien y además a la hora de crearlo me da un fallo en el appendchild ya que debe esta guardado en un div que tiene un ul y dentro del ul una lista. Dicho todo esto aquí paso el código.

html:

<div>
    <div id="json"></div>
    <div>

javascript:

  /*
        Generar un JSON con la siguiente estructura:

        {
            {vehicle: coche, type: tierra},
            {vehicle: tanque, type: tierra},
            {vehicle: barco, type: mar},
            {vehicle: avioneta, type: aire},
            {vehicle: globo, type: aire},
            {vehicle: moto, type: tierra}

        }

        Mostrar el JSON generado en la capa
    */
   var json = {
       vehiculos:[
        {vehicle:" coche", type: "tierra"},
        {vehicle: "tanque", type: "tierra"},
        {vehicle: "barco", type: "mar"},
        {vehicle: "avioneta", type: "aire"},
        {vehicle: "globo", type: "aire"},
        {vehicle: "moto", type: "tierra"}
       ]
   }

   var data = JSON.stringify(json);
   console.log(data);

   var div1 = document.getElementById('json');

   for (let i = 0; i < data.vehiculos.length; i++) {
    var ul = document.createElement('ul');
    var li = document.createElement('li');
    var txt = document.createTextNode(data[i].vehicle+':'+data[i].type);
    console.log(data[i].vehicle)
    ul.appendChild(li);
    li.appendChild(txt);
    div1.appendChild(ul);
   }
2
  • Lo que llamas json es realmente un Objeto JavaScript. Al usar el método stringify lo conviertes en una cadena en formato JSON. Como podrás suponer, intentar acceder a la propiedad vehiculos de una cadena es incorrecto. El paso de usar stringify está demás. La confusión viene seguramente de pensar que JSON es lo mismo que Objeto, cuando no es así. JSON es un formato de texto, que al ser analizado (parse) por Javascript, es convertido en un objeto de JavaScript. Prueba tu código sin usar stringify. Saludos Commented el 23 feb. 2022 a las 18:40
  • @MauricioContreras, Si tienes razon muchas gracias
    – Jos
    Commented el 23 feb. 2022 a las 21:23

1 respuesta 1

0

Tienes varios problemas.

Primero, la línea

var data = JSON.stringify(json);

Lo que hace es convertir un objeto a un string, por lo tanto data sería un string y eso no es lo que necesitas, necesitas iterar sobre el objeto (Variable llamada json) directamente

Segundo, esta línea entonces debes actualizarla para que haga uso del json y no de data (que es un string)

 for (let i = 0; i < data.vehiculos.length; i++) {

Tercero, en esta línea:

var txt = document.createTextNode(data[i].vehicle+':'+data[i].type); 

data es un string, y además si quisieras acceder a los datos, deberías primero acceder al array de vehiculos, así:

var txt = document.createTextNode(json.vehiculos[i].vehicle+':'+json.vehiculos[i].type);

Extra: estas creando un nuevo <ul> en cada iteración, lo que deberías es crear un único <ul> y en la iteración crear los <li> .

Aqui te dejo el código todo junto. Saludos

/*
        Generar un JSON con la siguiente estructura:

        {
            {vehicle: coche, type: tierra},
            {vehicle: tanque, type: tierra},
            {vehicle: barco, type: mar},
            {vehicle: avioneta, type: aire},
            {vehicle: globo, type: aire},
            {vehicle: moto, type: tierra}

        }

        Mostrar el JSON generado en la capa
    */
var json = {
  vehiculos: [{
      vehicle: " coche",
      type: "tierra"
    },
    {
      vehicle: "tanque",
      type: "tierra"
    },
    {
      vehicle: "barco",
      type: "mar"
    },
    {
      vehicle: "avioneta",
      type: "aire"
    },
    {
      vehicle: "globo",
      type: "aire"
    },
    {
      vehicle: "moto",
      type: "tierra"
    }
  ]
}

var data = JSON.stringify(json);
console.log(data);

var div1 = document.getElementById('json');

var ul = document.createElement('ul');
for (let i = 0; i < json.vehiculos.length; i++) {
    var li = document.createElement('li');
    var txt = document.createTextNode(json.vehiculos[i].vehicle + ':' + json.vehiculos[i].type);
    console.log(json.vehiculos[i].vehicle)
    ul.appendChild(li);
    li.appendChild(txt);
}

div1.appendChild(ul);
<div id="json"></div>

2
  • Una confusión muy típica es llamar "objeto json" a un objeto en Javascript. JSON es un formato de texto, por lo tanto es un string y eso no tiene nada que ver con un Objeto de JavaScript. Mi sugerencia es que edites tu respuesta y cambies "objeto json" por "objeto" a secas. Saludos Commented el 24 feb. 2022 a las 9:41
  • Si, es que realmente solo me refería al nombre del objeto... que es json (asi llamó la variable el OP en su código), Aun así voy a agregar una aclaración para que no queden dudas, muchas gracias
    – Pipe
    Commented el 24 feb. 2022 a las 15: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.