javascript: Jquery each loop with json array or object

http://www.codeproject.com/Articles/779303/JSON-and-Microsoft-technologies

http://www.codeproject.com/Tips/885448/Google-Map-with-JSON

http://stackoverflow.com/questions/14927258/using-json-to-add-markers-to-google-maps-api

 http://www.cnblogs.com/gawking/p/3544588.html

json:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{ "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" }
]
}

　　

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<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:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
{ 
        "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"
                                    }
                                ]
                            }
                        },

　　

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
    <title>json jquery 遍历json对象 数组</title>
<script src="Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#button').click(function () {
            $.ajax({
                type: "GET",
                url: "jsonfile/4.json",
                dataType: "json",
                success: function (data) {
                    //10个区:
                    var ll = data.district.length;
                    //1.
                    $.each(data.district, function (i, v) {
                        if (v.did == 1) {
                            $("#title").append(v.name);
                            return;
                        }
                    });
                    //2.
                    $.each(data.district, function (si, sv) {
                        //$("#content").append(si + ' ' + sv + "</div><hr/>");
                        $.each(sv, function (k1, v1) {
                            //$("#mapinfo").append(k1 + ', ' + v1 + "</div><hr/>");
                            if (k1 == "communitys") {
                                $.each(v1, function (ii, qname) {
                                    if (ii == "community") {
                                        $.each(qname, function (q, qqname) {
                                            if (qqname.cid == 21) {
                                                $("#result").append("地址2:" + qqname.address);
                                                //alert(qqname.address);
                                                return;
                                            }
                                        });
                                    }
                                });
                            }
                        });
 
                    });
                    //3.第一个区
                    for (var i = 0; i < ll; i++) {
                        $.each(data.district[i].communitys, function (csi, csv) {
                            //$("#result").append("communitys object:" + csi + ' ' + csv + "</div><hr/>");                      
                            if (csi == "community") {
                                $.each(csv, function (iq, iqqname) {
                                    if (iqqname.cid == 51) {
                                        $("#info").append("地址3:" + iqqname.address);
                                        //alert(qqname.address);
                                        return;
                                    }
                                });
                            }
 
                        });
                    }
                    //$("#content").append(l);
                    //4.0第一个区第一条记录
                    for (var i = 0; i < ll; i++) {
                        $.each(data.district[i].communitys.community, function (msi, msv) {
                            $.each(msv, function (du, geovin) {
                                $("#content").append(du + ' ' + geovin + "</div><hr/>");
                                // if (geovin.cid == 21) {
                                //$("#content").append("地址4:" + geovin.address);                               
                                //return;
                                // }                  
 
                            });
                        });
                    }
 
                }
 
            });
            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>

　　

 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<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>

　　How to select json item from the array

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<title>json jquery 遍历解析json对象 How to select json item from the array</title>
<script src="Scripts/jquery-1.9.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
//http://stackoverflow.com/questions/6107039/how-to-select-json-item-from-the-array
//http://stackoverflow.com/questions/4992383/use-jquerys-find-on-json-object
 
var JSON = {
    "infos": {
        "info": [
            {
            "startYear": "1900",
            "endYear": "1930",
            "timeZoneDesc": "geovindu..",
            "timeZoneID": "1",
            "note": {
                "notes": [
                    {
                    "id": "1",
                    "title": "Mmm"},
                {
                    "id": "2",
                    "title": "Wmm"},
                {
                    "id": "3",
                    "title": "Smm"}
                ]
            },
            "links": [
                {
                "id": "1",
                "title": "Red House",
                "url": "http://infopedia.nl.sg/articles/SIP_611_2004-12-24.html"},
            {
                "id": "2",
                "title": "Joo Chiat",
                "url": "http://www.the-inncrowd.com/joochiat.htm"},
            {
                "id": "3",
                "title": "Bake",
                "url": "https://thelongnwindingroad.wordpress.com/tag/red-house-bakery"}
            ]}
        ]
    }
};
 
var infoLength= JSON.infos.info.length;
 
for (infoIndex = 0; infoIndex < infoLength; infoIndex++) {
 
    var notesLength= JSON.infos.info[infoIndex].note.notes.length;
     
    for (noteIndex = 0; noteIndex < notesLength; noteIndex++) {
 
        alert(JSON.infos.info[infoIndex].note.notes[noteIndex].title);
 
    }
}
</script>

　　查找参考：

//http://jsonselect.org/#tryit
//http://goessner.net/articles/JsonPath/
//https://github.com/lloyd/JSONSelect

 http://www.codeproject.com/Tips/172224/Selecting-JSON-Objects

json:

