jQuery loop over JSON字符串 – $.each实例

先来一段简单的javascript对象的遍历:



var json = [
    {"id":"1","tagName":"apple"},
    {"id":"2","tagName":"orange"},
    {"id":"3","tagName":"banana"},
    {"id":"4","tagName":"watermelon"},
    {"id":"5","tagName":"pineapple"}
];

$.each(json, function(idx, obj) {
    alert(obj.tagName);
});

当为JSON字符串时:


var json = ‘[{"id":"1","tagName":"apple"},{"id":"2","tagName":"orange"},
{"id":"3","tagName":"banana"},{"id":"4","tagName":"watermelon"},
{"id":"5","tagName":"pineapple"}]‘;

$.each(json, function(idx, obj) {
    alert(obj.tagName);
});

在Chrome中,他会显示 错误:
Uncaught TypeError: Cannot use ‘in‘ operator to search for ‘156‘
in [{"id":"1","tagName":"apple"}...


解决方案:
var json = ‘[{"id":"1","tagName":"apple"},{"id":"2","tagName":"orange"},
{"id":"3","tagName":"banana"},{"id":"4","tagName":"watermelon"},
{"id":"5","tagName":"pineapple"}]‘;

$.each(JSON.parse(json), function(idx, obj) {
    alert(obj.tagName);
});

//or 

$.each($.parseJSON(json), function(idx, obj) {
    alert(obj.tagName);
});
 

时间: 2024-10-12 02:51:31

jQuery loop over JSON字符串 – $.each实例的相关文章

js jquery前台解析json字符串

一.js解析json字符串 eval()和JSON.parse() 对于服务器返回的JSON字符串,如果jquery异步请求没做类型说明,或者以字符串方式接受,那么需要做一次对象化处理,就是将该字符串放于eval()中执行一次.这种方式也适合以普通javascipt方式获取json对象,以下举例说明: var dataObj=eval("("+data+")");//转换为json对象 为什么eval这里要添加 "("+data+")&

jquery loop on Json data using $.each

Hi I have the following JSON returned in a variable called data. THIS IS THE JSON THAT GETS RETURNED... [ {"Id": 10004, "PageName": "club"}, {"Id": 10040, "PageName": "qaz"}, {"Id": 100

jQuery打印json格式对象实例代码

jQuery打印json格式对象实例代码:所谓的json格式对象其实就是对象直接量,很多教程多说这是json对象,其实这是不正确.下面是一段打印json格式对象的实例代码,希望能够对初学者有所帮助.代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.soft

jquery实现的隔行变色代码实例

jquery实现的隔行变色代码实例: 隔行变色效果在大量的网站应用,尤其是表格或者新闻列表之类的结构,可以有效增强网站的辨识度,更为人性化,下面通过一个简单的实例介绍一下它的实现原理,至于它的美观度这里就不讲究了,代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http:/

jQuery.uploadify文件上传组件实例讲解

1.jquery.uploadify简介 在ASP.NET中上传的控件有很多,比如.NET自带的FileUpload,以及SWFUpload,Uploadify等等,尤其后面两个控件的用户体验比较好,无刷新,带上传进度等等.在最近的短信平台开发中,使用Uploadify进行文件上传. Uploadify官网地址是:http://www.uploadify.com/ 可满足项目开发需求. 下载地址:http://www.uploadify.com/wp-content/uploads/files/

jquery ajax jsonp跨域调用实例代码

今天研究了AJAX使用JSONP进行跨域调用的方法,发现使用GET方式和POST方式都可以进行跨域调用,这里简单分享下,方便需要的朋友 客户端代码 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApp.WebForm1" %><!DOCTYPE html P

PHP、jQuery、AJAX和MySQL 数据库实例

index.html页面 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <title> 6 PHP.jQuery.AJAX和MySQL 数据库实例 7 </title> 8 </head> 9 <body> 10 <form> 11 Select a User:

jQuery ajax传递特殊字符串问题

当你用ajax传递值到服务器端,如果值中包含特殊字符串如+,&等,在服务器端获取的结果可能就会出现差异,因为这些字符有其它用途,如“+”表示连接符,在转义后你获取到的就是空格.可以看看这些特殊字符与十六进制的关系: + 空格 / ? % & = # %2B %20 %2F %3F %25 %26 &3D %23 如果变量中确实需要包含这些特殊字符,请用encodeURIComponent()函数过滤,它会对这些字符编码,服务器端是会被自动解码的,不需要处理.另外,尽量提交json格

JSON对象和JSON字符串

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>JSON.parse()</titl