Làm thế nào để phân tích cú pháp mảng JSON trong jQuery?

Question

EDIT Tôi đã kiểm tra tài liệu jQuery và sử dụng $ .ajax với kiểu dữ liệu json được chỉ định trả về một đối tượng javascript được đánh giá, vì vậy eval() không phải là câu trả lời ở đây. Tôi biết rằng dù sao, vì tôi có thể phân tích cú pháp các đối tượng JSON đơn lẻ, không chỉ là mảng. Vấn đề là $ .each-ing theo cách của tôi thông qua chúng :)

Tôi đã làm theo cú pháp để phân tích cú pháp một mảng JSON trong jQuery thành chữ cái, nhưng nó không hoạt động vì một lý do nào đó. Tôi lấy mảng bằng cách sử dụng $ .ajax, đã chỉ định kiểu dữ liệu chính xác và trong Firebug có thể thấy rằng phản hồi từ tập lệnh PHP của tôi là []. Tuy nhiên, khi tôi cố gắng sử dụng $ .each để lặp qua mảng, tất cả tôi nhận được là giá trị không xác định khi tôi cố gắng để console.log các phần khác nhau của mảng. Đây là nơi script php của tôi làm và mã hóa các mảng:

if(mysqli_num_rows($new_res) > 0) { 
$messages = array(); 

while($message_data = mysqli_fetch_assoc($query_res)) { 
    $message = array(
    'poster' => $message_data['poster'], 
    'message' => $message_data['message'], 
    'time' => $message_data['time'] 
); 

    $messages[] = $message; 
} 

echo json_encode($messages); 
} else if(mysqli_num_rows($new_res) == 0) { 
$message = array(
    'poster' => '', 
    'message' => 'No messages!', 
    'time' => 1 
); 

echo json_encode($message); 
} 

Và đây là nỗ lực của tôi để phân tích nó:

var logged_in = '<?php echo $logged_in; ?>'; 
    var poster = '<?php echo $_SESSION["poster"];?>'; 
    $.ajax({ 
    url: 'do_chat.php5', 
    type: 'post', 
    data: ({'poster':poster,'logged_in':logged_in}), 
    dataType: 'json', 
    success: function(data) { 
     $.each(data, function(messageIndex, message) { 
        console.log(parseInt($('#chatWindow :last-child > span').html())+' '+message['time']); 
     if((parseInt(message['time']) > parseInt($('#chatWindow :last-child > span').html()))) { 
    $('#chatWindow').append('<div class="poster">'+message['poster']+'</div><div class="message"><span>'+message['time']+'</span>'+message['message']+'</div>'); 
     } 
     }); 
    } 
    }); 

Nếu không có chức năng $ .each tôi có thể phân tích thành công đối tượng JSON đơn , nhưng không phải là một mảng. Đây là chuyến đi chơi đầu tiên của tôi với JSON và $ .each, và tôi khá mới với jQuery, vì vậy hãy dễ dàng nếu mã của tôi có các bit xấu xí!

Answer 1

bạn data là một chuỗi các '[{}]' tại thời điểm đó, bạn có thể eval nó như vậy:

function(data) { 
    data = eval('(' + data + ')') 
} 

Tuy nhiên phương pháp này là xa an toàn, đây sẽ là công việc nhiều hơn một chút nhưng các thực hành tốt nhất là phân tích cú pháp với trình phân tích cú pháp JSON của Crockford: https://github.com/douglascrockford/JSON-js

Phương pháp khác sẽ là $.getJSON và bạn cần đặt dataType thành json cho phương pháp dựa vào jQuery thuần túy.

Answer 2

Bạn có thể sử dụng hàm Javascript eval() để phân tích cú pháp JSON cho bạn. Xem the JSON website để có giải thích tốt hơn, nhưng bạn sẽ có thể thay đổi chức năng thành công của mình thành ...

var returnedObjects = eval(data); 
var i = 0; 
for (i = 0; i < returnedObjects.length; i++){ 
    console.log('Time: ' + returnedObjects[i].time); 
} 

... hoặc thứ gì đó gần.

Answer 3

Cẩn thận với eval, các thông số kỹ thuật JSON http://json.org/js.html khuyên cái gì đó như

var myObject = eval('(' + myJSONtext + ')'); 

Và có thể có một số gotchas hơn. Có một plugin cho jQuery mà sẽ chăm sóc nó, tôi đoán:

http://code.google.com/p/jquery-json/

Answer 4

Không, với eval là không an toàn, bạn có thể sử dụng phân tích cú pháp JSON đó là an toàn hơn nhiều: var myObject = JSON.parse(data); Đối với điều này sử dụng lib https://github.com/douglascrockford/JSON-js

Answer 5

Bạn có thể tải xuống trình phân tích cú pháp JSON từ link on the JSON.org website hoạt động tốt, bạn cũng có thể xâu chuỗi bạn JSON để xem nội dung.

