Comment analyser le tableau JSON dans jQuery?

Question

EDIT J'ai vérifié la documentation jQuery et en utilisant .ajax $ avec le type de données JSON spécifié renvoie un objet javascript évalué, donc eval() n'est pas la réponse ici. Je le savais quand même, puisque je suis capable d'analyser des objets JSON simples, mais pas des tableaux. Le problème est le $ .each-mon chemin à travers eux :)

J'ai suivi la syntaxe pour analyser un tableau JSON dans jQuery à la lettre, mais cela ne fonctionne pas pour une raison quelconque. J'obtiens le tableau en utilisant $ .ajax, j'ai spécifié le type de données correct, et dans Firebug je peux voir que la réponse de mon script PHP est []. Pourtant, lorsque j'essaie d'utiliser $ .each pour itérer dans le tableau, tout ce que j'obtiens est des valeurs indéfinies lorsque j'essaie de consoler.log diverses parties du tableau. Voici où mon script php fait et code le tableau:

if(mysqli_num_rows($new_res) > 0) { 
$messages = array(); 

while($message_data = mysqli_fetch_assoc($query_res)) { 
    $message = array(
    'poster' => $message_data['poster'], 
    'message' => $message_data['message'], 
    'time' => $message_data['time'] 
); 

    $messages[] = $message; 
} 

echo json_encode($messages); 
} else if(mysqli_num_rows($new_res) == 0) { 
$message = array(
    'poster' => '', 
    'message' => 'No messages!', 
    'time' => 1 
); 

echo json_encode($message); 
} 

Et voici ma tentative pour l'analyser:

var logged_in = '<?php echo $logged_in; ?>'; 
    var poster = '<?php echo $_SESSION["poster"];?>'; 
    $.ajax({ 
    url: 'do_chat.php5', 
    type: 'post', 
    data: ({'poster':poster,'logged_in':logged_in}), 
    dataType: 'json', 
    success: function(data) { 
     $.each(data, function(messageIndex, message) { 
        console.log(parseInt($('#chatWindow :last-child > span').html())+' '+message['time']); 
     if((parseInt(message['time']) > parseInt($('#chatWindow :last-child > span').html()))) { 
    $('#chatWindow').append('<div class="poster">'+message['poster']+'</div><div class="message"><span>'+message['time']+'</span>'+message['message']+'</div>'); 
     } 
     }); 
    } 
    }); 

Sans la fonction .each $ Je suis capable d'analyser avec succès simples objets JSON , mais pas un tableau. C'est ma première sortie avec JSON et $ .each, et je suis assez nouveau pour jQuery, alors allez-y doucement si mon code a des bits moche!

Answer 1

Votre data est une chaîne de '[{}]' à ce moment, vous pouvez eval comme si:

function(data) { 
    data = eval('(' + data + ')') 
} 

Cependant, cette méthode est loin d'être sûr, ce sera un peu plus de travail, mais les meilleures pratiques est d'analyser avec l'analyseur de JSON de Crockford: https://github.com/douglascrockford/JSON-js

une autre méthode serait $.getJSON et vous aurez besoin de mettre le dataType à JSON pour une méthode dépendante pur jQuery.

Answer 2

Vous pouvez utiliser la fonction eval() Javascript pour analyser le JSON pour vous. Voir the JSON website pour une meilleure explication, mais vous devriez être en mesure de changer votre fonction de succès ...

var returnedObjects = eval(data); 
var i = 0; 
for (i = 0; i < returnedObjects.length; i++){ 
    console.log('Time: ' + returnedObjects[i].time); 
} 

... ou quelque chose de proche.

Answer 3

Attention au eval, les spécifications JSON http://json.org/js.html recommandent quelque chose comme

var myObject = eval('(' + myJSONtext + ')'); 

Et il peut y avoir un peu plus gotchas. Il y a un plugin pour jQuery qui prendra soin de lui, je suppose:

http://code.google.com/p/jquery-json/

Answer 4

Non, avec eval n'est pas sûr, vous pouvez utiliser l'analyseur de JSON qui est beaucoup plus sûr: var myObject = JSON.parse(data); Pour cela, utilisez le répertoire lib https://github.com/douglascrockford/JSON-js

Answer 5

Vous pouvez télécharger un analyseur JSON à partir d'un link on the JSON.org website qui fonctionne très bien, vous pouvez également vous stringifier JSON pour afficher le contenu.

De plus, si vous utilisez EVAL et il est un tableau JSON alors vous aurez besoin d'utiliser la synrax suivante:

