Comment parsingr les données JSON avec jQuery / JavaScript?

J’ai un appel AJAX qui retourne du JSON comme ceci:

$(document).ready(function () { $.ajax({ type: 'GET', url: 'http://example/functions.php', data: { get_param: 'value' }, success: function (data) { var names = data $('#cand').html(data); } }); });

A l’intérieur de la #cand div, j’aurai:

 [ { "id" : "1", "name" : "test1" }, { "id" : "2", "name" : "test2" }, { "id" : "3", "name" : "test3" }, { "id" : "4", "name" : "test4" }, { "id" : "5", "name" : "test5" } ]

Comment puis-je parcourir ces données et placer chaque nom dans un div?

En supposant que votre script côté serveur ne définisse pas l’en Content-Type: application/json tête de réponse Content-Type: application/json approprié, vous devrez indiquer à jQuery qu’il s’agit de JSON en utilisant le dataType: 'json' .

Vous pouvez ensuite utiliser la fonction $.each() pour parcourir les données:

 $.ajax({ type: 'GET', url: 'http://example/functions.php', data: { get_param: 'value' }, dataType: 'json', success: function (data) { $.each(data, function(index, element) { $('body').append($('', { text: element.name })); }); } });

ou utilisez la méthode $.getJSON :

 $.getJSON('/functions.php', { get_param: 'value' }, function(data) { $.each(data, function(index, element) { $('body').append($('', { text: element.name })); }); });

set dataType:'json' parsingra json pour vous

 $.ajax({ type: 'GET', url: 'http://example/functions.php', data: { get_param: 'value' }, dataType:'json', success: function (data) { var names = data $('#cand').html(data); } });

ou bien vous pouvez utiliser parseJSON

 var parsedJson = $.parseJSON(jsonToBeParsed);

voici comment vous pouvez itérer

 var j ='[{"id":"1","name":"test1"},{"id":"2","name":"test2"},{"id":"3","name":"test3"},{"id":"4","name":"test4"},{"id":"5","name":"test5"}]';

itérer en utilisant each

 var json = $.parseJSON(j); $(json).each(function(i,val){ $.each(val,function(k,v){ console.log(k+" : "+ v); }); });

http://jsfiddle.net/fyxZt/4/

Essayez de suivre le code, cela fonctionne dans mon projet:

 //start ajax request $.ajax({ url: "data.json", //force to handle it as text dataType: "text", success: function(data) { //data downloaded so we call parseJSON function //and pass downloaded data var json = $.parseJSON(data); //now json variable contains data in json format //let's display a few items for (var i=0;i'+json[i].name+''); } } });

  $(document).ready(function () { $.ajax({ type: 'GET', url: '/functions.php', data: { get_param: 'value' }, success: function (data) { for (var i=0;idata[i].name'); } } }); });

Utilisez ce code.

  $.ajax({ type: "POST", contentType: "application/json; charset=utf-8", url: "Your URL", data: "{}", dataType: "json", success: function (data) { alert(data); }, error: function (result) { alert("Error"); } });

ok j’ai eu le même problème et je le répare comme ça en supprimant [] de [{"key":"value"}] :

dans votre fichier php faire en sorte que vous imprimez comme ça

 echo json_encode(array_shift($your_variable));

dans votre fonction de succès le faire

  success: function (data) { var result = $.parseJSON(data); ('.yourclass').append(result['your_key1']); ('.yourclass').append(result['your_key2']); .. }

et aussi vous pouvez le boucler si vous voulez

 var jsonP = "person" : [ { "id" : "1", "name" : "test1" }, { "id" : "2", "name" : "test2" }, { "id" : "3", "name" : "test3" }, { "id" : "4", "name" : "test4" }, { "id" : "5", "name" : "test5" } ]; var cand = document.getElementById("cand"); var json_arr = []; $.each(jsonP.person,function(key,value){ json_arr.push(key+' . '+value.name + '
'); cand.innerHTML = json_arr; });

Données Json

 data = {"clo":[{"fin":"auto"},{"fin":"robot"},{"fin":"fail"}]}

Quand récupérer

 $.ajax({ //type //url //data dataType:'json' }).done(function( data ) { var i = data.clo.length; while(i--){ $('#el').append(''+data.clo[i].fin+''); } });

 $.ajax({ url: '//.xml', dataType: 'xml', success: onTrue, error: function (err) { console.error('Error: ', err); } }); $('a').each(function () { $(this).click(function (e) { var l = e.target.text; //array.sort(sorteerOp(l)); //functionToAdaptHtml(); }); });

Je suis d’accord avec toutes les solutions ci-dessus, mais pour souligner la cause profonde de ce problème, cet acteur majeur dans tout le code ci-dessus est cette ligne de code:

 dataType:'json'

Lorsque vous manquez cette ligne (qui est facultative), les données renvoyées par le serveur sont traitées comme une chaîne de longueur complète (qui est le type de retour par défaut). L’ajout de cette ligne de code indique à jQuery de convertir la chaîne json possible en object json.

Tout appel jQuery ajax doit spécifier cette ligne, si vous attendez un object de données json.