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>


 

目录
相关文章
|
28天前
|
JavaScript 前端开发
js+jquery实现贪吃蛇经典小游戏
本项目采用HTML、CSS、JavaScript和jQuery技术,无需游戏框架支持。通过下载项目文件至本地,双击index.html即可启动贪吃蛇游戏。游戏界面简洁,支持方向键控制蛇移动,空格键实现游戏暂停与恢复功能。
57 14
|
1月前
|
设计模式 JavaScript 前端开发
js中new和object.creat区别
【10月更文挑战第29天】`new` 关键字和 `Object.create()` 方法在创建对象的方式、原型链继承、属性初始化以及适用场景等方面都存在差异。在实际开发中,需要根据具体的需求和设计模式来选择合适的方法来创建对象。
|
2月前
|
存储 JSON JavaScript
JavaScript JSON
【10月更文挑战第7天】JSON 是 JavaScript 中非常重要的一个数据格式,它为数据的表示和传输提供了一种简单而有效的方式。掌握 JSON 的使用方法和特点,对于开发高质量的 JavaScript 应用具有重要意义。
|
2月前
|
JavaScript 前端开发 开发者
jQuery:JavaScript库的瑰宝
jQuery:JavaScript库的瑰宝
58 3
|
2月前
|
JavaScript 前端开发 大数据
在JavaScript中,Object.assign()方法或展开语法(...)来合并对象,Object.freeze()方法来冻结对象,防止对象被修改
在JavaScript中,Object.assign()方法或展开语法(...)来合并对象,Object.freeze()方法来冻结对象,防止对象被修改
40 0
|
2月前
|
JavaScript 前端开发 API
深入了解jQuery:快速、高效的JavaScript库
【10月更文挑战第11天深入了解jQuery:快速、高效的JavaScript库
36 0
|
2月前
|
JavaScript 前端开发
JavaScript - 测试 jQuery
JavaScript - 测试 jQuery
21 0
|
2月前
|
JavaScript 前端开发
JavaScript三级联动jQuery写法
JavaScript三级联动jQuery写法
|
2月前
|
JavaScript 前端开发
JavaScript 树状菜单栏jQuery写法
JavaScript 树状菜单栏jQuery写法
|
10天前
|
JavaScript 前端开发
jQuery和CSS3滑动展开菜单按钮插件
这是一款jQuery和CSS3滑动展开菜单按钮插件。该滑动展开菜单按钮在用户点击主菜单按钮之后,子菜单以滑动的方式依次展开
48 21