JS 循环遍历JSON数据

2019-04-13    标签:JavaScript    阅读:310    评论:1


JSON数据如:{"options":"[{/"text/":/"张三/",/"value/":/"9/"},{/"text/":/"李四/",/"valu

e/":/"10/"},{/"text/":/"王五/",/"value/":/"13/"}]"}


js可以写成

var data=[{name:"a",age:12},{name:"b",age:11},{name:"c",age:13},{name:"d",age:14}];  
      for(var o in data){  
        console.log("text:"+data[o].name+" value:"+data[o].age );  
      }

实例:结合ajax

html代码:注意引入jquery

<div class="lsit">
   
</div>
$(function(){
	$.ajax({
	//请求方式
	type:'GET',
	 //发送请求的地址
	url:'http://www.tpxhm.com/index/H5luck/h5_list',
	//服务器返回的数据类型
	dataType:'json',
	//发送到服务器的数据,对象必须为key/value的格式,jquery会自动转换为字符串格式
	data:'',
	success:function(data){
	for(var p in data){  
	  var arr=Number(p) + Number(1) ;
	  $('.lsit').append('<p><img src="'+data[p].userimg+'" alt=""><span>'+data[p].nickname+'<i>'+data[p].tel+'</i><br><u>奖品:'+data[p].cons+'</u><b>'+arr+'</b></span></p>')
	  }  
	},
	error:function(jqXHR){
	//请求失败函数内容
	}
    });
})


助力产业智慧升级,云服务器首年88元起,更有千元代金券礼包免费领!

‘简忆博客’微信公众号 扫码关注‘简忆博客’微信公众号,获取最新文章动态
转载:请说明文章出处“来源简忆博客”。http://www.tpxhm.com/fdetail/123.html

×
觉得文章有用就打赏一下文章作者
微信扫一扫打赏 微信扫一扫打赏
支付宝扫一扫打赏 支付宝扫一扫打赏

文章评论(1)

登录

2019-04-23 21:43:38
666回复

博主信息

头像

今天努力一点,知识一点点积累,谢谢那个曾经努力的自己!

职业:Web工程师

Email:2938039696@qq.com

学习交流群:简忆blogs技术群

项目合作:2938039696

置顶推荐

站点信息

901运行天数

267文章数量

主题框架:Foundation5
网站地图:XML网站地图
微信公众号:扫码关注公众号
公众号

打赏本站

如果你觉得本站很棒,可以通过扫码支付打赏哦!
微信扫码:你说多少就多少~
微信扫码
支付宝扫码:你说多少就多少~
支付宝扫码
×
×
×