如何在 jQuery 中解析 JSON 数组?
Posted
技术标签:
【中文标题】如何在 jQuery 中解析 JSON 数组?【英文标题】:How to parse JSON array in jQuery? 【发布时间】:2010-12-09 03:21:27 【问题描述】:编辑 我检查了 jQuery 文档并使用 $.ajax 和指定的 json 数据类型返回一个评估的 javascript 对象,所以 eval() 不是这里的答案。无论如何我都知道,因为我能够解析单个 JSON 对象,而不是数组。问题是我通过它们的方式 $.each :)
我已按照语法在 jQuery 中按字母解析 JSON 数组,但由于某种原因它不起作用。我正在使用 $.ajax 获取数组,指定了正确的数据类型,并且在 Firebug 中可以看到我的 php 脚本的响应是 []。然而,当我尝试使用 $.each 遍历数组时,当我尝试 console.log 数组的各个部分时,我得到的只是未定义的值。这是我的 php 脚本制作和编码数组的地方:
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);
这是我的解析尝试:
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>');
);
);
如果没有 $.each 函数,我可以成功解析单个 JSON 对象,但不能解析数组。这是我第一次使用 JSON 和 $.each,而且我对 jQuery 还很陌生,所以如果我的代码有丑陋的部分,请放轻松!
【问题讨论】:
您找到解决方案了吗?如果是这样,我建议选择一个答案:p 我还没有,没有。我编辑了,但没有得到进一步的回复。问题要么在于 PHP 编码 JSON 对象的方式,要么在于 $.each 语法。我 console.logged 响应数据,然后 eval()-ed 它和 console 记录它,我得到同样的东西,所以 eval 不是答案。 【参考方案1】:不,eval
不安全,您可以使用更安全的 JSON 解析器:var myObject = JSON.parse(data);
为此,请使用 lib https://github.com/douglascrockford/JSON-js
【讨论】:
来自 JSON 页面:The eval function is very fast. However, it can compile and execute any JavaScript program, so there can be security issues
【参考方案2】:
我知道这是在您发布帖子之后很久,但想为可能遇到此问题并像我一样偶然发现此帖子的其他人发帖。
jquery 的$.each
似乎有些东西改变了数组中元素的性质。
我想做以下事情:
$.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 */
);
为了完成循环,我首先尝试使用 jquery $.each
循环遍历数据数组。但是,正如 OP 所指出的,这不起作用:
$.each(data, function(nextMsg)
console.log (nextMsg.title + " (" + nextMsg.type + "): " + nextMsg.details);
// prints
// "undefined (undefined): undefined
// "undefined (undefined): undefined
);
这并不完全有意义,因为在数据数组上使用数字键时,我可以访问 data[0]
元素。因此,由于使用数字索引有效,我尝试(成功)用 for 循环替换 $.each
块:
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"
所以我不知道根本问题,一个基本的、老式的 javascript for 循环似乎是 jquery 的 $.each
的功能替代品
【讨论】:
【参考方案3】:jQuery.parseJSON - jQuery 1.4.1 中的新功能
【讨论】:
【参考方案4】:使用 .NET 3.5 修复
你们都有点小错误,但是你们所有的努力都得到了回报!
而不是 eval('([' + jsonData + '])');做
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.
;
我对整个“不要使用 eval”一无所知,但我所知道的是,通过执行 '([' + msg + '])' 您将这些对象嵌套得更深,而不是提升一个层次。
【讨论】:
【参考方案5】:我正在尝试解析从 ajax 调用返回的 JSON 数据,以下对我有用:
示例 PHP 代码
$portfolio_array= Array('desc'=>'This is test description1','item1'=>'1.jpg','item2'=>'2.jpg');
echo json_encode($portfolio_array);
在 .js 中,我是这样解析的:
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());
如果你有像下面这样的多维数组
$portfolio_array= Array('desc'=>'This is test description 1','items'=> array('item1'=>'1.jpg','item2'=>'2.jpg'));
echo json_encode($portfolio_array);
那么下面的代码应该可以工作了:
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());
请注意这里的子数组键是items,假设如果你有xyz
,那么用data.items
代替data.xyz
【讨论】:
【参考方案6】:小心评估,JSON 规范 http://json.org/js.html 推荐类似
var myObject = eval('(' + myJSONtext + ')');
而且可能还有一些陷阱。我猜有一个 jQuery 插件可以处理它:
http://code.google.com/p/jquery-json/
【讨论】:
【参考方案7】:您可以使用 Javascript eval() 函数为您解析 JSON。请参阅the JSON website 以获得更好的解释,但您应该能够将您的成功函数更改为...
var returnedObjects = eval(data);
var i = 0;
for (i = 0; i < returnedObjects.length; i++)
console.log('Time: ' + returnedObjects[i].time);
...或类似的东西。
【讨论】:
我认为这实际上是 $.each 应该做的,我认为将 $.ajax 与 json 数据类型一起使用意味着响应数据是预先评估的。不过我会试试看的:)【参考方案8】:您可以从 link on the JSON.org website 下载一个 JSON 解析器,效果很好,您还可以对 JSON 进行字符串化以查看内容。
另外,如果您使用的是 EVAL 并且它是一个 JSON 数组,那么您将需要使用以下 synrax:
eval('([' + jsonData + '])');
【讨论】:
【参考方案9】:你的data
在那个时间点是一个'[]'
的字符串,你可以像这样eval
它:
function(data)
data = eval( '(' + data + ')' )
然而,这种方法远非安全,这将需要更多的工作,但最佳实践是使用 Crockford 的 JSON 解析器来解析它:https://github.com/douglascrockford/JSON-js
另一种方法是 $.getJSON
,您需要将 dataType
设置为 json 以获得纯 jQuery 依赖方法。
【讨论】:
这不仅适用于 php jason_encodes 的数组是单级数组吗?例如,查看生成 JSON 对象的原始代码。只有在数据库查询没有结果的情况下,数组才是一维的,否则它是多维的。 哦,我没看到那部分..嗯 好的 - 你应该还在评估它,我相信它现在是你代码中的一个字符串。【参考方案10】:不要评估。使用真正的解析器,即来自 json.org
【讨论】:
以上是关于如何在 jQuery 中解析 JSON 数组?的主要内容,如果未能解决你的问题,请参考以下文章
如何使用 jquery 解析 json 数组中的结构化数据?
如何正确解析 JSON 文件以通过 JQuery Ajax 方法使用它?