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 ove

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>


 

目录
相关文章
|
2月前
|
JavaScript 前端开发 开发者
jQuery:JavaScript库的瑰宝
jQuery:JavaScript库的瑰宝
46 3
|
24天前
|
JavaScript 前端开发 开发者
|
2月前
|
JavaScript 前端开发 API
深入了解jQuery:快速、高效的JavaScript库
【10月更文挑战第11天深入了解jQuery:快速、高效的JavaScript库
17 0
|
2月前
|
JavaScript 前端开发
JavaScript - 测试 jQuery
JavaScript - 测试 jQuery
14 0
|
2月前
|
数据采集 JavaScript 前端开发
JavaScript中通过array.filter()实现数组的数据筛选、数据清洗和链式调用,JS中数组过滤器的使用详解(附实际应用代码)
JavaScript中通过array.filter()实现数组的数据筛选、数据清洗和链式调用,JS中数组过滤器的使用详解(附实际应用代码)
|
2月前
|
JavaScript 前端开发
JavaScript三级联动jQuery写法
JavaScript三级联动jQuery写法
|
2月前
|
JavaScript 前端开发
JavaScript 树状菜单栏jQuery写法
JavaScript 树状菜单栏jQuery写法
|
2月前
|
JavaScript 前端开发 API
【前端基础篇】JavaScript之jQuery介绍
【前端基础篇】JavaScript之jQuery介绍
62 0
|
JavaScript
jquery的each函数的用法
each和 map函数的使用案例 jQuery(document).ready(function($) { // $("li").
846 0