如何在 React 中对给定的数据进行排序和过滤？

Posted 2023-02-22

【中文标题】如何在 React 中对给定的数据进行排序和过滤？

【英文标题】：How to sort and filter out given data in React?

【发布时间】：2021-01-09 20:29:36

【问题描述】：

鉴于以下数据：

按列表 ID 对项目进行分组 然后先按列表 id 再按名称对结果进行排序 过滤掉空白或空的名称。

[
"listId": 2, "name": "",
"listId": 1, "name": "Item 28",
"listId": 1, "name": "Item 270",
"listId": 3, "name": null,
"listId": 4, "name": null,
"listId": 2, "name": "Item 23",
"listId": 1, "name": null,
"listId": 2, "name": null,
"listId": 1, "name": "",
"listId": 3, "name": null,
"listId": 2, "name": null,
"listId": 2, "name": null,
"listId": 3, "name": "Item 68",
"listId": 2, "name": null,
"listId": 4, "name": "Item 53",
"listId": 4, "name": "",
"listId": 1, "name": null,
"listId": 2, "name": null,
]

非常感谢任何帮助！ :)

【问题讨论】：

什么不起作用？请添加您的代码。

sort 和 filter 祝你好运

【参考方案1】：

这里有一个可能适合您的解决方案：

const data = [
  "id": 755, "listId": 2, "name": "",
  "id": 203, "listId": 2, "name": "Item 456",
  "id": 684, "listId": 1, "name": "Item 684",
  "id": 276, "listId": 1, "name": "Item 276",
  "id": 736, "listId": 3, "name": null,
  "id": 926, "listId": 4, "name": null,
  "id": 808, "listId": 4, "name": "Item 808",
  "id": 599, "listId": 1, "name": null,
  "id": 424, "listId": 2, "name": null,
  "id": 444, "listId": 1, "name": "",
  "id": 809, "listId": 3, "name": "Item 789",
  "id": 293, "listId": 2, "name": null,
  "id": 510, "listId": 2, "name": null,
];

function removeNull( name ) 
  return Boolean(name);


function sortByIdThenName(a, b) 
  const n = a.listId - b.listId;
  // sort by listId
  if (n !== 0) 
    return n;
  
  // if listId is equal then sort by name
  return a.name.localeCompare(b.name);


const sorted = data.filter(removeNull).sort(sortByIdThenName);

console.log(sorted);

对以下 cmets 的回应

按名称中找到的数字 id 排序：

function sortByIdThenIdInName(a, b) 
  const n = a.listId - b.listId;
  // sort by listId
  if (n !== 0) 
    return n;
  
  // if listId is equal then sort by id in name
  const [, numericIdFromNameA] = a.name.split(' ');
  const [, numericIdFromNameB] = b.name.split(' ');
  
  return parseInt(numericIdFromNameA) - parseInt(numericIdFromNameB);

【讨论】：

您好，感谢您的帮助，是否可以将“Item 28”排在“Item 270”之前，而不是“Item 270”排在“Item 28”之前？如果是这样，我怎么能做到？

您需要拆分 id 编号并使用数值进行排序，因为我们使用的是 localeCompare，它是按字符串值排序的 1 10 100 2 20 200

我已经添加到我的答案中了??

【参考方案2】：

我的尝试。

var data = [
   "id": 755, "listId": 2, "name": "" ,
   "id": 203, "listId": 2, "name": "" ,
   "id": 684, "listId": 1, "name": "Item 684" ,
   "id": 276, "listId": 1, "name": "Item 276" ,
   "id": 736, "listId": 3, "name": null ,
   "id": 926, "listId": 4, "name": null ,
   "id": 808, "listId": 4, "name": "Item 808" ,
   "id": 599, "listId": 1, "name": null ,
   "id": 424, "listId": 2, "name": null ,
   "id": 444, "listId": 1, "name": "" ,
   "id": 809, "listId": 3, "name": null ,
   "id": 293, "listId": 2, "name": null ,
   "id": 510, "listId": 2, "name": null ,
]

var data = data.filter((d) => d.name)//clean before do anything
data.sort((a, b) => (a.name > b.name) ? 1 : ((b.name > a.name) ? -1 : 0));//https://***.com/questions/1129216/sort-array-of-objects-by-string-property-value
function groupBy(arr, key) //https://***.com/questions/14446511/most-efficient-method-to-groupby-on-an-array-of-objects
  return arr.reduce(function (rv, x) 
    (rv[x[key]] = rv[x[key]] || []).push(x);
    return rv;
  , );

console.log(groupBy(data, "listId"));