Как анализировать данные JSON с помощью jQuery / JavaScript?

138

У меня есть вызов AJAX, который возвращает некоторый 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);
        }
    });
});

Внутри div #cand я получу:

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

Как я могу прокрутить эти данные и поместить каждое имя в div?

Теги:
parsing

8 ответов

229
Лучший ответ

Предполагая, что ваша сторона сервера script не устанавливает правильный заголовок ответа Content-Type: application/json, вам нужно указать jQuery, что это JSON, используя параметр dataType: 'json'.

Затем вы можете использовать функцию $.each() для прокрутки данных:

$.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
            }));
        });
    }
});

или используйте метод $.getJSON:

$.getJSON('/functions.php', { get_param: 'value' }, function(data) {
    $.each(data, function(index, element) {
        $('body').append($('<div>', {
            text: element.name
        }));
    });
});
Поделиться
  • 0
    успех. Благодарю. Должен ли я отправить JSON PR я могу отправить что-нибудь из моей функции PHP?
  • 5
    @Patrioticcow, вы также можете отправить JSON. В этом случае вам нужно будет установить параметр contentType: 'application/json' в вашей функции $.ajax и JSON сериализовать параметр data , например: data: JSON.stringify({ get_param: 'value' }) . Затем в вашем php-скрипте вам потребуется json decode, чтобы вернуть исходный объект.
Показать ещё 2 комментария
57

настройка dataType:'json' будет анализировать json для вас

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

иначе вы можете использовать parseJSON

var parsedJson = $.parseJSON(jsonToBeParsed);

вот как вы можете выполнять итерацию

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

итерации с помощью each

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

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

Поделиться
  • 0
    мои данные json: {"0":{"level1":"done","level2":"done","level3":"no"}} как можно извлечь это из каждой переменной? я пытался так, используя метод $.each но возвращает неопределенный var level1 = ele[0].level1;
  • 0
    @ 151291 Это неправильный способ задать ваш вопрос, так или иначе, вот скрипка jsfiddle.net/fyxZt/1738 для вашего json. Заметка массива примечаний json[0]
16

Попробуйте использовать следующий код, он работает в моем проекте:

//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 display a few items
        for (var i=0;i<json.length;++i)
        {
            $('#results').append('<div class="name">'+json[i].name+'</>');
        }
    }
});
Поделиться
  • 0
    Лучший код, который мы можем иметь!
5 
 $(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</>');
         }
        }
    });
});
Поделиться
4

Используйте этот код.

     $.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");
            }
        });
Поделиться
3

ok У меня была та же проблема, и я исправил ее так, удалив [] из [{"key":"value"}]:

  • в вашем php файле сделайте так, чтобы вы печатали как это
echo json_encode(array_shift($your_variable));
  1. в вашей функции успеха сделайте это
 success: function (data) {
    var result = $.parseJSON(data);
      ('.yourclass').append(result['your_key1']);
      ('.yourclass').append(result['your_key2']);
       ..
    }

а также вы можете его закодировать, если хотите

Поделиться
2 
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>
Поделиться
  • 0
    var jsonP - это не JSON ?, в любом случае, ваше решение работает для меня. Спасибо
1

Данные Json

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

При извлечении

$.ajax({
  //type
  //url
  //data
  dataType:'json'
}).done(function( data ) {
var i = data.clo.length; while(i--){
$('#el').append('<p>'+data.clo[i].fin+'</>');
}
});
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню