json:
{ "justIn": [ { "textId": "123", "text": "Hello,geovindu", "textType": "Greeting" }, { "textId": "514", "text":"What's up?", "textType": "Question" }, { "textId": "122", "text":"Come over here", "textType": "Order" } ], "recent": [ { "textId": "1255", "text": "Hello,sibodu", "textType": "Greeting" }, { "textId": "6564", "text":"What's up?", "textType": "Question" }, { "textId": "0192", "text":"Come over here", "textType": "Order" } ], "old": [ { "textId": "5213", "text": "Hello,geovindu", "textType": "Greeting" }, { "textId": "9758", "text":"What's 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>