如何将 JSON 转换为数组并在 jQuery 中循环？答案

【问题标题】：How to convert JSON to array and loop over it in jQuery?如何将 JSON 转换为数组并在 jQuery 中循环？
【发布时间】：2014-08-26 23:17:17
【问题描述】：

我正在使用 JSON 与用户进行通信。 PHP 将数组转换为 JSON 为这种形式：

{"success":"text-to-display","warning":"NONE","notice":"text-to-display","error":"NONE"}

jQuery 显示通知：

function callback (data){
    if(data.notice !== 'NONE'){
        displayNotice(data.notice);
    }
    if(data.success !== 'NONE'){
        displaySuccess(data.success);
    }
    if(data.warning !== 'NONE'){
        displayWarning(data.warning);
    }
    if(data.error !== 'NONE'){
        displayError(data.error);
    }
}

不幸的是，在这个方法中不能显示两个错误或两个通知或两个警告，因为新语句替换旧语句。

<?php
$uwaga['error'] = 'old statement';
$uwaga['error'] = 'new statement';
// display only "new statement"
echo json_encode($uwaga);
?>

我认为使用数组：

<?php
$uwaga = array();
$uwaga[1] = array('type' => 'notice', 'text' => 'old statement');
$uwaga[2] = array('type' => 'notice', 'text' => 'new statement');
// display "new statement" and "old statement"
// generate: {"1":{"type":"notice","text":"old statement"},"2": {"type":"notice","text":"new statement"}}
    echo json_encode($uwaga);
?>

如何在jQuery上“翻译”这段PHP代码（主要是：如何将json对象转换为数组？如何循环使用？如何使用这个循环？如何参考$uwaga[$key]['name']和$uwaga[$key]['text'])？

foreach ($uwaga as $key => $value) {
switch ($uwaga[$key]['name']) {
    case 'warning':
        displayWarning($uwaga[$key]['text']);
        break;
}}

【问题讨论】：

这是一个很好的问题 - 有很多细节，而且需要事先努力。希望将来能看到您提出更多问题（也许还会回答！）。 +1

标签： javascript php jquery arrays json

【解决方案1】：

而不是这样：

$uwaga = array();
$uwaga[1] = array('type' => 'notice', 'text' => 'old statement');
$uwaga[2] = array('type' => 'notice', 'text' => 'new statement');

只要这样做，没有索引：

$uwaga = array();
$uwaga[] = array('type' => 'notice', 'text' => 'old statement');
$uwaga[] = array('type' => 'notice', 'text' => 'new statement');

这将在数组的末尾为它们分配索引（从零开始，而不是一）。

然后把所有这些：

if(data.notice !== 'NONE'){
    displayNotice(data.notice);
}
if(data.success !== 'NONE'){
    displaySuccess(data.success);
}
if(data.warning !== 'NONE'){
    displayWarning(data.warning);
}
if(data.error !== 'NONE'){
    displayError(data.error);
}

... 并按照 Rob 的建议将它们包装在 jQuery 的 each() 块中。然后会变成（假设数据在json.messages）：

$.each(json.messages, function (index, data) {
    if(data.notice !== 'NONE'){
        displayNotice(data.notice);
    }
    if(data.success !== 'NONE'){
        displaySuccess(data.success);
    }
    if(data.warning !== 'NONE'){
        displayWarning(data.warning);
    }
    if(data.error !== 'NONE'){
        displayError(data.error);
    }
});

【讨论】：

【解决方案2】：

好吧，假设我们有一个 PHP 数组

PHP：

<?php
$myArray = array(
    "test1"=>array("name"=>"test1name", "value"=>"test1value"),
    "test2"=>array("name"=>"test2name", "value"=>"test2value"),
    "test3"=>array("name"=>"test3name", "value"=>"test3value")
);

// Now make a javascript variable containing echoed JSON
echo "<script type='text/javascript'>var returnedJSON = " . json_encode($myArray) . ";</script>";

这将输出下面的 JSON 给你一个 javascript 对象：

var returnedJSON = {"test1":{"name":"test1name","value":"test1value"},"test2":{"name":"test2name","value":"test2value"},"test3":{"name":"test3name","value":"test3value"}};

Javascript：

//Once you have the variable from above which can come in various ways (through ajax, jsonp etc) you can iterate over it quite simply in jQuery
$.each(returnedJSON, function (index, value) {
    console.log(index + ": " + value.name);
});

http://api.jquery.com/jquery.each/

演示http://jsfiddle.net/robschmuecker/HqarE/1/

【讨论】：