?
1
2
[{ "TEST1": 45, "TEST2": 23, "TEST3": "DATA1" }, { "TEST1": 46, "TEST2": 24,
    "TEST3": "DATA1" }, { "TEST1": 47, "TEST2": 25, "TEST3": "DATA3"}];

　　

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
function sql(s) {
     var returnObj = new Array();
     var cntr = 0;
     var cnt;
     for (var bb = 0; bb < s.from.length; bb++)
     {
     //$.each(s.from, function(bb) {
         var ifConditions = new Array();
         for (cnt = 0; cnt < s.where.length; cnt++) {
             ifConditions[cnt] = new Object();
             var where = "";
             if (s.where[cnt].OPERATOR.indexOf("=") == 0)
                 where = "==";
             if (s.where[cnt].VALUE.indexOf("'") > -1)
                 ifConditions[cnt] = eval("'" + eval("s.from[bb]." + (eval("s.where[" + cnt + "].KEY"))) + "'" + where + eval("s.where[" + cnt + "].VALUE"));
             else
                 ifConditions[cnt] = eval(eval("s.from[bb]." + (eval("s.where[" + cnt + "].KEY"))) + where + eval("s.where[" + cnt + "].VALUE"));
         }
         var comparedOutput = true;
         for (cnt = 0; cnt < s.conditions.length; cnt++) {
             var condition = "";
             switch (s.conditions[cnt].CONDITION.toUpperCase()) {
                 case "AND":
                     condition = "&&";
                     break;
                 case "OR":
                     condition = "||";
                     break;
             }
             comparedOutput = comparedOutput && eval("ifConditions[" + s.conditions[cnt].Condition1 + "]" + condition + "ifConditions[" + s.conditions[cnt].Condition2 + "]");
         }
         if (comparedOutput) {
             var result = {};
             var cols = s.select.split(",");
             for (var cnt = 0; cnt < cols.length; cnt++) {
                 result[cols[cnt]] = eval("s.from[bb]." + cols[cnt]);
             }
             returnObj.push(result);
         }
     }
     return returnObj;
 }

　　

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
function sql(s) {
        var returnObj = new Array();
        var cntr = 0;
        $.each(s.from, function(bb) {
            var ifConditions = new Array();
            $.each(s.where, function(cnt) {
                ifConditions[cnt] = new Object();
                var where = "";
                if (s.where[cnt].OPERATOR.indexOf("=") == 0)
                    where = "==";
                if (s.where[cnt].VALUE.indexOf("'") > -1)
                    ifConditions[cnt] = eval("'" + eval("s.from[bb]." + (eval("s.where[" + cnt + "].KEY"))) + "'" + where + eval("s.where[" + cnt + "].VALUE"));
                else
                    ifConditions[cnt] = eval(eval("s.from[bb]." + (eval("s.where[" + cnt + "].KEY"))) + where + eval("s.where[" + cnt + "].VALUE"));
            });
            var comparedOutput = true;
            $.each(s.conditions, function(cnt) {
                var condition = "";
                switch (s.conditions[cnt].CONDITION.toUpperCase()) {
                    case "AND":
                        condition = "&&";
                        break;
                    case "OR":
                        condition = "||";
                        break;
                }
                comparedOutput = comparedOutput && eval("ifConditions[" + s.conditions[cnt].Condition1 + "]" + condition + "ifConditions[" + s.conditions[cnt].Condition2 + "]");
            });
            if (comparedOutput) {
                var result = {};
                var cols = s.select.split(",");
                for (var cnt = 0; cnt < cols.length; cnt++) {
                    result[cols[cnt]] = eval("s.from[bb]." + cols[cnt]);
                }
                returnObj.push(result);
            }
        });
        return returnObj;
    }

　　TEST1 = 45 OR TEST3 = ‘DATA1’

?
1
2
3
4
5
6
var selectedObjs = sql({
                select: "TEST1,TEST2",
                from: a,
                where: [{ "KEY": "TEST1", "OPERATOR": "=", "VALUE": "45" }, { "KEY": "TEST3", "OPERATOR": "=", "VALUE": "'DATA1'"}],
                conditions: [{ "Condition1": "0", "CONDITION": "Or", "Condition2": "1"}]
            });

　　

ttp://techslides.com/how-to-parse-and-search-json-in-javascript
http://goessner.net/articles/JsonPath/

http://stackoverflow.com/questions/5288833/how-to-search-json-tree-with-jquery
https://github.com/dragonworx/jsel

http://stackoverflow.com/questions/6107039/how-to-select-json-item-from-the-array

http://techslides.com/how-to-parse-and-search-json-in-javascript

https://gist.github.com/iwek/3924925

posted @   ®Geovin Du Dream Park™  阅读(513)  评论(0)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列：基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
阅读排行：
· 25岁的心里话
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 零经验选手，Compose 一天开发一款小游戏！
· 一起来玩mcp_server_sqlite，让AI帮你做增删改查！！
历史上的今天：
2012-01-12 Javascript 地图经度纬度之间的距离的算法(轉)
2012-01-12 asp vbscript 检测客户端浏览器和操作系统(也可以易于升级到ASP.NET)
< 2025年3月 >
日 一 二 三 四 五 六
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5
点击右上角即可分享
微信分享提示