Json过滤数据并按顺序排序



json相当大,所以我需要能够通过以下方式过滤数据:

  • 姓名
  • 国家/地区检查严重性(严重、警告、正常)

并按以下方式对数据进行排序:

  • 名称
  • 创建
  • 修改的

我创建了json,但我不知道如何过滤或排序它们。

JS:

$(document).ready(function () {
var showData = $('#results');
$.getJSON('screenings.json', function (data) {
console.log(data);
var results = data.results.map(function (item) {
return ' Created: ' + item.created + ' Modified: ' + item.modified + ' Name: ' + item.name + ': ' + item.country_check_unknown_severity;
});
showData.empty();
if (results.length) {
var content = '<li>' + results.join('</li><li>') + '</li>';
var list = $('<ul />').html(content);
showData.append(list);
}
});
showData.text('Loading the JSON file.');
});
$.getJSON('screenings.json', function (data) {
// 1 - Generate the objects
var results = data.results.map(function(item) {
var o = {};
o['Created'] = item.created;
o['Modified'] = item.modified;
o['Name'] = item.name;
o['CCUS'] = item.country_check_unknown_severity;
return o;
});
// 2 - Sort the objects
// the sort function (takes two object compares them depending on the key, and sort order)
function sortFN(key, ascendant, a, b) {
var num = ascendant? 1: -1;
if(a[key] < b[key]) return -num; // return negative if a less than b
if(a[key] > b[key]) return  num; // return positive if b less than a
return 0; // return 0 if they are the same
}
results.sort(sortFN.bind(null, 'Name', true)); // call sort on objects (explaining bellow)

// 3 - Generate the strings (generate the strings in any form you want)
var strings = results.map(function(o){
var str = "";
str += "Name: " + o["Name"] + '<br>';
str += "Modified: " + o["Modified"] + '<br>';
str += "Created: " + o["Created"] + '<br>';
str += "CCUS: " + o["CCUS"] + '<br><br>';
return str;
})

// 4 - Show data (show the generated strings)
showData.empty();
if (strings.length) {
var content = '<li>' + strings.join('</li><li>') + '</li>';
var list = $('<ul />').html(content);
showData.append(list);
}
});

排序方法的解释:Array.prototype.sort接受一个回调(函数引用),该回调将传递给它数组的两个元素。然后,回调比较传递给它的两个元素,如果第一个元素小于第二个元素,则返回-1;如果第二个对象小于第一个元素,返回+1;如果两个对象相同,则返回0。现在,通常的排序调用是results.sort(sortFN),但由于sortFN需要4个参数而不是2个,所以我们设法使用sortFN.bind来实现。这种方式非常灵活,因为您可以使用所需的任何键按任何顺序对数组进行排序。所以使用这个:

results.sort(sortFN.bind(null, 'Name', false)); // to sort the results array using the key ('Name') in the descending order (false)
// Or...
results.sort(sortFN.bind(null, 'Modified', true)); // to sort it using the key ('Modified') in the ascending order (true)
//...

请注意,日期排序可能不准确,因为它比较的是字符串而不是实际日期。如果您想要更准确的方法,请创建一个函数sortDatesFN,并将其传递给sort而不是sortFN

过滤:

// 1.5 - Filter objects (this is better be before the sort)
// the filter function (check if a string (value) exist inside the string (o[key])
function filterFN(key, value, o) {
var prop = o[key].toLowerCase();
return prop.indexOf(value.toLowerCase()) !== -1; // return true or false (true if prop includes value, false otherwise)
}
results = results.filter(filterFN.bind(null, "CCUS", "warning")); // will filter all objects that have warning in their CCUS property
// 2 - Sort goes here
...

请注意,过滤可以多次进行。您可以按名称过滤结果,例如,再按CCUS过滤过滤后的重复使用。

filter进行回调,并将数组中的每一项都赋予它,如果回调返回true,则将其存储在一个新数组中。为了使过滤器更加灵活(采用三个参数而不是一个参数),需要调用.bind(与上面的sort相同)。所以使用这个:

results = results.filter(filterFN.bind(null, "CCUS", "warning")); // to filter just the object that have "warning" in their CCUS property
// OR...
results = results.filter(filterFN.bind(null, "Name", "s")); // to filter the object that have the character 's' in their Name property.
//...

这可以使用正则表达式来完成(value将是正则表达式),而不是检查return prop.indexOf(valu...,它将是return value.test(prop);。(当然,如果你熟悉正则表达式。这对于你提到的需求来说是不必要的。我只是想让你知道它可以用另一种方式来完成)。

最新更新