Jquery解析Json数组List方法大全
把json字符串变为json数组的方法总结:
众所周知,在Js/Jquery中是可以使用json数组的,我们要想使用json数组,前提是要把接收到的json字符串转为json数组哦。
下面站长就为大家总结了Jquery解析json的常用方法,希望对大家有帮助
本章方法讲解:不明白的地方,加群@群主即可
1,Jquery发送Post/Get等Http请求, $.each直接解析Json数组
2,用eval解析json数组,$.each循环
3,用JSON.parse解析json数组,$.each循环
4,用JSON.parse解析json数组,for循环
5,用JSON.parse解析复杂json字符串(同时包含json对象和json数组的json字符串)
001 | <!DOCTYPE > |
002 | <html> |
003 | <head> |
004 | <title>Jquery解析json数组List-Jsons.cn</title> |
005 | <script src= "http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js" type= "text/javascript" ></script> |
006 | <script> /* |
007 | 把json字符串变为json数组的方法总结: |
008 | 众所周知,在Js/Jquery中是可以使用json数组的,我们要想使用json数组, |
009 | 前提是要把接收到的json字符串转为json数组哦。 |
010 | 下面站长就为大家总结了Jquery解析json的常用方法,希望对大家有帮助 |
011 |
012 | 本章方法讲解:不明白的地方,加群@群主即可 |
013 |
014 | 1,Jquery发送Post/Get等Http请求, $.each直接解析Json数组 |
015 | 2,用eval解析json数组,$.each循环 |
016 | 3,用JSON.parse解析json数组,$.each循环 |
017 | 4,用JSON.parse解析json数组,for循环 |
018 | 5,用JSON.parse解析复杂json字符串(同时包含json对象和json数组的json字符串) |
019 |
020 | */ </script> |
021 | </head> |
022 | <body> |
023 | <script type= "text/javascript" > |
024 | //以下结果,请在console控制台中查看(F12或者审查元素,即可进入Console控制台) |
025 | //第一种用法:Jquery接收Post/Get返回值, $.each直接解析Json数组 |
026 |
027 | //($.post,$.get,$.getJSON,$.ajax等等 解析json的原理都一样) |
028 | $.post( '你的URL' , { action: 'GetList' }, function (data) { |
029 | //此post请求为异步,上面是模拟的测试地址,正式使用时,请换成自己的接口地址 |
030 | //为了方便,在这里我直接赋值咯 |
031 | data = [{ "Name" : "Json在线工具" , "ProUrl" : "www.yunjson.com" , "SiteInfo" : "Json在线工具(http://www.yunjson.com)" }, { "Name" : "Json在线解析" , "ProUrl" : "www.yunjson.com" , "SiteInfo" : "Json在线解析(http://www.yunjson.com)" }, { "Name" : "Json在线格式化" , "ProUrl" : "www.yunjson.com" , "SiteInfo" : "Json在线格式化(http://www.yunjson.com)" }] |
032 | if (data) { |
033 | //接收数据成功,开始处理json对象(此时data就是接收到的json数组) |
034 | //现在我们可以得到json数据中,需要循环得到每个json对象 |
035 | //为了方便查看,直接在控制台中打印出来咯 |
036 | $.each(data, function (index, item) { |
037 | //此时可以得到每个json对象哦,接下来的操作就交给大家了 |
038 | console.log(data.Name); |
039 | console.log(data.ProUrl); |
040 | console.log(data.SiteID); |
041 | console.log(data.SiteLink); |
042 | console.log(data.SiteInfo); |
043 | }); |
044 | } |
045 | }, 'json' ); |
046 | //下面来模拟下输出值(由于没有测试地址,在下面就直接赋值了) |
047 | var data = [{ "Name" : "Json在线工具" , "ProUrl" : "www.yunjson.com" , "SiteInfo" : "Json在线工具(http://www.yunjson.com)" }, { "Name" : "Json在线解析" , "ProUrl" : "www.yunjson.com" , "SiteInfo" : "Json在线解析(http://www.yunjson.com)" }, { "Name" : "Json在线格式化" , "ProUrl" : "www.yunjson.com" , "SiteInfo" : "Json在线格式化(http://www.yunjson.com)" }] |
048 | console.log( "第一种用法:Jquery中,$.each直接解析Json数组" ); |
049 | $.each(data, function (index, item) { |
050 | var result = item.Name "--" item.ProUrl "--" item.SiteInfo; //拼接数据,输出到控制台展示 |
051 | console.log(result); |
052 | }); |
053 | console.log( "\r\n-------------------------我是第一和二的方法分割线哦-----------------------------------------------------\r\n" ); |
054 |
055 | // ------------------------------我是第一和二的方法分割线哦---------------------------------------------------------- |
056 |
057 | //第二种用法:用eval解析json数组(先用eval把json字符串变为json数组对象,在用$.each循环取值,得到每一个对象item) |
058 |
059 | var data = '[{ "Name": "Json在线工具", "ProUrl": "www.yunjson.com", "SiteInfo": "Json在线工具(http://www.yunjson.com)" }, { "Name": "Json在线解析", "ProUrl": "www.yunjson.com", "SiteInfo": "Json在线解析(http://www.yunjson.com)" }, { "Name": "Json在线格式化", "ProUrl": "www.yunjson.com", "SiteInfo": "Json在线格式化(http://www.yunjson.com)"}]' ; |
060 | var dataObj = eval( '(' data ')' ); //此时已变成json数组对象咯,下面可以直接用$.each循环取值啦 |
061 |
062 | console.log( "第二种用法:用eval解析json数组,$.each循环" ); |
063 | $.each(dataObj, function (index, item) { |
064 | var result = item.Name "--" item.ProUrl "--" item.SiteInfo; //拼接数据,输出到控制台展示 |
065 | console.log(result); |
066 | }); |
067 | console.log( "\r\n-------------------------我是第二和三的方法分割线哦-----------------------------------------------------\r\n" ); |
068 |
069 | // ------------------------------我是第二和三的方法分割线哦---------------------------------------------------------- |
070 |
071 | //第三种用法:用JSON.parse解析json数组(先用JSON.parse把json字符串变为json数组对象,在用$.each循环取值,得到每一个对象item) |
072 |
073 | var data = '[{ "Name": "Json在线工具", "ProUrl": "www.yunjson.com", "SiteInfo": "Json在线工具(http://www.yunjson.com)" }, { "Name": "Json在线解析", "ProUrl": "www.yunjson.com", "SiteInfo": "Json在线解析(http://www.yunjson.com)" }, { "Name": "Json在线格式化", "ProUrl": "www.yunjson.com", "SiteInfo": "Json在线格式化(http://www.yunjson.com)"}]' ; |
074 | var dataObj = JSON.parse(data); //此时已变成json数组对象咯,下面可以直接用$.each循环取值啦 |
075 |
076 | console.log( "第三种用法:用JSON.parse解析json数组,$.each循环" ); |
077 | $.each(dataObj, function (index, item) { |
078 | var result = item.Name "--" item.ProUrl "--" item.SiteInfo; //拼接数据,输出到控制台展示 |
079 | console.log(result); |
080 | }); |
081 | console.log( "\r\n-------------------------我是第三和四的方法分割线哦-----------------------------------------------------\r\n" ); |
082 |
083 | // ------------------------------我是第三和四的方法分割线哦---------------------------------------------------------- |
084 |
085 | //第四种用法:用JSON.parse解析json数组(先用JSON.parse把json字符串变为json数组对象,在用for循环取值,得到每一个对象item) |
086 |
087 | var data = '[{ "Name": "Json在线工具", "ProUrl": "www.yunjson.com", "SiteInfo": "Json在线工具(http://www.yunjson.com)" }, { "Name": "Json在线解析", "ProUrl": "www.yunjson.com", "SiteInfo": "Json在线解析(http://www.yunjson.com)" }, { "Name": "Json在线格式化", "ProUrl": "www.yunjson.com", "SiteInfo": "Json在线格式化(http://www.yunjson.com)"}]' ; |
088 | var dataObj = JSON.parse(data); //此时已变成json数组对象咯,下面可以直接用for循环取值啦 |
089 |
090 | console.log( "第四种用法:用JSON.parse解析json数组,for循环" ); |
091 | for ( var i = 0; i < dataObj.length; i ) { |
092 | var result = dataObj[i].Name "--" dataObj[i].ProUrl "--" dataObj[i].SiteInfo; //拼接数据,输出到控制台展示 |
093 | console.log(result); |
094 | } |
095 | /*备注: |
096 | 不管是eval还是JSON.parse 把json字符串转换为json数组对象后, |
097 | 都需要用$.each或者for循环,进行调取数据哦 |
098 | */ |
099 | console.log( "\r\n-------------------------我是第四和五的方法分割线哦-----------------------------------------------------\r\n" ); |
100 |
101 | // ------------------------------我是第四和五的方法分割线哦---------------------------------------------------------- |
102 |
103 | //第五种用法:用JSON.parse解析复杂json字符串 |
104 | //(先用JSON.parse把复杂的json字符串变为json对象,在用for或者$.each循环取得里面的json数组,得到每一个对象) |
105 |
106 | var data = '{"Name":"Json在线解析","ProUrl":"www.yunjson.com","SiteID":1472222,"SiteLink":"官方QQ群:308250404","SiteList":[{"Name":"Json在线工具","ProUrl":"www.yunjson.com","SiteInfo":"Json在线工具(http://www.yunjson.com)"},{"Name":"Json在线解析","ProUrl":"www.yunjson.com","SiteInfo":"Json在线解析(http://www.yunjson.com)"},{"Name":"Json在线格式化","ProUrl":"www.yunjson.com","SiteInfo":"Json在线格式化(http://www.yunjson.com)"}]}' ; |
107 | var dataObj = JSON.parse(data); //此时已变成json对象咯,下面可以直接得到json对象的值 和 json数组对象, 直接用$.each循环json数组对象取值啦 |
108 | //得到单个json对象 |
109 | console.log( "第五种用法:用JSON.parse解析复杂json字符串,$.each循环" ); |
110 | console.log( "得到json单个对象" ); |
111 | console.log( "Name:--" dataObj.Name); |
112 | console.log( "ProUrl:--" dataObj.ProUrl); |
113 | console.log( "SiteID:--" dataObj.SiteID); |
114 | console.log( "得到json数组对象" ); |
115 | $.each(dataObj.SiteList, function (index, item) { |
116 | var result = item.Name "--" item.ProUrl "--" item.SiteInfo; //拼接数据,输出到控制台展示 |
117 | console.log(result); |
118 | }); |
119 | /* |
120 | 现在看看复杂的json解析也不过如此吧,现在你已经掌握了jquery解析json的方法咯,大胆的在项目中运用吧!!! |
121 | */ |
122 | </script> |
123 | </body> |
124 | </html> |