Pregunta:
Fecha: 16-01-2018 09:16:56
(En Español)
mostrar arrays con javascript que llevan subarrays[Resuelta]
hola a todos, estoy tratando de leer el valor de una lista de JSON, pero no logro sacar los valores en un bucle determinado, mi ejemplo(problema) actual es:<script type="text/javascript"> var data='{"1":{"per_nr":"1","nombre":"Jose","ventas":[{"tag":"1","producto":"naranja","cantidad":"5","precio":"3","saldo":15,"saldo_cum":15},{"tag":"1","producto":"naranja","cantidad":"5","precio":"5","saldo":25,"saldo_cum":40},{"tag":"1","producto":"naranja","cantidad":"10","precio":"3","saldo":30,"saldo_cum":70},{"tag":"1","producto":"naranja","cantidad":"15","precio":"2","saldo":30,"saldo_cum":100},{"tag":"1","producto":"naranja","cantidad":"12","precio":"2","saldo":24,"saldo_cum":124}]},"2":{"per_nr":"2","nombre":"Maria","ventas":[{"tag":"1","producto":"naranja","cantidad":"11","precio":"2","saldo":22,"saldo_cum":22}]},"3":{"per_nr":"3","nombre":"Teresa","ventas":[{"tag":"1","producto":"naranja","cantidad":"8","precio":"4","saldo":32,"saldo_cum":32}]}}'; data = JSON.parse(data); /* esto funciona */ console.log(data[1].per_nr); console.log(data[1].nombre); console.log(data[1].ventas[1].tag); console.log(data[1].ventas[1].producto); console.log(data[2].per_nr); /* esto no funciona : que hago mal en este recorrido ?*/ for (var i = 0; i < data.length; i++) { console.log(data.length); console.log(data[i].nombre + ' is a ' + data[i].per_nr + '.'); }Les estaría muy agradecida por la ayuda para el presente problema... Votos: 1 - Respuestas: 7 - Vistas: 10 Compartir en: Google Facebook Twitter LinkedIn Link
Respuestas:
-
Fecha: 16-01-2018 09:31:44 tu problema radica que debes hacer un bucle dentro del bucle... (anidados)
Esto el primer bucle es = a recorrer los primeros arreglos, y el segundo = recorrer las ventas...
Saludos...
Stryfe™ Votos: 0 - Link respuesta -
Fecha: 16-01-2018 09:37:08 Hola Maria,
En este caso el string 'data' es un objeto con propiedades llamadas '1', '2' y '3'. Cada una de esas propiedades a su vez es un objeto con más propiedades.
Es por esa razón que la primera parte sí funciona. Tomemos una línea de ejemplo:
console.log(data[1].per_nr);
Esto manda a la consola el valor de la propiedad 'per_nr' del objeto almacenado en la propiedad '1' del objeto 'data'. No hay ningún arreglo ahí.
En tu JSON se puede ver claramente porque las llaves ('{' y '}') denotan un objeto mientras que los corchetes ('[' y ']') denotan un arreglo.
Si quieres iterar sobre los elementos de un arreglo utiliza:
for (propiedad in objeto)
y entonces te quedaría algo así:
var data='{"1":{"per_nr":"1","nombre":"Jose","ventas":[{"tag":"1","producto":"naranja","cantidad":"5","precio":"3","saldo":15,"saldo_cum":15},{"tag":"1","producto":"naranja","cantidad":"5","precio":"5","saldo":25,"saldo_cum":40},{"tag":"1","producto":"naranja","cantidad":"10","precio":"3","saldo":30,"saldo_cum":70},{"tag":"1","producto":"naranja","cantidad":"15","precio":"2","saldo":30,"saldo_cum":100},{"tag":"1","producto":"naranja","cantidad":"12","precio":"2","saldo":24,"saldo_cum":124}]},"2":{"per_nr":"2","nombre":"Maria","ventas":[{"tag":"1","producto":"naranja","cantidad":"11","precio":"2","saldo":22,"saldo_cum":22}]},"3":{"per_nr":"3","nombre":"Teresa","ventas":[{"tag":"1","producto":"naranja","cantidad":"8","precio":"4","saldo":32,"saldo_cum":32}]}}'; data = JSON.parse(data); /* esto funciona */ console.log(data[1].per_nr); console.log(data[1].nombre); console.log(data[1].ventas[1].tag); console.log(data[1].ventas[1].producto); console.log(data[2].per_nr); console.log(data.length); /* esto también */ for (let property in data) { console.log(data[property].nombre + ' is a ' + data[property].per_nr + '.'); }
Votos: 2 - Link respuesta -
Fecha: 16-01-2018 17:27:12 Todavía no logro resolver de esa manera...gracias por la ayuda , enmtretanto estoy tratando de hacerlo dentro de una tabla... Votos: 0 - Link respuesta
-
Fecha: 17-01-2018 13:22:17 Prueba así:
<ul id="vendedores"> </ul>
var data='{"1":{"per_nr":"1","nombre":"Jose","ventas":[{"tag":"1","producto":"naranja","cantidad":"5","precio":"3","saldo":15,"saldo_cum":15},{"tag":"1","producto":"naranja","cantidad":"5","precio":"5","saldo":25,"saldo_cum":40},{"tag":"1","producto":"naranja","cantidad":"10","precio":"3","saldo":30,"saldo_cum":70},{"tag":"1","producto":"naranja","cantidad":"15","precio":"2","saldo":30,"saldo_cum":100},{"tag":"1","producto":"naranja","cantidad":"12","precio":"2","saldo":24,"saldo_cum":124}]},"2":{"per_nr":"2","nombre":"Maria","ventas":[{"tag":"1","producto":"naranja","cantidad":"11","precio":"2","saldo":22,"saldo_cum":22}]},"3":{"per_nr":"3","nombre":"Teresa","ventas":[{"tag":"1","producto":"naranja","cantidad":"8","precio":"4","saldo":32,"saldo_cum":32}]}}'; var D = JSON.parse(data); console.log(D); for (let property in D) { //console.log(D[property].nombre + ' is a ' + D[property].per_nr + '.'); var valor = '<li>Nombre: '+D[property].nombre; valor += '<ul><li>Ventas: '+D[property].ventas.length+'</li>' if(D[property].ventas.length >=1){ valor += '<li>Lista:' if(D[property].ventas.length>=1){ valor += '<ul>'; for(var j=0; j<D[property].ventas.length;j++){ valor += '<li>'+D[property].ventas[j].producto+'</li>' } valor += '</ul></li></ul>' }else{ valor += '</li></ul>' } }else{ valor += '</ul></li>' } $("#vendedores").append(valor); }
MUESTRA Votos: 1 - Link respuesta -
Fecha: 17-01-2018 22:01:48 Hola Carlos Quintero, muchas gracias, la respuesta es realmente completa y útil. Me estuve mirando la forma de tratar esos listados anidados y por eso ahora entiendo más del cómo realizarlo y en que medida me has aliviado el proceso de aprendizaje. Muchísimas gracias. Votos: 2 - Link respuesta
-
Fecha: 19-01-2018 19:10:37 Aquí está tu tabla María.
Cuando el array usa índice del cliente debes iterar con for ... in, es decir con la forma for ( var indice in objeto ){}, aunque no es la única manera de obtener los datos.
let d= '{"1":{"per_nr":"1","nombre":"Jose","ventas":[{"tag":"1","producto":"naranja","cantidad":"5","precio":"3","saldo":15,"saldo_cum":15},{"tag":"1","producto":"naranja","cantidad":"5","precio":"5","saldo":25,"saldo_cum":40},{"tag":"1","producto":"naranja","cantidad":"10","precio":"3","saldo":30,"saldo_cum":70},{"tag":"1","producto":"naranja","cantidad":"15","precio":"2","saldo":30,"saldo_cum":100},{"tag":"1","producto":"naranja","cantidad":"12","precio":"2","saldo":24,"saldo_cum":124}]},"2":{"per_nr":"2","nombre":"Maria","ventas":[{"tag":"1","producto":"naranja","cantidad":"11","precio":"2","saldo":22,"saldo_cum":22}]},"3":{"per_nr":"3","nombre":"Teresa","ventas":[{"tag":"1","producto":"naranja","cantidad":"8","precio":"4","saldo":32,"saldo_cum":32}]}}', j= JSON.parse(d), item= 0; // no sé el índice de cliente: // uso for ... in for( var x in j){ let id = j[x].per_nr, nom = j[x].nombre, vta = j[x].ventas; //<-este es array //... código parte 1 si deseas for(y=0; y<vta.length; y++){ let tag = vta[y].tag, pro = vta[y].producto, can = vta[y].cantidad, pre = vta[y].precio, sal = vta[y].saldo; // aquí hacemos que coloque total sólo en último if( y < (vta.length-1) ) { acu = ' --'; }else{ acu = vta[y].saldo_cum; } item++; //... código parte 2 console.log(" | "+item+" | "+id+" | "+nom+" | "+tag+" | "+pro+" | "+can+" | "+pre+" | "+sal+" | "+acu+" | "); } }
Vista del Json para determinar qué usar
Si logras entender la navegación por este json, ya sabrás más que muchos y te aseguro que tienes una herramienta que te sirve para muuuchos casos reales.
Te dejo este otro json para que lo navegues, es muy común encontrarlo. Es un menú. Míralo con el visor.
[{ "id": "file", "value": "File", "menuitem": [ { "value": "New", "onclick": "CreateNewDoc()" },{ "value": "Open", "onclick": "OpenDoc()" },{ "value": "Close", "onclick": "CloseDoc()" } ] }, { "id": "edit", "value": "Edit", "menuitem": [ { "value": "Copy", "onclick": "CopyDesdePapelera()" },{ "value": "Paste", "onclick": "Paste()" },{ "value": "Algo", "onclick": "Algo()" } ] } ]
Saludos María un abrazo a la distancia. Votos: 1 - Link respuesta -
Fecha: 20-01-2018 00:13:45 Hola Néstor, muchas gracias, el trabajo de explicación es único y de resultado perfecto, es lo que quería entender. Me imagino eres un pedagogo en el campo de la informática. Por ahora, una vez más recibí una ayuda impagable y de aplicación inmediata. Que tengas un fin de semana maravilloso.
Un abrazo agradecido desde Alemania Votos: 0 - Link respuesta
Para participar activamente de la comunidad primero debes autenticarte, ingresa al sistema.Iniciar Sesión