1

como les van? estoy intentando crear un submenu a partir de un JSON y quisiera saber si la forma que escribi estaba encaminado a ser correcto. Desde ya, muchas gracias ! 

<li id="arrayjson"> </li>


    var json = {
    submenu:[
        {titulo: 'Ropa', url: '/ropa.html'},
        {titulo: 'Electronica', url: '/electronica.html'},
        {titulo: 'Higiene', url: '/higiene.html'},
        {titulo: 'Alimentos', url: '/alimentos.html'},
        {titulo: 'Otros', url: '/otros.html'}
    ]
};

var claseul = document.getElementById('arrayjson');

document.write("<ul>");

json.submenu.forEach((titulo, url)=>{
    document.write(`<li><a href${url}>${titulo}</a></li>`);
}); 


document.write("</ul>");

Gracias !

Pablo Lozano
  • 45,934
  • 7
  • 48
  • 87
axesthetic
  • 13
  • 2

2 Answers2

1

Varios detalles:

  • No te recomiendo usar document.write(). El por qué es sencillo: doument write borrará todo el documento (tu HTML) para iniciar uno nuevo desde cero. Puesto que lo normal es querer editar el documento actual, te aconsejo aprender a usar el DOM.
  • JSON != Objeto Javascript. Puede parecer una tontería, pero cuando antes aprendas esto, mejor.

Te pongo un ejemplo basado en tu código:

let menu = {
  submenu:[
        {titulo: 'Ropa', url: '/ropa.html'},
        {titulo: 'Electronica', url: '/electronica.html'},
        {titulo: 'Higiene', url: '/higiene.html'},
        {titulo: 'Alimentos', url: '/alimentos.html'},
        {titulo: 'Otros', url: '/otros.html'}
  ]
};

const list = document.querySelector('#menu');

menu.submenu.forEach(element => {
  const li = document.createElement('li'); //creamos un elemento de la lista
  const link = document.createElement('a');// creamos un enlace
  link.href = element.url;
  link.innerHTML = element.titulo;

  li.appendChild(link); //metemos el enlace en el elemento
  list.appendChild(li); //metemos el elemento en la lista
});
<ul id="menu"></ul>
Pablo Lozano
  • 45,934
  • 7
  • 48
  • 87
0

Tu idea esta buena, pero no es funcional del todo porque como sabes los JSON tienen una estructura de Llave y valor, por lo que el forEach que estas utilizando aun no llegas a los indices de cada uno. Te dejo un ejemplo de como podria funcionarte.

var json = {
    submenu:[
        {titulo: 'Ropa', url: '/ropa.html'},
        {titulo: 'Electronica', url: '/electronica.html'},
        {titulo: 'Higiene', url: '/higiene.html'},
        {titulo: 'Alimentos', url: '/alimentos.html'},
        {titulo: 'Otros', url: '/otros.html'}
    ]
};

var claseul = document.getElementById('arrayjson');
var i;
document.write("<ul>");
for (i in json.submenu) {
  document.write(`<li><a href="${json.submenu[i].url}">${json.submenu[i].titulo}</a></li>`);
}


document.write("</ul>");
<div id="arrayjson"></div>
Bardales
  • 471
  • 1
  • 4
  • 15