eval('([' + jsonData + '])');

Answer 6

Ne pas eval. utilisez un analyseur réel, c'est-à-dire, De json.org

Answer 7

jQuery.parseJSON - nouveau dans jQuery 1.4.1

Answer 8

Je sais que cela est assez longtemps après votre message, mais je voulais poster pour d'autres qui pourraient rencontrer ce problème et tomber par hasard sur ce poste que je fait.

Il semble que le $.each de jquery modifie la nature des éléments du tableau.

Je voulais faire ce qui suit:

$.getJSON('/ajax/get_messages.php', function(data) { 

    /* data: 

    [{"title":"Failure","details":"Unsuccessful. Please try again.","type":"error"}, 
    {"title":"Information Message","details":"A basic informational message - Please be aware","type":"info"}] 

    */ 

    console.log ("Data0Title: " + data[0].title); 
    // prints "Data0Title: Failure" 

    console.log ("Data0Type: " + data[0].type); 
    // prints "Data0Type: error" 

    console.log ("Data0Details: " + data[0].details); 
    // prints "Data0Details: Unsuccessful. Please try again" 


    /* Loop through data array and print messages to console */ 

}); 

Pour accomplir la boucle, j'ai d'abord essayé d'utiliser un jquery $.each en boucle à travers le réseau de données. Cependant, comme les notes OP, cela ne fonctionne pas bien:

$.each(data, function(nextMsg) {  
    console.log (nextMsg.title + " (" + nextMsg.type + "): " + nextMsg.details); 
    // prints 
    // "undefined (undefined): undefined 
    // "undefined (undefined): undefined 
}); 

Cela ne fait pas exactement le sens que je suis en mesure d'accéder aux éléments data[0] lors de l'utilisation d'une clé numérique sur le tableau de données. Donc, puisque l'aide d'un index numérique travaillé, j'ai essayé (avec succès) le remplacement du bloc $.each avec une boucle:

var i=0; 
for (i=0;i<data.length;i++){ 
    console.log (data[i].title + " (" + data[i].type + "): " + data[i].details); 
    // prints 
    // "Failure (error): Unsuccessful. Please try again" 
    // "Information Message (info): A basic informational message - Please be aware" 
} 

donc je ne sais pas le problème sous-jacent, un javascript de base, l'ancienne boucle semble être une alternative fonctionnelle que je suis de jquery $.each

Answer 9

essaie d'analyser les données JSON retour d'un appel ajax, et ce qui suit travaille pour moi:

code PHP Exemple

$portfolio_array= Array('desc'=>'This is test description1','item1'=>'1.jpg','item2'=>'2.jpg'); 

echo json_encode($portfolio_array); 

Et dans les .js, je suis analyse comme ceci:

var req=$.post("json.php", { id: "" + id + ""}, 
function(data) { 
    data=$.parseJSON(data); 
    alert(data.desc); 
    $.each(data, function(i,item){ 
    alert(item); 
    }); 
}) 
.success(function(){}) 
.error(function(){alert('There was problem loading portfolio details.');}) 
.complete(function(){}); 

Si vous avez tableau multidimensionnel comme ci-dessous

$portfolio_array= Array('desc'=>'This is test description 1','items'=> array('item1'=>'1.jpg','item2'=>'2.jpg')); 
echo json_encode($portfolio_array); 

ensuite le code ci-dessous devrait fonctionner:

var req=$.post("json.php", { id: "" + id + 
    function(data) { 
    data=$.parseJSON(data); 
    alert(data.desc); 
    $.each(data.items, function(i,item){ 
    alert(item); 
    }); 
}) 
.success(function(){}) 
.error(function(){alert('There was problem loading portfolio details.');}) 
.complete(function(){}); 

S'il vous plaît noter la clé sous-tableau ici est des éléments, et supposons que si vous avez xyz puis à la place de data.items utiliser data.xyz

Answer 10

En utilisant .NET 3.5 FIX

Vous êtes tous un peu mal, mais la combinaison de tous vos efforts a porté ses fruits!

Au lieu de eval ('([' + jsonData + '])'); ne

success: function(msg){ 
var data = eval(msg.d); 
var i=0; 
for(i=0;i<data.length;i++){ 
    data[i].parametername /// do whatever you want here. 
}; 

Je ne sais rien au sujet de l'ensemble « ne pas utiliser eval », mais ce que je sais est que en faisant le « ([ » + msg + « ]) » vous imbriquer les objets plus profonds, au lieu de monter d'un niveau.