JQuery 解析多維的Json數(shù)據(jù)格式
Json格式其實(shí)和表格式有異曲同工之妙,在網(wǎng)絡(luò)傳輸中,它比XML還省流量,而且與JS有更好的融合,更容易被解析。Json格式樣例如下:
{"Products":[
{"orderid":"11077","customerid":"RATTC"},
{"orderid":"11078","customerid":"RATT"}
],
"Img":[{"id":"12345","url"
:"image/1.jpg"}
]}
其中Products和Img我們可以認(rèn)為是一張表的表名。在Products表中,orderid和customerid都是Products的字段,11077與RATTC可以理解為對(duì)應(yīng)字段的值。Img部分也是一樣。所以,上面Products存在兩筆記錄,而Img存在一筆記錄而已。
那么我們?cè)趺礃釉贘Query里面進(jìn)行解析出相應(yīng)的表,欄位和值呢?
在JQuery里面我們可以用:
var Products= Json.Products;
來(lái)獲得對(duì)Products表的篩選。接下來(lái)我們就對(duì)Products進(jìn)行循環(huán)讀取值:
$.each(Products, function(i, n) {
str += "<p id='xuhao'>" + n.orderid+ "ID" + n.customerid + "</p>";
});
$.each(Products, function(i, n) {} 這里的Products就是我們的目標(biāo)Json數(shù)據(jù)中的表了了。i代表記錄的順序,從0開(kāi)始(0代表第一筆,1代表第二筆...),而n就代表對(duì)應(yīng)字段的值了。 對(duì)Img的讀取也是類似~~
如有不當(dāng)之處請(qǐng)指正,謝謝?。?
- JSON 數(shù)據(jù)格式詳解
- JSON 數(shù)據(jù)格式介紹
- 基于JSON數(shù)據(jù)格式詳解
- Json對(duì)象與Json字符串互轉(zhuǎn)(4種轉(zhuǎn)換方式)
- js 將json字符串轉(zhuǎn)換為json對(duì)象的方法解析
- 解析JSON對(duì)象與字符串之間的相互轉(zhuǎn)換
- JS對(duì)象與JSON格式數(shù)據(jù)相互轉(zhuǎn)換
- JavaScript中json對(duì)象和string對(duì)象之間相互轉(zhuǎn)化
- JS解析json數(shù)據(jù)并將json字符串轉(zhuǎn)化為數(shù)組的實(shí)現(xiàn)方法
- js實(shí)現(xiàn)數(shù)組轉(zhuǎn)換成json
- json對(duì)象與數(shù)組以及轉(zhuǎn)換成js對(duì)象的簡(jiǎn)單實(shí)現(xiàn)方法
- json數(shù)據(jù)格式常見(jiàn)操作示例
相關(guān)文章
JQuery獲取元素文檔大小、偏移和位置和滾動(dòng)條位置的方法集合
在ajax中經(jīng)常需要對(duì)元素的位置進(jìn)行精確的定位,此時(shí)不僅需要獲取元素自身的大小位置等屬性。還需要知道頁(yè)面、瀏覽器、滾動(dòng)條等的長(zhǎng)度和寬度。2010-01-01jquery下動(dòng)態(tài)顯示jqGrid以及jqGrid的屬性設(shè)置容易出現(xiàn)問(wèn)題的解決方法
jquery下動(dòng)態(tài)顯示jqGrid以及jqGrid的屬性設(shè)置容易出現(xiàn)問(wèn)題的解決方法,使用jqgrid的朋友可以參考下。2010-10-10jQuery使用數(shù)組編寫(xiě)圖片無(wú)縫向左滾動(dòng)
jQuery編程實(shí)現(xiàn)一組由8幅圖組成的圖片,進(jìn)入網(wǎng)頁(yè)初始時(shí)顯示前面4張,然后自動(dòng)向左滾動(dòng),直到屏幕顯示的是后4張時(shí)停止?jié)L動(dòng),需要的朋友可以參考下2012-12-12jquery簡(jiǎn)單實(shí)現(xiàn)外部鏈接用新窗口打開(kāi)的方法
這篇文章主要介紹了jquery簡(jiǎn)單實(shí)現(xiàn)外部鏈接用新窗口打開(kāi)的方法,涉及jQuery正則匹配http://開(kāi)頭外部鏈接網(wǎng)址的相關(guān)技巧,需要的朋友可以參考下2015-05-05jQuery插件Echarts實(shí)現(xiàn)的雙軸圖效果示例【附demo源碼下載】
這篇文章主要介紹了jQuery插件Echarts實(shí)現(xiàn)的雙軸圖效果,結(jié)合完整實(shí)例形式分析了Echarts插件制作雙軸圖效果的操作步驟與相關(guān)實(shí)現(xiàn)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03如何使用jquery控制CSS樣式,并且取消Css樣式(如背景色,有實(shí)例)
使用jquery控制CSS樣式,并且取消Css樣式的一個(gè)簡(jiǎn)單小實(shí)例,需要的朋友可以參考下2013-07-07jquery簡(jiǎn)單實(shí)現(xiàn)縱向的無(wú)縫滾動(dòng)代碼實(shí)例
這篇文章主要介紹了jquery簡(jiǎn)單實(shí)現(xiàn)縱向的無(wú)縫滾動(dòng),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04jQuery實(shí)現(xiàn)仿新浪微博浮動(dòng)的消息提示框(可智能定位)
這篇文章主要介紹了jQuery實(shí)現(xiàn)仿新浪微博浮動(dòng)的消息提示框,具有智能定位功能,涉及jQuery控制頁(yè)面元素浮動(dòng)效果的實(shí)現(xiàn)技巧,需要的朋友可以參考下2015-10-10jQuery實(shí)現(xiàn)三級(jí)菜單的代碼
上周新接手一個(gè)網(wǎng)站建設(shè)的活兒,其中有需要要jquery代碼實(shí)現(xiàn)三級(jí)菜單的需求,其實(shí)說(shuō)難也不難,下面小編把代碼分享給大家,供大家參考2016-05-05