web-dev-qa-db-fra.com

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

J'ai un appel AJAX qui renvoie 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);
        }
    });
});

À l'intérieur du #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?

jqueryajaxjsonparsing
167
Patrioticcow

En supposant que votre script côté serveur ne définisse pas l'en-tête de réponse Content-Type: application/json approprié, vous devrez indiquer à jQuery qu'il s'agit de JSON à l'aide du paramètre 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($('<div>', {
                text: element.name
            }));
        });
    }
});

ou utilisez la méthode $.getJSON:

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

régler dataType:'json' analysera 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/

67
Rafay

Essayez le code suivant, 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.length;++i)
        {
            $('#results').append('<div class="name">'+json[i].name+'</>');
        }
    }
});
19
Sarabhaiah Polakam
 $(document).ready(function () {
    $.ajax({ 
        type: 'GET', 
        url: '/functions.php', 
        data: { get_param: 'value' }, 
        success: function (data) { 
         for (var i=0;i<data.length;++i)
         {
         $('#cand').append('<div class="name">data[i].name</>');
         }
        }
    });
});
8
Mohammed Abdelrasoul

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");
            }
        });
4
Shivam Srivastava

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

  1. dans votre fichier php assurez-vous que vous imprimez comme ça
echo json_encode(array_shift($your_variable));
  1. dans votre fonction de réussite le faire 
 success: function (data) {
    var result = $.parseJSON(data);
      ('.yourclass').append(result['your_key1']);
      ('.yourclass').append(result['your_key2']);
       ..
    }

et aussi vous pouvez faire une boucle si vous voulez 

3
elaz

Je suis d'accord avec toutes les solutions ci-dessus, mais je tiens à préciser quelle est la cause fondamentale de ce problème: cet acteur principal dans tout le code ci-dessus est cette ligne de code:

dataType:'json'

lorsque vous manquez cette ligne (ce qui est facultatif), les données renvoyées par le serveur sont traitées comme une chaîne de longueur complète (qui correspond au type de retour par défaut). L'ajout de cette ligne de code indique à jQuery de convertir la chaîne possible JSON en objet JSON.

Tous les appels ajax jQuery doivent spécifier cette ligne, s’ils attendent un objet de données json.

2
justnajm
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  + '<br>');
    cand.innerHTML = json_arr;
});

<div id="cand">
</div>
2
Servesh Mishra

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('<p>'+data.clo[i].fin+'</>');
}
});
1
Guspan Tanadi
$.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();
  });
});
0
Sarah Smith