jQuery boucle sur le résultat JSON de AJAX Success?

Sur le rappel de succès jQuery AJAX, je veux faire une boucle sur les résultats de l'objet. Voici 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 boucler 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
});

vous pouvez retirer la boucle extérieure et la remplacer thispar data.data:

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

Vous étiez proche:

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

Vous avez un tableau d'objets / cartes de sorte que la boucle externe les répète. La boucle interne itère sur les propriétés de chaque élément d'objet.

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

Ce n'est vraiment qu'une reformulation de la réponse d'ifesdjeen, mais j'ai pensé que cela pourrait être utile pour les gens.

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

Pour quiconque est coincé avec cela, cela ne fonctionne probablement pas parce que l'appel ajax interprète vos données renvoyées comme du texte - c'est-à-dire que ce n'est pas encore un objet JSON.

Vous pouvez le convertir en objet JSON en utilisant manuellement 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");
    }
});

Accédez au tableau json comme vous le feriez pour 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);
}

Voici ce que j'ai proposé pour afficher facilement toutes les valeurs de données:

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

Essayez la fonction jQuery.map , 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>

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

REMARQUE: 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 également styliser (ajouter une classe) le div dans la jquery avant qu'il ne soit rendu au format HTML

Si vous utilisez la méthode courte de la fonction d'appel ajax JQuery comme indiqué ci-dessous, les données renvoyées doivent être interprétées comme un objet json pour que vous puissiez effectuer une 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]);
      })
})

Je suis partial à 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 () ICI

$eachfonctionnera .. 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.');
  }
}

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