0

¿Cómo puedo recorrer este tipo de array???

El problema es que tengo una function que me retorna un array = [] creado a partir de una respuesta json de jQuery. luego de conversion a un array[], no puedo acceder a los elementos.

introducir la descripción de la imagen aquí

1

2 respuestas 2

1

Aquí te dejo una rutina general que te permite recorrer un objeto independientemente de su estructura.

Ejemplo:

array=[ {
 item1:"value1",
 item2:{
  item1:"value1",
  item2:"value2",
  item3:{
   item1:"value1",
   item2:"value2",
   item3:"value3",
   item4:{
    item1:"value1",
    item2:"value2",
    item3:"value3",
    item4:"value4",
    item5:"value5"
   }
  }
 }
}]

// funcion para Recorer el Array, (parent = nombre del objeto padre)
function search(array,parent) {

// iterar en cada elemento del Array:
 for (child in array) {

  // Si el Elemento es un Objeto:
  if (typeof array[child] == "object") {

   // Entonces invoco la función search(..) para recorrer el Objeto
   // Paso como parámetros el Objeto y Nombre del Elemento (parent):
   search(array[child],parent+child+".");
  } else {

   // De no ser un Objeto imprime:
   // El nombre del Elemento al cual podemos acceder:
   console.log(parent+child+":");

   // y el Valor del Elemento:
   console.log(array[child]);
  };
 };
};
search(array[0],"");

Una vez conocido los elementos que componen el objeto quedara de tu parte que hacer con ellos.

En el siguiente ejemplo intentare recrear un json como el que planteas en tu imagen, luego recorreremos el objeto creando un <select> y un <table>

Ejemplo:

array = [
  {
    "0": {
      "id": "1",
      "nombre": "PRIMERO"
    },
    "1": {
      "id": "2",
      "nombre": "SEGUNDO"
    },
    "2": {
      "id": "3",
      "nombre": "TERCERO"
    },
    "3": {
      "id": "4",
      "nombre": "CUARTO"
    },
    "4": {
      "id": "5",
      "nombre": "QUINTO"
    },
    "5": {
      "id": "6",
      "nombre": "SEXTO"
    },
    "6": {
      "id": "7",
      "nombre": "SEPTIMO"
    },
    "7": {
      "id": "8",
      "nombre": "OCTAVO"
    },
    "8": {
      "id": "9",
      "nombre": "NOVENO"
    },
    "9": {
      "id": "10",
      "nombre": "DECIMO"
    },
    "10": {
      "id": "11",
      "nombre": "DECIMO PRIMERO"
    }
  }
];

// Obtiene el Objeto que esta dentro del Array (elemento 0)
obj = array[0];

// Crea el elemento html <select>
select = document.createElement("select");

// recorre obj
for(i in obj) {

 // Crea el elemento html <option>
 option = document.createElement("option");

 // Asigna el valor del elemento <option value="..">
 option.value = obj[i].id;

 // Asigna el texto del elemento <option>texto<option>
 option.text  = obj[i].nombre;

 // Añade el elemento <option> al <select>
 select.appendChild(option);
};

// Añade el elemento <select> al <body> de la pagina
document.body.appendChild(select);


// Crea el elemento html <table>
table = document.createElement("table");

// recorre obj
for(i in obj) {

 // Crea el elemento html <tr>
 tr = document.createElement("tr");

 // Asigna el valor id <td>id.. </td> a <tr>
 td = document.createElement("td");
 td.innerHTML=obj[i].id;
 tr.appendChild(td);

 // Asigna el valor nombre <td>nombre.. </td> a <tr>
 td = document.createElement("td");
 td.innerHTML=obj[i].nombre;
 tr.appendChild(td);

 // Añade el elemento <tr> a <table>
 table.appendChild(tr);
};

// Añade el elemento <table> al <body> de la pagina
document.body.appendChild(table);
table, td {
    border: 1px solid ;
}

Espero esto te sirve, Saludos!! ;))...

9
  • No entiendo la funcion disculpa, que valor es pf? y como esta funcion retorna los valores, Lo que requiero es recuperar los valores para luego hacer algo asi en jquery $html = "<option value='"+ data.id +"'>"+ data.nombre+"</option>"; obvio dentro de un $.each o for. que valla recorriendolo.
    – KeyWords
    Commented el 23 may. 2017 a las 21:22
  • esta función te permite conocer cada propiedad (o elemento) que compone un objeto, conociendo esto podrás acceder a cualquiera de sus elementos., creo que esa es tu pregunta "..no puedo acceder a los elementos.." lo que quiere decir que desconoces como esta compuesto el objeto puesto que de otra forma podrías acceder a ellos.
    – fwBasic
    Commented el 23 may. 2017 a las 21:33
  • por cierto pf es el nombre del objeto padre. tienes una Array donde hay un solo elemento, y ese elemento a su vez se compone de objetos que a su ves tiene mas objetos, es por ello que con la función que te deje podrás recorrer esa estructura e ir conociendo los elementos que la componen.
    – fwBasic
    Commented el 23 may. 2017 a las 21:35
  • 1
    Amigo, la rutina es capaz de recorrer cualquier objeto, he modificado mi respuesta comentando cada paso, si puedes copiar el objeto en jsfiddle.net podría analizarlo y tratar de entender que no puedes leer del objeto, te parece?
    – fwBasic
    Commented el 23 may. 2017 a las 21:59
  • 1
    Yo creo que tu último comentario es prácticamente tu respuesta, únicamente que es un objeto de objetos, deberías recorrerlo con: $.each(array[0], function (i, obj) { console.log(obj.id, obj.nombre); }); Commented el 4 jul. 2017 a las 8:42
0

En realidad lo que tienes ahí es un array de un único elemento.

Este elemento es un objeto donde si tienes los diferentes elementos por los que intentas iterar:

// Este es el array que tienes en realidad
var foo = [{0: {id: '1', nombre: 'PRIMERO'}, 1: {id: '2', nombre: 'SEGUNDO'}, 2: {id: '3', nombre: 'TERCERO'}, 3: {id: '4', nombre: 'CUARTO'}, 4: {id: '5', nombre: 'QUINTO'}, 5: {id: '6', nombre: 'SEXTO'}, 6: {id: '7', nombre: 'SEPTIMO'}, 7: {id: '8', nombre: 'OCTAVO'}, 8: {id: '9', nombre: 'NOVENO'}, 9: {id: '10', nombre: 'DECIMO'}, 10: {id: '11', nombre: 'DECIMOPRIMERO'} }];

//console.log(foo);

// Para recorrerlo:
for (var i in foo[0]){
  console.log('id: ' + foo[0][i].id + ', nombre: ' + foo[0][i].nombre + '\n');
}

2
  • Gracias por responder, pero ya eso lo he intentado y no logro acceder a los elementos. he realizado hasta dos loops uno dentro de otro y tampoco. Creo que he intenado de muchas formas acceder a los niveles internos.
    – KeyWords
    Commented el 23 may. 2017 a las 21:35
  • En el ejemplo te muestro cómo recorrerlo. Para ver cual es el problema de tu código habría que verlo. Commented el 23 may. 2017 a las 21:53

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.