web-dev-qa-db-fra.com

boucle jQuery sur le résultat JSON de AJAX Succès?

Sur le rappel de succès jQuery AJAX, je souhaite passer en boucle sur les résultats de l'objet. Ceci est un exemple de l'apparence de la réponse dans Firebug.

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

Comment puis-je parcourir les résultats pour avoir accès à chacun des éléments?… J'ai essayé quelque chose comme ci-dessous mais cela ne semble pas fonctionner.

jQuery.each(data, function(index, itemData) {
  // itemData.TEST1
  // itemData.TEST2
  // itemData.TEST3
});
jqueryajaxjson
144
aherrick

vous pouvez supprimer la boucle externe et remplacer this par data.data:

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

Tu étais proche:

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

Vous avez un tableau d'objets/cartes de sorte que la boucle externe itère sur ceux-ci. La boucle interne effectue une itération sur les propriétés de chaque élément d'objet.

233
cletus

Vous pouvez également utiliser la fonction getJSON :

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

Il s’agit en réalité d’une reformulation de la réponse de ifesdjeen, mais j’ai pensé que cela pourrait être utile aux gens.

77
clone45

Si vous utilisez Fire Fox, ouvrez simplement une console (utilisez la touche F12) et essayez ceci:

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);
});

j'espère que ça aide

38
0100110010101

Cela ne fonctionnera probablement pas pour tous les autres utilisateurs, car l'appel ajax interprète vos données renvoyées sous forme de texte - ce n'est pas encore un objet JSON.

Vous pouvez le convertir en objet JSON manuellement à l'aide de la commande parseJSON ou en ajoutant simplement la propriété dataType: 'json' à votre appel ajax. par exemple.

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");
    }
});
14
Dave Hilditch

Accédez au tableau json comme n'importe quel autre tableau.

for(var i =0;i < itemData.length-1;i++)
{
  var item = itemData[i];
  alert(item.Test1 + item.Test2 + item.Test3);
}
12
Jon R

Vous pouvez également utiliser la fonction getJSON:

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

Voici ce que je suis venu avec pour voir facilement toutes les valeurs de données:

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

4
Yovav

Essayez jQuery.map function, fonctionne plutôt bien avec les cartes.

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>

4
PanwarS87

si vous ne voulez pas d'alerte, c'est que vous voulez du HTML, alors faites ceci

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

NOTE: utilisez "append" et non "html", sinon le dernier résultat est ce que vous verrez sur votre vue html

alors votre code html devrait ressembler à ceci

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

Vous pouvez aussi styler (ajouter une classe) la div dans le jQuery avant de la rendre au format HTML.

2
The Dead Guy

$each fonctionnera .. Une autre option est jQuery Ajax Callback pour le résultat du tableau

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.');
    }
  }
0
Lijo

J'utilise .map pour foreach. Par exemple

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>`)
      })
    },
0
dimitar

Je suis partiel à la fonction de flèche ES2015 pour trouver des valeurs dans un tableau

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

Commander Array.prototype.find () HERE

0
Leonardo Trimarchi

Si vous utilisez la méthode abrégée de la fonction d’appel ajax de JQuery comme indiqué ci-dessous, les données renvoyées doivent être interprétées comme un objet json pour que vous puissiez les parcourir en boucle.

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