JavaScript가 JSON 데이터를 정렬하고 검색하는 방법에 대한 자세한 예

오늘은 배열 메소드를 사용하여 JSON 데이터 정렬 및 검색 기능을 구현하는 방법에 대해 설명하겠습니다. 구체적인 예제 코드는 이 기사를 참조하세요.

AJAX를 사용하여 데이터를 가져올 때 백그라운드에서 반환되는 대부분의 데이터는 json 데이터입니다. 프로그램 개발 중 AJAX 요청을 통해 데이터베이스에 대해 이러한 작업을 수행하는 대신 js 프로그램에서 이러한 json 데이터에 대해 정렬, 검색 등과 같은 특정 작업을 직접 수행해야 하는 경우가 있습니다.

오늘은 배열 메서드를 사용하여 이러한 작업을 구현하는 방법을 가르쳐 드리겠습니다.

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

이때 json 데이터는 배열의 정렬 메서드를 통해 정렬할 수 있으며 이를 함수로 캡슐화할 수 있습니다. 쉬운 조작.

 var u=window.u||{};
 u.isArray=function(o) {
  return typeof o=='object'&&Object.prototype.toString.call(o).slice(8,-1).toLowerCase()=='array';
 };
 /**
  * 对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('第一个参数必须是数组类型');
  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]);
   }
  });
 };

배열의 필터 방식을 통해 json 데이터를 검색할 수도 있으며, 이를 쉽게 작동할 수 있도록 함수로 캡슐화할 수도 있습니다.

/**
  * 对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('第一个参数必须是数组类型');
  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);

테스트 결과는 아래와 같습니다.

(index)	price	id	description
0	30	3	"두 번째 데이터입니다"
1	15	1	"첫 번째 데이터입니다"
2	5	2	"세번째 데이터입니다"

(index)	price	id	description
0	15	1	"첫 번째 데이터입니다"

요약

위 내용은 JavaScript가 JSON 데이터를 정렬하고 검색하는 방법에 대한 자세한 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!