Soy nuevo en el desarrollo web y tengo dificultades para agregar JSON a div para que el valor se muestre en la página web. Revisé otras preguntas, pero la mayoría de las respuestas están asociadas con PHP, que no es mi caso. ¿Alguien puede ayudarme a descubrir qué me estoy perdiendo que no permite que el valor JSON no se muestre en una página web? Aquí hay una parte del contenido del archivo JSON:
{ "array": [ "firstArray": { "firstKey": "firstValue", "secondKey": "secondValue" }, "secondArray":{ "firstKey": "firstValue", "secondKey": "secondValue" } ] }Aquí hay parte de JavaScript que espero mostrar el valor que se encuentra en la primera matriz y la primera clave del JSON anterior
function print(data){ // lets assume data represents the whole JSON data var newDiv = $("<div />", {'id': 'new'}) newDiv.append($("<span />", data.array[0].firstArray.firstKey})) }Soy muy nuevo en el desarrollo web y estoy muy interesado en aprender, así que por favor ayúdenme tanto como sea posible.
Prueba lo siguiente:
var data = { "array": [ {"firstArray":{ "firstKey": "firstValue", "secondKey": "secondValue" }}, {"secondArray":{ "firstKey": "firstValue", "secondKey": "secondValue" }} ] }; function print(data){ $('body').append($("<div id='new'/>")); $('body').append($("<div id='new2'/>")); $('#new').append($("<span>"+data.array[0].firstArray.firstKey+" "+"</span>")); $('#new').append($("<span>"+data.array[0].firstArray.secondKey+"</span>")); $('#new2').append($("<span>"+data.array[1].secondArray.firstKey+" "+"</span>")); $('#new2').append($("<span>"+data.array[1].secondArray.secondKey+"</span>")); } print(data); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>Su cadena json no está validada.
corregido
{ "array": [{ "firstArray": { "firstKey": "firstValue", "secondKey": "secondValue" } }, { "secondArray": { "firstKey": "firstValue", "secondKey": "secondValue" } }]}
Ahora puedes acceder así,
data.array[0].firstArray.firstKeypuedes probar esto
(Extendí del comentario de Mamun)
// using JQuery <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> // using JQuery <script> //your array var data = { "array": [ { "firstKey": "firstValue", "secondKey": "secondValue" }, { "firstKey": "firstValue", "secondKey": "secondValue" } ] }; function print(data){ // loop for printing each element in array for (var i = 0; i < data.array.length; i++) { $('body').append($("<div id='new"+(i+1)+"'/>")); var id = "#new"+(i+1); $(id).append($("<span>"+data.array[i].firstKey+" "+"</span>")); $(id).append($("<span>"+data.array[i].secondKey+"</span>")); }; } print(data); </script>