Làm cách nào để phân tích dữ liệu JSON bằng jQuery / JavaScript?

Tôi có một cuộc gọi AJAX trả về một số JSON như thế này:

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

Bên trong #canddiv tôi sẽ nhận được:

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

Làm thế nào tôi có thể lặp qua dữ liệu này và đặt mỗi tên trong một div?

Giả sử tập lệnh phía máy chủ của bạn không đặt Content-Type: application/jsontiêu đề phản hồi phù hợp, bạn sẽ cần chỉ ra cho jQuery rằng đây là JSON bằng cách sử dụng dataType: 'json'tham số.

Sau đó, bạn có thể sử dụng $.each()hàm để lặp qua dữ liệu:

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

hoặc sử dụng $.getJSONphương pháp:

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

Cài đặt dataType:'json'sẽ phân tích JSON cho bạn:

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

Hoặc nếu không bạn có thể sử dụng parseJSON:

var parsedJson = $.parseJSON(jsonToBeParsed);

Sau đó, bạn có thể lặp lại như sau:

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

... bằng cách sử dụng $().each:

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

Câu đố

Hãy thử mã sau, nó hoạt động trong dự án của tôi:

//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+'</>');
        }
    }
});

 $(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</>');
         }
        }
    });
});

Sử dụng mã đó.

     $.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 tôi đã có cùng một vấn đề và tôi sửa nó như thế này bằng cách xóa []khỏi [{"key":"value"}]:

1. trong tệp php của bạn làm cho shure rằng bạn in như thế này

echo json_encode(array_shift($your_variable));

2. trong chức năng thành công của bạn làm điều này

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

và bạn cũng có thể lặp nó nếu bạn muốn

Tôi đồng ý với tất cả các giải pháp trên, nhưng để chỉ ra nguyên nhân cốt lõi của vấn đề này là, người đóng vai trò chính trong tất cả các mã trên là dòng mã này:

dataType:'json'

khi bạn bỏ lỡ dòng này (là tùy chọn), dữ liệu được trả về từ máy chủ được coi là chuỗi có độ dài đầy đủ (là loại trả về mặc định). Việc thêm dòng mã này thông báo cho jQuery để chuyển đổi chuỗi json có thể thành đối tượng json.

Bất kỳ lệnh gọi ajax jQuery nào cũng phải chỉ định dòng này, nếu mong đợi đối tượng dữ liệu json.

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>

Dữ liệu Json

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

Khi lấy

$.ajax({
  //type
  //url
  //data
  dataType:'json'
}).done(function( data ) {
var i = data.clo.length; while(i--){
$('#el').append('<p>'+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();
  });
});