2

Buenas tardes, alguien me podría ayudar a mapear este json en un javascript?

[{
    "header": {
        "nav" : {"option1":"menu 1"}
    }
}]

para que esto quede de esta manera

<header>
    <nav>
        <li></li>
    </nav>
</header>
3
  • Que haz intentado para recorrer el Json y mostrarlo como sugieres, sin un esfuerzo de tu parte no recibirás mucha ayuda y puede terminar cerrada. Saludos
    – JuankGlezz
    el 12 ene. 2017 a las 18:19
  • ¿Cómo se llega de "nav" : {"option1":"menu 1"} a <nav><li></li></nav>? No tiene mucho sentido. Aparte de eso, debes tener en cuenta algo importante: el orden de los atributos en la definición de un objeto no tiene por qué ser igual al orden en el que el navegador procesa el objeto.
    – Alvaro Montoro
    el 12 ene. 2017 a las 18:39
  • De acuedo con ** Alvaro Montoro**
    – lazarokcf
    el 12 ene. 2017 a las 19:59

1 respuesta 1

1

La verdad es que, como comentan los compañeros, no queda muy claro lo que preguntas o como llegas del json al html pero, haciendo un ejercicio de imaginación y suponiendo que no estás usando ningún framework, a ver si esto es lo que necesitas:

  • Teniendo los elementos en un array podrías recorrerlos y montar el html a mano en una variable.
  • Una vez que lo tienes todo. Usas getElementById para poner el valor en el elemento que quieras (entiendo que en etiqueta nav). Te dejo un enlace para que veas como sea hace: w3schools

Te dejo un pequeño ejemplo a ver si esto es lo que quieres:

var menus = [
  {"option":"menu 1"},
  {"option":"menu 2"},
  {"option":"menu 3"},
  {"option":"menu 4"}
];
var html="";
for (var i = 0; i < menus.length; i++) {
  html=html+"<li>" + menus[i].option + "</li>";
}
document.getElementById("menu").innerHTML=html;
<html>
  <head>
  </head>
  <body>
    <header>
      <nav>
        <ul id="menu"></ul>
      </nav>
    </header>
  </body>
</html>

1
  • ** David Restrepo ** ¿Te ha resultado útil la respuesta? ¿Esto es lo que necesitabas? el 16 ene. 2017 a las 11:57

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.