Ngoài ra, nếu bạn đang sử dụng EVAL và đó là một mảng JSON sau đó bạn sẽ cần phải sử dụng synrax sau:

eval('([' + jsonData + '])');

Answer 6

KHÔNG eval. sử dụng một trình phân tích cú pháp thực, tức là, Từ json.org

Answer 7

jQuery.parseJSON - mới trong jQuery 1.4.1

Answer 8

Tôi biết điều này là khá lâu sau khi bài viết của bạn, nhưng muốn gửi cho những người khác có thể đang gặp vấn đề này và vấp ngã trên bài này như tôi đã làm.

Dường như có điều gì đó về jquery's $.each làm thay đổi bản chất của các phần tử trong mảng.

Tôi muốn làm như sau:

$.getJSON('/ajax/get_messages.php', function(data) { 

    /* data: 

    [{"title":"Failure","details":"Unsuccessful. Please try again.","type":"error"}, 
    {"title":"Information Message","details":"A basic informational message - Please be aware","type":"info"}] 

    */ 

    console.log ("Data0Title: " + data[0].title); 
    // prints "Data0Title: Failure" 

    console.log ("Data0Type: " + data[0].type); 
    // prints "Data0Type: error" 

    console.log ("Data0Details: " + data[0].details); 
    // prints "Data0Details: Unsuccessful. Please try again" 


    /* Loop through data array and print messages to console */ 

}); 

Để thực hiện vòng lặp, đầu tiên tôi cố gắng sử dụng một jquery $.each để lặp qua mảng dữ liệu. Tuy nhiên, như các ghi chú OP, điều này không làm việc đúng:

$.each(data, function(nextMsg) {  
    console.log (nextMsg.title + " (" + nextMsg.type + "): " + nextMsg.details); 
    // prints 
    // "undefined (undefined): undefined 
    // "undefined (undefined): undefined 
}); 

này không chính xác có ý nghĩa kể từ khi tôi có thể truy cập vào data[0] yếu tố khi sử dụng một phím số trên mảng dữ liệu. Vì vậy, kể từ khi sử dụng một chỉ số số làm việc, tôi đã cố gắng (thành công) thay thế các khối $.each với một vòng lặp for:

var i=0; 
for (i=0;i<data.length;i++){ 
    console.log (data[i].title + " (" + data[i].type + "): " + data[i].details); 
    // prints 
    // "Failure (error): Unsuccessful. Please try again" 
    // "Information Message (info): A basic informational message - Please be aware" 
} 

Vì vậy, tôi không biết vấn đề cơ bản, một cơ bản, javascript lỗi thời cũ vòng lặp for có vẻ là một lựa chọn chức năng để jquery của $.each

Answer 9

tôi cố gắng để phân tích dữ liệu JSON trở về từ một cuộc gọi ajax, và sau đây đang làm việc cho tôi:

mẫu mã PHP

$portfolio_array= Array('desc'=>'This is test description1','item1'=>'1.jpg','item2'=>'2.jpg'); 

echo json_encode($portfolio_array); 

Và trong .js, tôi đang phân tích như thế này:

var req=$.post("json.php", { id: "" + id + ""}, 
function(data) { 
    data=$.parseJSON(data); 
    alert(data.desc); 
    $.each(data, function(i,item){ 
    alert(item); 
    }); 
}) 
.success(function(){}) 
.error(function(){alert('There was problem loading portfolio details.');}) 
.complete(function(){}); 

Nếu bạn có mảng đa chiều như dưới đây

$portfolio_array= Array('desc'=>'This is test description 1','items'=> array('item1'=>'1.jpg','item2'=>'2.jpg')); 
echo json_encode($portfolio_array); 

Sau đó mã dưới đây nên làm việc:

var req=$.post("json.php", { id: "" + id + 
    function(data) { 
    data=$.parseJSON(data); 
    alert(data.desc); 
    $.each(data.items, function(i,item){ 
    alert(item); 
    }); 
}) 
.success(function(){}) 
.error(function(){alert('There was problem loading portfolio details.');}) 
.complete(function(){}); 

Vui lòng lưu ý khóa mảng phụ ở đây là các mục và giả sử nếu bạn có xyz thì thay cho data.items sử dụng data.xyz

Answer 10

Sử dụng .NET 3.5 FIX

Tất cả các bạn là hơi sai, nhưng sự kết hợp của tất cả các nỗ lực của bạn đã được đền đáp!

Thay vì eval ('([' + jsonData + '])'); do

success: function(msg){ 
var data = eval(msg.d); 
var i=0; 
for(i=0;i<data.length;i++){ 
    data[i].parametername /// do whatever you want here. 
}; 

Tôi không biết gì về toàn bộ "không sử dụng eval", nhưng điều tôi biết là bằng cách làm '([' + msg + '])' đối tượng sâu hơn, thay vì lên cấp.