js遍历json数据
先看看json返回的数据结构:
我需要遍历取出bookreno 与 title 加载到页面容器中去
首先我要取到 recommendedBookList 字典结构数据,然后遍历反射到相应对象的属性
主方法这样写:
$(d.recommendedBookList).each(function(index,item){
//index指下标
//item指代对应元素内容
//this指代每一个元素对象
var bookno= item.bookrecno;
var title = item.title;
});
也可这样:
$.each(d.recommendedBookList, function (index, item) {
//index指下标
//item指代对应元素内容
//this指代每一个元素对象
var bookno= item.bookrecno;
var title = item.title;
});
具体代码如下:
<div class="con_pic picMarquee-left">
<div class="bd">
<ul class="picList"> </ul>
</div>
</div>
<script type="text/javascript">
//var a=1;
//var b=10;
$.ajax({
type: "get",
dataType: "json",
//data: "page="+a+"&rows="+b+"&return_fmt=" + encodeURIComponent("json"),
data: "page=1&rows=12&return_fmt=" + encodeURIComponent("json"),
url: "/interface/BookData.cshtml",
error: function (XmlHttpRequest, textStatus, errorThrown) { alert(XmlHttpRequest.responseText);},
success: function (d) {
var bkinfo = "";
$.each(d.recommendedBookList, function (index, item) {
//index指下标
//item指代对应元素内容
//debugger
var bookno= item.bookrecno;
var title = item.title;
var bkurl = "http://202.121.31.35/webopac/book/" + bookno;
var bkimg = "http://202.121.31.35/webopac/bscover/" + bookno;
var bkli = "<li><div class='pic'><a href='" + bkurl + "' target='_blank' title='" + title + "'><img src='" + bkimg + "' /></a></div><p class='title'><a href='" + bkurl + "' target='_blank' title='" + title + "'>" +title.substr(,) + "</a></p></li>";
bkinfo += bkli;
}); $(".picList").html(bkinfo);
jQuery(".picMarquee-left").slide({ mainCell: ".bd ul", autoPlay: true, effect: "leftMarquee", vis: , interTime: });
}
});
</script>
ajax调用页面:
@using ChaoXingPMS.DBEntity;
@using System.Text; @{ var page = HttpContext.Current.Request["page"];
var rows = HttpContext.Current.Request["rows"];
var return_fmt = HttpContext.Current.Request["return_fmt"]; //string _posturl = "http://202.121.31.35/webopac/recommended?page=1&rows=10&return_fmt=json";
string _posturl = "http://202.121.31.35/webopac/recommended?page=" + page + "&rows=" + rows + "&return_fmt=" + return_fmt; //通过WebRequest对象获取返回值
WebClient client = new WebClient();
client.Headers["Accept"] = "text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8";
client.Headers["Accept-Encoding"] = "gzip,deflate,sdch";
client.Headers["HOST"] = "opac.lib.shcc.edu.cn";
client.Headers["Accept-Language"] = "zh-CN,zh;q=0.8";
client.Headers["User-Agent"] = "Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/38.0.2125.122 Safari/537.36";
client.Dispose();
string strLine = "", temp;
try
{
Stream stream = client.OpenRead(_posturl);
StreamReader sr = new StreamReader(stream);
while ((temp = sr.ReadLine()) != null)
{
strLine += temp;
}
stream.Close();
sr.Close();
}
catch (Exception e)
{
}
Response.Write(strLine);
}
另附参考博客:
http://www.cnblogs.com/lovenan/archive/2012/12/07/2807190.html
JS 循环遍历JSON数据
JSON数据如:{"options":"[{\"text\":\"王家湾\",\"value\":\"9\"},{\"text\":\"李家湾\",\"valu
e\":\"10\"},{\"text\":\"邵家湾\",\"value\":\"13\"}]"}
用js可以写成: JSON数据如:{"options":"[{\"text\":\"王家湾\",\"value\":\"9\"},{\"text\":\"李家湾\",\"valu
e\":\"10\"},{\"text\":\"邵家湾\",\"value\":\"13\"}]"}
用js可以写成:
view plaincopy to clipboardprint?
01.var data=[{name:"a",age:12},{name:"b",age:11},{name:"c",age:13},{name:"d",age:14}];
02. for(var o in data){
03. alert(o);
04. alert(data[o]);
05. alert("text:"+data[o].name+" value:"+data[o].age );
06. }
var data=[{name:"a",age:12},{name:"b",age:11},{name:"c",age:13},{name:"d",age:14}];
for(var o in data){
alert(o);
alert(data[o]);
alert("text:"+data[o].name+" value:"+data[o].age );
}
或是
view plaincopy to clipboardprint?
01.<script type="text/javascript">
02.function text(){
03. var json = {"options":"[{\"text\":\"王家湾\",\"value\":\"9\"},{\"text\":\"李家湾\",\"value\":\"10\"},{\"text\":\"邵家湾\",\"value\":\"13\"}]"}
04. json = eval(json.options)
05. for(var i=0; i<json.length; i++)
06. {
07. alert(json[i].text+" " + json[i].value)
08. }
09.}
10.</script>
本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/songylwq/archive/2010/12/01/6047609.aspx
view plaincopy to clipboardprint?
01.var data=[{name:"a",age:12},{name:"b",age:11},{name:"c",age:13},{name:"d",age:14}];
02. for(var o in data){
03. alert(o);
04. alert(data[o]);
05. alert("text:"+data[o].name+" value:"+data[o].age );
06. }
var data=[{name:"a",age:12},{name:"b",age:11},{name:"c",age:13},{name:"d",age:14}];
for(var o in data){
alert(o);
alert(data[o]);
alert("text:"+data[o].name+" value:"+data[o].age );
}
或是
view plaincopy to clipboardprint?
01.<script type="text/javascript">
02.function text(){
03. var json = {"options":"[{\"text\":\"王家湾\",\"value\":\"9\"},{\"text\":\"李家湾\",\"value\":\"10\"},{\"text\":\"邵家湾\",\"value\":\"13\"}]"}
04. json = eval(json.options)
05. for(var i=0; i<json.length; i++)
06. {
07. alert(json[i].text+" " + json[i].value)
08. }
09.}
10.</script>
window.onload = function () {
var jsJosn1 = '<%=Jsonstr%>'; //从后台获取json商品字符串
var obj = eval('(' + jsJosn1 + ')'); //将字符串转为json对象
obj = eval(obj.TableInfo);
//循环商品
for (var i = 0; i < obj.length; i++) {
//alert(obj[i].BaseProductName + " " + obj[i].BaseProductNO + " " + obj[i].OrderPrice + " " + obj[i].OrderAmount + " " + obj[i].Unit + " " + obj[i].BPID);
AddProduct(obj[i].BaseProductName, obj[i].BaseProductNO, obj[i].OrderPrice, obj[i].Unit, obj[i].OrderAmount, obj[i].BPID);
}
}
var obj = {"status":1,"bkmsg":"\u6210\u529f","bkdata":["\u5415\u5c1a\u5fd7","1387580400","\u6dfb\u52a0\u8bb0\u5f55"]}{"status":1,"bkmsg":"\u6210\u529f","bkdata":["\u5415\u5c1a\u5fd7","1387580400","\u6dfb\u52a0\u8bb0\u5f55"]},{"status":1,"bkmsg":"\u6210\u529f","bkdata":["\u5415\u5c1a\u5fd7","1387580400","\u4ec0\u4e48\u4e5f\u6ca1\u6709"]}
ajax请求:
$.ajax({
url: '/path/to/file',
type: 'GET',
dataType: 'json',
data: {param1: 'value1'},
success: function (obj){
//遍历obj
}
})
返回的内容在success的函数里面,所有的遍历操作都是在这里面操作的:
for循环:
var obj = {
"status":,
"bkmsg":"\u6210\u529f",
"bkdata":["\u5415\u5c1a\u5fd7","","\u6dfb\u52a0\u8bb0\u5f55"]
}
// console.log(obj.length);
if (obj.status == ) {
for (var i = ; i < obj.bkdata.length; i++) {
console.log(obj.bkdata[i]);
};
}else{
alert("数据有误~");
};
for in 循环:
//for in循环
for(x in obj.bkdata){
//x表示是下标,来指定变量,指定的变量可以是数组元素,也可以是对象的属性。
console.log(obj.bkdata[x]);
}
//元素 each方法
if (obj.status == ) {
$(obj.bkdata).each(function(index,item){
//index指下标
//item指代对应元素内容
//this指代每一个元素对象
//console.log(obj.bkdata[index]);
console.log(item);
//console.log($(this));
});
}else{
alert("数据有误~");
};
//jquery each方法
$.each( obj.bkdata, function(index,item){
console.log(item);
});
js遍历json数据的更多相关文章
- js声明json数据,打印json数据,遍历json数据
1.js声明json数据: 2.打印json数据: 3.遍历json数据 //声明JSON var json = {}; json.a = 1; //第一种赋值方式(仿对象型) json['b'] = ...
- JS 循环遍历JSON数据 分类: JS技术 JS JQuery 2010-12-01 13:56 43646人阅读 评论(5) 收藏 举报 jsonc JSON数据如:{"options":"[{
JS 循环遍历JSON数据 分类: JS技术 JS JQuery2010-12-01 13:56 43646人阅读 评论(5) 收藏 举报 jsonc JSON数据如:{"options&q ...
- js声明json数据,打印json数据,遍历json数据,转换json数据为数组
1.js声明json数据: 2.打印json数据: 3.遍历json数据: 4.转换json数据为数组; //声明JSON var json = {}; json.a = 1; //第一种赋值方式(仿 ...
- JS解析json数据并将json字符串转化为数组的实现方法
json数据在ajax实现异步交互时起到了很重要的作用,他可以返回请求的数据,然后利用客户端的js进行解析,这一点体现出js的强大,本文介绍JS解析json数据并将json字符串转化为数组的实现方法, ...
- JS解析json数据
JS解析json数据(如何将json字符串转化为数组) 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN&q ...
- js中json数据简单处理(JSON.parse()和js中嵌套html)
js中json数据简单处理(JSON.parse()和js中嵌套html) 一.总结 1.html中嵌套js:<script>js代码</script> 2.js中嵌套html ...
- for-in遍历json数据
1.for遍历json数据 ','fun':'前端开发'} for(var attr in json){ alert(json[attr]) //遍历json属性的数据 alert(json['nam ...
- js读取json数据(php传值给js)
<?php $array =array('fds','fdsa','fdsafasd'); // json_encode($array); ?> <html> <hea ...
- 初探原生js根据json数据动态创建table
初探原生js根据json数据动态创建table 小生以实习生的职位进入了一家非纯软件的公司做asp.net开发,大半个月下来发现公司里居然没有前端工程师,这令我很诧异,跟着公司做项目,发现前端后台没有 ...
随机推荐
- JS对URL字符串进行编码/解码分析
一.为什么要进行js编码和解码? 只有字母和数字[0-9a-zA-Z].一些特殊符号“$-_.+!*'(),”[不包括双引号].以及某些保留字,才可以不经过编码直接用于URL. 出现的情况: 网址路径 ...
- cordova Process finished with exit code -1
安装完cordova之后,创建一个测试项目后,运行报Process finished with exit code -1,经过查找原因,是因为gradle没有安装,在http://www.androi ...
- 前端mock数据之mockjax和mockjson
用处 在前后台共同进行一个项目的时候常会遇到一种情景, 后台定义好接口,前端按照接口进行开发, 当前端开发完成后台接口却还没有开发完成, 这个时候要进行接口测试, 只能等后台开发完成才能测试, 在这中 ...
- textarea文本简单样式编辑
第一种方法采用替换:就是将文本域的换号符号\r\n,替换成其他符号,存入数据库,然后显示的时候再转换回来: //转换换行符$str=preg_replace("/\r\n|\r|\n/&qu ...
- opencv 3.0 DPM Cascade 检测 (附带TBB和openMP加速)
opencv 3.0 DPM cascade contrib模块 转载请注明出处,楼燚(yì)航的blog,http://www.cnblogs.com/louyihang-loves-baiyan/ ...
- 分享十个JavaScript在线调试工具
测试Javascript可能是网页开发中最让人忧伤的工作.这里我找一些比较好的工具来帮助大家进行测试工作.这10款是我精选的基于浏览器的JavaScript在线调试工具,希望你们对你们有用. 1.Op ...
- 广搜+输出路径 POJ 3414 Pots
POJ 3414 Pots Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 13547 Accepted: 5718 ...
- HDU 1896 Stones --优先队列+搜索
一直向前搜..做法有点像模拟.但是要用到出队入队,有点像搜索. 代码: #include <iostream> #include <cstdio> #include <c ...
- Volley(四)—— ImageLoader & NetworkImageView
Volley(四)—— ImageLoader & NetworkImageView ImageLoader是一个加载网络图片的封装类,其内部还是由ImageRequest来实现的.但因为源码 ...
- Linux ncurses编写 FlapyBird 第一步
/* * flapybird.h * * Created on: 2016年9月15日 * Author: jon */ #include <curses.h> #include < ...