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

【问题标题】：How to sort and filter out given data in React?如何在 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 祝你好运

标签： javascript json reactjs

【解决方案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://stackoverflow.com/questions/1129216/sort-array-of-objects-by-string-property-value
function groupBy(arr, key) {//https://stackoverflow.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"));

【讨论】：