Detailed example of how JavaScript sorts and searches JSON data-JS Tutorial-php.cn

Detailed example of how JavaScript sorts and searches JSON data

黄舟

Release： 2017-07-24 15:54:17

Original

1896 people have browsed it

Today I will teach you how to use array methods to implement JSON data sorting and search functions. For specific example codes, please refer to this article.

When using AJAX to obtain data, most of the data returned in the background is json. Data, when developing programs, sometimes it is necessary to directly perform certain operations on these json data in the js program, such as sorting, searching, etc., instead of performing these operations on the database through AJAX requests.

Today I will teach you how to use array methods to implement these operations:

/*假设json就是后台传过来的json数据*/
 var test=[
  {
   price:15,
   id:1,
   description:&#39;这是第一个数据&#39;
  },{
   price:30,
   id:3,
   description:&#39;这是第二个数据&#39;
  },{
   price:5,
   id:2,
   description:&#39;这是第三个数据&#39;
  }
 ];

Copy after login

At this time, you can sort json data through the sort method of the array , we can encapsulate it into a function for convenient operation.

 var u=window.u||{};
 u.isArray=function(o) {
  return typeof o==&#39;object&#39;&&Object.prototype.toString.call(o).slice(8,-1).toLowerCase()==&#39;array&#39;;
 };
 /**
  * 对json数据按照一定规则进行排列
  * @param {array} array [需要排序的数组]
  * @param {string} type [排序时所依据的字段]
  * @param {boolean} asc  [可选参数，默认降序，设置为true即为升序]
  * @return {none}    [无返回值]
  */
 u.sort=function(array,type,asc) {
  if(!u.isArray(array)) throw new Error(&#39;第一个参数必须是数组类型&#39;);
  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]);
   }
  });
 };

Copy after login

You can also search json data through the filter method of the array. We can encapsulate it into a function for easy operation.

/**
  * 对json数组进行搜索
  * @param {array} array [需要排序的数组]
  * @param {string} type [需要检索的字段]
  * @param {string} value [字段中应包含的值]
  * @return {array}    [包含指定信息的数组]
  */
 u.search=function(array,type,value) {
  if(!u.isArray(array)) throw new Error(&#39;第一个参数必须是数组类型&#39;);
  var arr=[];
  arr=array.filter(function(a) { 
   return a[type].toString().indexOf(value)!=-1;
  });
  return arr;
 };

Copy after login

You can use the following method to test:

u.sort(test,&#39;price&#39;);
 var s=u.search(test,&#39;description&#39;,"一");
 console.table(test);
 console.table(s);

Copy after login

The test results are as shown below:

(index)	price	id	description
0	30	3	"This is the second data"
1	15	1	"This is the first data"
2	5	2	"This is the third data"

(index)	price	id	description
0	15	1	"This is the first data"

Summarize

The above is the detailed content of Detailed example of how JavaScript sorts and searches JSON data. For more information, please follow other related articles on the PHP Chinese website!