jQuery loop sobre el resultado JSON de AJAX Success?

152

En la devolución de llamada de éxito jQuery AJAX, quiero recorrer los resultados del objeto. Este es un ejemplo de cómo se ve la respuesta en Firebug.

[
 {"TEST1":45,"TEST2":23,"TEST3":"DATA1"},
 {"TEST1":46,"TEST2":24,"TEST3":"DATA2"},
 {"TEST1":47,"TEST2":25,"TEST3":"DATA3"}
]

¿Cómo puedo recorrer los resultados para tener acceso a cada uno de los elementos? He intentado algo como a continuación, pero esto no parece estar funcionando.

jQuery.each(data, function(index, itemData) {
  // itemData.TEST1
  // itemData.TEST2
  // itemData.TEST3
});
aherrick
fuente
1
Esto debería funcionar. ¿Estás seguro de que es exactamente el mismo código y los mismos datos?
Tamas Czinege

Respuestas:

255

Puede eliminar el bucle externo y reemplazarlo thiscon data.data:

$.each(data.data, function(k, v) {
    /// do stuff
});

Estuviste cerca:

$.each(data, function() {
  $.each(this, function(k, v) {
    /// do stuff
  });
});

Tiene una matriz de objetos / mapas, por lo que el bucle externo itera sobre ellos. El bucle interno itera sobre las propiedades de cada elemento del objeto.

cletus
fuente
El primer bucle es para una "categoría", mientras que un bucle dentro es para un "atributo". ¿De qué otra manera se hace eso?
dcolumbus
¿Qué sucede si desea trabajar con el elemento objeto en lugar de sus propiedades? ¿Por qué el bucle de @aherrick en la pregunta no funciona?
StuperUser
1
Si este bucle se usa en un uso de función separado en $(data)lugar de data, de lo contrario, la variable ksiempre devuelve 0.
user1226868
2
¿Alguien podría explicar las variables k & v que se pasan a la segunda función?
Brent Connor
@BrentConnor en este caso, k & v representan la clave y el valor de la matriz que se está ciclando. Lea sobre la función jquery .each ()
Ghost Echo
80

También puede usar la función getJSON :

    $.getJSON('/your/script.php', function(data) {
        $.each(data, function(index) {
            alert(data[index].TEST1);
            alert(data[index].TEST2);
        });
    });

Esto es solo una nueva redacción de la respuesta de ifesdjeen, pero pensé que podría ser útil para las personas.

clone45
fuente
Esto ayudó Por alguna razón no pude conseguir que la respuesta de @cletus funcionara, pero esto sí. No estoy seguro de cuál es el gran misterio sobre jQuery, pero el código simple no siempre funciona como lo espera.
AturSams
38

Si usa Fire Fox, simplemente abra una consola (use la tecla F12) y pruebe esto:

var a = [
 {"TEST1":45,"TEST2":23,"TEST3":"DATA1"},
 {"TEST1":46,"TEST2":24,"TEST3":"DATA2"},
 {"TEST1":47,"TEST2":25,"TEST3":"DATA3"}
];

$.each (a, function (bb) {
    console.log (bb);
    console.log (a[bb]);
    console.log (a[bb].TEST1);
});

Espero eso ayude

0100110010101
fuente
17

Para cualquier otra persona atascada con esto, probablemente no esté funcionando porque la llamada ajax está interpretando sus datos devueltos como texto, es decir, todavía no es un objeto JSON.

Puede convertirlo en un objeto JSON utilizando manualmente el comando parseJSON o simplemente agregando la propiedad dataType: 'json' a su llamada ajax. p.ej

