JavaScript對(duì)JSON數(shù)據(jù)進(jìn)行排序和搜索
在使用AJAX獲取數(shù)據(jù)時(shí)后臺(tái)返回的大部分都是json數(shù)據(jù),在進(jìn)行程序開發(fā)時(shí)有時(shí)會(huì)需要直接對(duì)這些json數(shù)據(jù)在js程序中再進(jìn)行一定的操作,如排序、搜索等,而不是通過AJAX請(qǐng)求由數(shù)據(jù)庫進(jìn)行這些操作。
今天我就教給大家如何使用數(shù)組的方法來實(shí)現(xiàn)這些操作:
/*假設(shè)json就是后臺(tái)傳過來的json數(shù)據(jù)*/ var test=[ { price:15, id:1, description:'這是第一個(gè)數(shù)據(jù)' },{ price:30, id:3, description:'這是第二個(gè)數(shù)據(jù)' },{ price:5, id:2, description:'這是第三個(gè)數(shù)據(jù)' } ];
此時(shí)可以通過數(shù)組的sort方法對(duì)json數(shù)據(jù)進(jìn)行排序,我們可以將其封裝為一個(gè)函數(shù),方便操作。
var u=window.u||{}; u.isArray=function(o) { return typeof o=='object'&&Object.prototype.toString.call(o).slice(8,-1).toLowerCase()=='array'; }; /** * 對(duì)json數(shù)據(jù)按照一定規(guī)則進(jìn)行排列 * @param {array} array [需要排序的數(shù)組] * @param {string} type [排序時(shí)所依據(jù)的字段] * @param {boolean} asc [可選參數(shù),默認(rèn)降序,設(shè)置為true即為升序] * @return {none} [無返回值] */ u.sort=function(array,type,asc) { if(!u.isArray(array)) throw new Error('第一個(gè)參數(shù)必須是數(shù)組類型'); var asc=asc||false; array.sort(function(a,b) { if(!asc) { return parseFloat(b[type])-parseFloat(a[type]); } else { return parseFloat(a[type])-parseFloat(b[type]); } }); };
也可以通過數(shù)組的filter方法對(duì)json數(shù)據(jù)進(jìn)行搜索,我們可以將其封裝為一個(gè)函數(shù),方便操作。
/** * 對(duì)json數(shù)組進(jìn)行搜索 * @param {array} array [需要排序的數(shù)組] * @param {string} type [需要檢索的字段] * @param {string} value [字段中應(yīng)包含的值] * @return {array} [包含指定信息的數(shù)組] */ u.search=function(array,type,value) { if(!u.isArray(array)) throw new Error('第一個(gè)參數(shù)必須是數(shù)組類型'); var arr=[]; arr=array.filter(function(a) { return a[type].toString().indexOf(value)!=-1; }); return arr; };
可使用下面的方法進(jìn)行測試:
u.sort(test,'price'); var s=u.search(test,'description',"一"); console.table(test); console.table(s);
測試結(jié)果如下圖所示:
(index) | price | id | description |
---|---|---|---|
0 | 30 | 3 | “這是第二個(gè)數(shù)據(jù)” |
1 | 15 | 1 | “這是第一個(gè)數(shù)據(jù)” |
2 | 5 | 2 | “這是第三個(gè)數(shù)據(jù)” |
(index) | price | id | description |
---|---|---|---|
0 | 15 | 1 | “這是第一個(gè)數(shù)據(jù)” |
總結(jié)
以上所述是小編給大家介紹的JavaScript對(duì)JSON數(shù)據(jù)進(jìn)行排序和搜索,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
js簡單實(shí)現(xiàn)表單中點(diǎn)擊按鈕動(dòng)態(tài)增加輸入框數(shù)量的方法
這篇文章主要介紹了js簡單實(shí)現(xiàn)表單中點(diǎn)擊按鈕動(dòng)態(tài)增加輸入框數(shù)量的方法,涉及javascript鼠標(biāo)點(diǎn)擊事件及insertAdjacentHTML方法的相關(guān)使用技巧,需要的朋友可以參考下2015-08-08一文教你如何實(shí)現(xiàn)localStorage的過期機(jī)制
要知道localStorage本身并沒有提供過期機(jī)制,既然如此那就只能我們自己來實(shí)現(xiàn)了,這篇文章主要給大家介紹了關(guān)于如何實(shí)現(xiàn)localStorage過期機(jī)制的相關(guān)資料,需要的朋友可以參考下2022-02-02構(gòu)建一個(gè)JavaScript插件系統(tǒng)
這篇文章主要介紹了如何構(gòu)建一個(gè)JavaScript插件系統(tǒng),幫助大家更好的理解和使用JavaScript,感興趣的朋友可以了解下2020-10-10如何用JS WebSocket實(shí)現(xiàn)簡單聊天
這篇文章主要介紹了如何用JS WebSocket實(shí)現(xiàn)簡單聊天,對(duì)websocket感興趣的同學(xué),可以參考下2021-05-05java實(shí)現(xiàn)單鏈表增刪改查的實(shí)例代碼詳解
在本篇文章里小編給大家整理了關(guān)于java實(shí)現(xiàn)單鏈表增刪改查的實(shí)例內(nèi)容,需要的朋友們可以參考下。2019-08-08基于JavaScript實(shí)現(xiàn)div層跟隨滾動(dòng)條滑動(dòng)
項(xiàng)目需求是這樣的:在一個(gè)頁面放2個(gè)懸浮框,懸浮框隨頁面的上下滾動(dòng)有上下波動(dòng)的效果,最終固定在同一位置,下面通過本文給大家分享基于JavaScript實(shí)現(xiàn)div層跟隨滾動(dòng)條滑動(dòng)的相關(guān)資料,對(duì)js div跟隨滾動(dòng)條滑動(dòng)相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2016-01-01擴(kuò)展JS Date對(duì)象時(shí)間格式化功能的小例子
這篇文章主要介紹了擴(kuò)展JS Date對(duì)象時(shí)間格式化功能,有需要的朋友可以參考一下2013-12-12javascript設(shè)計(jì)模式 – 適配器模式原理與應(yīng)用實(shí)例分析
這篇文章主要介紹了javascript設(shè)計(jì)模式 – 適配器模式,結(jié)合實(shí)例形式分析了javascript適配器模式相關(guān)概念、原理、用法及操作注意事項(xiàng),需要的朋友可以參考下2020-04-04