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

