你的位置:首页 > Java教程

[Java教程]javascript: Jquery each loop with json array or object


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>