javascript: Jquery each loop with json array or object

来源:http://www.cnblogs.com/geovindu/archive/2016/01/12/5124543.html
-Advertisement-
Play Games

json:{ "justIn": [{ "textId": "123", "text": "Hello,geovindu", "textType": "Greeting" },{ "textId": "514", "text":"What's up?", "textType": "Question"...


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>

  How to select json item from the array

<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:

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

  

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;
 }

  

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’

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"}]
            });

  


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 火狐瀏覽器下連接a下無法使用select下拉菜單:如果select下拉菜單包裹在鏈接a中,則無法實現選中效果,當然如此使用在實際應用中也是很少見的,不過下麵還是做一下簡單介紹,如何避免此種問題的出現,寄希望能夠給需要者帶來一定的幫助。代碼實例如下: 螞...
  • 動態等比例調整圖片大小的jQuery代碼:有時候圖片的大小和尺寸是位置,如果上傳後,任由其自然伸展,很有可能導致網頁變形,所以要認為的控製圖片的尺寸,當然也不能夠太粗暴,直接定死圖片的尺寸,這樣可能會導致圖片變形,所以要進行等比例縮放,下麵就是一段能夠實現此功能的代碼。代碼如下:原文地址是:http...
  • javascript刪除所有cookie實例代碼:一般情況下都是刪除指定的cookie,當然也可以一次性刪除所有的cookie,下麵就是一段能夠實現此功能的代碼。代碼如下:function clearCookie(){ var keys=document.cookie.match(/[^ =;].....
  • 今天在看書的過程中,又發現了自己目前對Javascript存在的一個知識模糊點:JS的作用域鏈,所以就通過查資料看書對作用域鏈相關的內容進行了學習。今天學習筆記主要有這樣幾個關鍵字:變數、參數傳遞、執行環境、變數對象、作用域鏈。 1.變數 變數需要註意的有兩點:變數聲明和複製變數值。 變數...
  • DOM 事件是 JS 中比較重要的一部分知識,所謂事件,簡單理解就是用戶對瀏覽器進行的一個操作。事件在 Web 前端領域有很重要的地位,很多重要的知識點都與事件有關,所以學好 JS 事件可以讓我們在JS的學習道路中更進一步。 1、事件流 事件流描述的是從頁面中接受事件的順序。但是 IE 和 ...
  • 1.div+css中的定位position 最主要的兩個屬性:屬性 absolute(絕對定位) relative(相對定位),有他們才造就了div+css佈局的多樣性,讓我們的網頁豐富多彩起來。首先解釋relative(相對定位),顧名思義,定位是相對的,那他是相對於什麼呢?參照物是什麼?看如下代...
  • 今天剛打個一個技術群,裡面有人問標題上的問題,嘿,我恰好遇過,現在大家至少也在用jquery1.9以上的版本,ajaxfileupload的版本早就不更新了,大家可以下載看:地址這裡,它例子里使用的Jquery是1.2的,好老呀。。。這個問題,我以前開發過程中遇過,網上說經測試(我是沒測試),是版本...
  • 幾個自學HTML的例子,僅供娛樂,並沒有其它什麼用
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...