Analyse JSON des données de réussite de JQuery.ajax

Question

J'ai des difficultés à obtenir le contenu d'un objet JSON à partir d'un appel JQery.ajax. Mon appel :

$('#Search').click(function () {
    var query = $('#query').valueOf();
    $.ajax({
        url: '/Products/Search',
        type: "POST",
        data: query,
        dataType: 'application/json; charset=utf-8',
        success: function (data) {
            alert(data);
            for (var x = 0; x < data.length; x++) {
                content = data[x].Id;
                content += "<br>";
                content += data[x].Name;
                content += "<br>";
                $(content).appendTo("#ProductList");
               // updateListing(data[x]);
            }
        }
    });
});

Il semble que l'objet JSON soit renvoyé correctement car "alert(data)" affiche ce qui suit

[{"Id": "1", "Name": "Shirt"}, {"Id": "2", "Name":"Pants"}]

mais lorsque j'essaie d'afficher l'Id ou le Nom sur la page en utilisant :

content = data[x].Id;
content += "<br>";
content += data[x].Name;
content += "<br>";

il renvoie "undefined" à la page. Qu'est-ce que je fais de mal ?

Merci pour votre aide.

Answer 1

Les données reviennent sous la forme de la représentation en chaîne du JSON et vous ne les reconvertissez pas en objet JavaScript. Définissez le dataType pour juste 'json' pour qu'il soit converti automatiquement.

Answer 2

Je vous recommande d'utiliser :

var returnedData = JSON.parse(response);

pour convertir la chaîne JSON (s'il ne s'agit que de texte) en un objet JavaScript.

Answer 3

Eh bien... vous avez fait les 3/4 du chemin... vous avez déjà votre JSON sous forme de texte.

Le problème est que vous semblez traiter cette chaîne comme si elle était déjà un objet JavaScript avec des propriétés relatives aux champs qui ont été transmis.

Ce n'est pas... c'est juste une chaîne.

Les requêtes telles que "content = data[x].Id ;" sont vouées à l'échec car JavaScript ne trouve pas ces propriétés attachées à la chaîne qu'il regarde... encore une fois, c'est JUSTE une chaîne.

Vous devriez être en mesure d'analyser simplement les données en tant que JSON grâce à... oui... la méthode parse de l'objet JSON.

monRésultat = JSON.parse(request.responseText) ;

Maintenant, myResult est un objet javascript contenant les propriétés qui ont été transmises par AJAX.

Cela devrait vous permettre de gérer la situation comme vous semblez vouloir le faire.

Il semble que JSON.parse ait été ajouté lors de l'ajout de l'ECMA5, donc tout ce qui est assez moderne devrait être capable de gérer cela en natif... si vous devez gérer des fossiles, vous pouvez aussi essayer des bibliothèques externes pour gérer cela, telles que jQuery ou JSON2 .

Pour mémoire, Andy E a déjà répondu à cette question pour quelqu'un d'autre. ICI .

modifier - J'ai vu la demande de "sources officielles ou crédibles", et probablement l'un des codeurs que je trouve le plus crédible serait John Resig ~ ECMA5 JSON ~ J'aurais bien fait un lien vers la spécification actuelle de l'ECMA5 concernant la prise en charge native de JSON, mais je préfère renvoyer quelqu'un vers un maître comme Resig plutôt que vers une spécification sèche.

Answer 4

Essayez le jquery each pour parcourir votre objet json :

$.each(data,function(i,j){
    content ='<span>'+j[i].Id+'<br />'+j[i].Name+'<br /></span>';
    $('#ProductList').append(content);
});

Answer 5

Solution courte et simple de votre problème utilisation dans le callback du succès

 success: function (data) {
                  data=eval("("+data+")");