Comment puis-je parcourir et afficher des données JSON à l'aide de jQuery ?

Analyse des données JSON avec jQuery / JavaScript

Lorsque vous travaillez avec des services Web ou des API, il est courant de recevoir des données JSON. L'analyse de ces données dans un format utilisable est nécessaire pour afficher et manipuler les données sur votre page Web.

Énoncé du problème :
Considérez l'appel AJAX suivant qui renvoie des données JSON :

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

Les données JSON récupérées dans le div #cand ressemblent à ceci :

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

La question se pose : comment pouvons-nous parcourir ces données JSON et afficher chaque nom dans un div séparé ?

Solution :
Pour Pour analyser correctement les données JSON, nous devons nous assurer que le script côté serveur définit le bon en-tête de réponse Content-Type: application/json. Pour que jQuery reconnaisse les données comme JSON, nous devons spécifier dataType : 'json' dans l'appel AJAX.

Une fois que nous avons le type de données correct, nous pouvons 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
            }));
        });
    }
});

Vous pouvez également utiliser la méthode $.getJSON() pour un aperçu plus concis approche :

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

Cela créera un nouveau div pour chaque nom dans les données JSON et l'affichera sur la page Web.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!