jQuery.ajax({
    type: 'POST',
    url: '<?php echo admin_url('admin-ajax.php'); ?>',
    data: data, 
    dataType: 'json', // ** ensure you add this line **
    success: function(data) {
        jQuery.each(data, function(index, item) {
            //now you can access properties using dot notation
        });
    },
    error: function(XMLHttpRequest, textStatus, errorThrown) {
        alert("some error");
    }
});
Dave Hilditch
fuente
Esto me está dando "los datos no están definidos".
Hugh Seagraves
Debe usar su propia variable que almacena los datos que está pasando a la url. Si su variable de datos se llama mydata, use data: mydata
Dave Hilditch el
Ah Ya lo pillo. Gracias.
Hugh Seagraves
Uncaught TypeError: Cannot use 'in' operator to search for '188' inobteniendo ese error.
Si8
15

Acceda a la matriz json como lo haría con cualquier otra matriz.

for(var i =0;i < itemData.length-1;i++)
{
  var item = itemData[i];
  alert(item.Test1 + item.Test2 + item.Test3);
}
Toby Allen
fuente
1
antigua pregunta, pero ¿cómo podría recorrer las teclas json sin conocer los nombres ... como Test1, Test2, ext ...
BarclayVision
@BarclayVision Simplemente usa la tecla como un número. La primera clave es [0], la siguiente [1], y así sucesivamente.
copilot0910
¿podemos usar otra llamada ajax dentro de este bucle for? En caso afirmativo, dígame cómo.
Jyoti Jadhav
5

Esto es lo que se me ocurrió para ver fácilmente todos los valores de datos:

var dataItems = "";
$.each(data, function (index, itemData) {
    dataItems += index + ": " + itemData + "\n";
});
console.log(dataItems);

Yovav
fuente
4

Prueba la función jQuery.map , funciona bastante bien con los mapas.

var mapArray = {
  "lastName": "Last Name cannot be null!",
  "email": "Email cannot be null!",
  "firstName": "First Name cannot be null!"
};

$.map(mapArray, function(val, key) {
  alert("Value is :" + val);
  alert("key is :" + key);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

PanwarS87
fuente
2

si no quieres alerta, es decir, si quieres html, entonces haz esto

...
    $.each(data, function(index) {
        $("#pr_result").append(data[index].dbcolumn);
    });
...

NOTA: use "append", no "html", de lo contrario, el último resultado es lo que verá en su vista html

entonces su código html debería verse así

...
<div id="pr_result"></div>
...

También puede diseñar (agregar clase) el div en jquery antes de que se represente como html

El hombre muerto
fuente
0

Si está utilizando el método corto de la función de llamada JQuery ajax como se muestra a continuación, los datos devueltos deben interpretarse como un objeto json para que pueda recorrerlos.

$.get('url', function(data, statusText, xheader){
 // your code within the success callback
  var data = $.parseJSON(data);
  $.each(data, function(i){
         console.log(data[i]);
      })
})
Frederick Eze
fuente
0

Soy parcial a la función de flecha ES2015 para encontrar valores en una matriz

const result = data.find(x=> x.TEST1 === '46');

Checkout Array.prototype.find () AQUÍ

Leonardo Wildt
fuente
0

$eachfuncionará ... Otra opción es jQuery Ajax Callback para el resultado de la matriz

function displayResultForLog(result) {
  if (result.hasOwnProperty("d")) {
    result = result.d
  }

  if (result !== undefined && result != null) {
    if (result.hasOwnProperty('length')) {
      if (result.length >= 1) {
        for (i = 0; i < result.length; i++) {
          var sentDate = result[i];
        }
      } else {
        $(requiredTable).append('Length is 0');
      }
    } else {
      $(requiredTable).append('Length is not available.');
    }

  } else {
    $(requiredTable).append('Result is null.');
  }
}
LCJ
fuente
0

Yo uso .map para foreach. Por ejemplo

success: function(data) {
  let dataItems = JSON.parse(data)
  dataItems = dataItems.map((item) => {
    return $(`<article>
                <h2>${item.post_title}</h2>
                <p>${item.post_excerpt}</p>
              </article>`)
  })
},
dimitar
fuente