您的位置：首页 > 移动开发 > Objective-C

javascript: Jquery each loop with json array or object

2016-01-12 15:53 549 查看

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航