zl程序教程

您现在的位置是:首页 >  前端

当前栏目

javascript: Jquery each loop with json array or object

JavaScriptjQueryJSONJSON with or object Array
2023-09-11 14:19:12 时间
{ "justIn": [

{ "textId": "123", "text": "Hello,geovindu", "textType": "Greeting" },

{ "textId": "514", "text":"Whats up?", "textType": "Question" },

{ "textId": "122", "text":"Come over here", "textType": "Order" }

"recent": [

{ "textId": "1255", "text": "Hello,sibodu", "textType": "Greeting" },

{ "textId": "6564", "text":"Whats up?", "textType": "Question" },

{ "textId": "0192", "text":"Come over here", "textType": "Order" }

"old": [

{ "textId": "5213", "text": "Hello,geovindu", "textType": "Greeting" },

{ "textId": "9758", "text":"Whats up?", "textType": "Question" },

{ "textId": "7655", "text":"Come over here", "textType": "Order" }

}


 

 script src="Scripts/jquery-1.9.1.min.js" type="text/javascript" /script 

 script type="text/javascript" 

 $(document).ready(function () {

 $("#Link").click(function () {

 $.ajax({

 type: "GET",

 url: "jsonfile/5.json",

 dataType: "json",

 success: function (data) {

 $.each(data, function (k, v) {

 $("#mapinfo").append(k + ,  + " br/ hr/ 

 $.each(v, function (k1, v1) {

 //$("#title").append(k);

 $("#info").append(k1 +   + v1.textId +   + v1.text +   + v1.textType + " /div hr/ 

 return false;

 /script 

 /head 

 body 

 input type="button" id="Link" value="query"/ 

 div id="title" /div 

 div id="content" /div 

 div id="mapinfo" /div 

 div id="info" /div 

 /body 

 /html 


json:

{ 

 "district": [

 "did": "1",

 "name": "武昌区",

 "communitys": {

 "community": [ 

 "cid": "21",

 "name": "安顺家园",

 "url": "asjy",

 "address": "武昌区中北路23号",

 "x": "114.33830023",

 "y": "30.55309607",

 "img": "com21.png",

 "hot": "0",

 "groupbuy": "0",

 "estates": {

 "estate": [

 "name": "竹居",

 "value": "Z"

 "name": "梅岭",

 "value": "M"

 "name": "兰亭",

 "value": "L"

 "name": "菊坊",

 "value": "J"

 "cid": "25",

 "name": "百瑞景中央生活区",

 "url": "brj",

 "address": "武昌武珞路586号",

 "x": "114.33729172",

 "y": "30.52570714",

 "img": "com25.png",

 "hot": "0",

 "groupbuy": "0",

 "estates": {

 "estate": [

 "name": "南一区",

 "value": "S"

 "name": "北一区",

 "value": "N"

 "name": "东二区",

 "value": "E"

 "name": "西二区",

 "value": "W"

 },


 

 title json jquery 遍历json对象 数组 geovindu /title 

 script src="Scripts/jquery-1.9.1.min.js" type="text/javascript" /script 

 script type="text/javascript" 

 ///对象语法JSON数据格式(当服务器端回调回来的对象数据格式是json数据格式,必须保证JSON的格式要求,回调的对象必须使用eval函数进行转化(否则将得不到Object)。本文不作详细介绍服务器端回调的数据问题,我们将直接自定义对象)

 $(document).ready(function () {

 $(#button).click(function () {

 $.ajax({

 type: "GET",

 url: "jsonfile/4.json",

 dataType: "json",

 success: function (data) {

 //var obj = eval(data.district);

 $(data.district).each(function (index, value) {

 // var val = obj[index];

 $("#title").append(index);

 $.each(value, function (k1, v1) {

 $("#content").append(k1 +   + v1 + " /div hr/ 

 if (k1 == "communitys") {

 $.each(v1, function (q1, qname) {

 $("#mapinfo").append(q1 +   + qname + " /div hr/ 

 if (q1 == "community") {

 $.each(qname, function (t1, tname) {

 $("#result").append(t1 + ,  + tname.cid +tname.name+tname.address+tname.x+tname.y+tname.img+ " /div hr/ 

 return false;

 }); 

 /script 

 /head 

 body 

 div 点击按钮获取JSON数据 /div 

 input type="button" id="button" value="确定" / 

 div id="title" /div 

 div id="content" /div 

 div id="mapinfo" /div 

 div id="result" /div 

 div id="info" /div 

 /body 

 /html 


 


javaScript系列 [05]-javaScript和JSON 本文输出和JSON有关的以下内容 JSON和javaScript JSON的语法介绍 JSON的数据类型 JSON和XMLHTTPRequest JSON的序列化和反序列化处理
geovindu 读者是,读之者,者之读.一沙一世界! to be is to do举世皆清我独浊,众人皆醒我独醉.俺是农民工,程序员.
Let s Work Together On The Future Of JavaScript Through TC39 立即下载