Typescript按状态（字符串值）对列表进行排序

huangapple
go评论104阅读模式
英文:

Typescript sorting list by status (string value)

问题

我需要按照状态对项目列表进行排序，但我不确定应该使用哪种方法，是创建比较器还是某种排序技巧？
是否可以在这里使用 lodash？

示例输入列表：

  1. [
  2. {id: 1, name: "name1", status: "Failed"},
  3. {id: 2, name: "name2", status: "Success"},
  4. {id: 3, name: "name3", status: "In progress"},
  5. {id: 4, name: "name4", status: "Reserved"},
  6. {id: 5, name: "name5", status: "Pending"}
  7. ]

示例排序后的列表（输出）按照 Failed -> In progress -> Reserved -> Pending -> Success 排序：

  1. [
  2. {id: 1, name: "name1", status: "Failed"},
  3. {id: 3, name: "name3", status: "In progress"},
  4. {id: 4, name: "name4", status: "Reserved"},
  5. {id: 5, name: "name5", status: "Pending"},
  6. {id: 2, name: "name2", status: "Success"}
  7. ]

我使用的堆栈是 Angular + Typescript。

编辑：列表通常很大，大约有~15k行。

英文:

I need to sort list of items by its status and I am not sure which approach I should go, is it creating comparer or some kind of sorting technique ?
Would lodash work here ?

example input list:

  1. [
  2. {id: 1, name: "name1", status: "Failed"},
  3. {id: 2, name: "name2", status: "Success"},
  4. {id: 3, name: "name3", status: "In progress"},
  5. {id: 4, name: "name4", status: "Reserved"},
  6. {id: 5, name: "name5", status: "Pending"}
  7. ]

example sorted list (output) sorted in Failed -> In progress -> Reserved -> Pending -> Success

  1. [
  2. {id: 1, name: "name1", status: "Failed"},
  3. {id: 3, name: "name3", status: "In progress"},
  4. {id: 4, name: "name4", status: "Reserved"},
  5. {id: 5, name: "name5", status: "Pending"}
  6. {id: 2, name: "name2", status: "Success"},
  7. ]

stack I am using is Angular + Typescript.

Edit: List is kinda big, about ~15k rows usually.

答案1

得分: 9

你可以根据另一个数组中的值对你的数组进行排序：

  1. let sortOrder = ['Failed', 'In progress', 'Reserved', 'Pending', 'Success'];
  2. let array = [
  3.     { id: 1, name: "name1", status: "Failed" },
  4.     { id: 2, name: "name2", status: "Success" },
  5.     { id: 3, name: "name3", status: "In progress" },
  6.     { id: 4, name: "name4", status: "Reserved" },
  7.     { id: 5, name: "name5", status: "Pending" }
  8. ];
  10. array.sort((a, b) => {
  11.     return sortOrder.indexOf(a.status) - sortOrder.indexOf(b.status);
  12. });
  14. console.log(array);
英文:

You can sort your array based on values in other array:

  1. let sortOrder = ['Failed', 'In progress', 'Reserved', 'Pending', 'Success'];
  2. let array = [
  3.     { id: 1, name: "name1", status: "Failed" },
  4.     { id: 2, name: "name2", status: "Success" },
  5.     { id: 3, name: "name3", status: "In progress" },
  6.     { id: 4, name: "name4", status: "Reserved" },
  7.     { id: 5, name: "name5", status: "Pending" }
  8. ];
  10. array.sort((a, b) => {
  11.     return sortOrder.indexOf(a.status) - sortOrder.indexOf(b.status);
  12. });
  14. console.log(array);

答案2

得分: 0

你可以使用以下代码中的 sort() 来根据状态对数组进行排序。

  1. const data = [
  2.   { id: 1, name: "name1", status: "Failed" },
  3.   { id: 2, name: "name2", status: "Success" },
  4.   { id: 3, name: "name3", status: "In progress" },
  5.   { id: 4, name: "name4", status: "Reserved" },
  6.   { id: 5, name: "name5", status: "Pending" }
  7. ]
  9. function sortBy(data: any): any {
  10.   const order = ['Failed', 'In progress', 'Reserved', 'Pending', 'Success']
  11.   var ordering: any = {};
  12.   for (var i = 0; i < order.length; i++)
  13.     ordering[order[i]] = i;
  14.   var result = data.sort(function(a: any, b: any) {
  15.     return (ordering[a.status] - ordering[b.status]) || a.status.localeCompare(b.status);
  16.   });
  17.   return result;
  18. }
  20. console.log(sortBy(data));

查看示例 https://repl.it/repls/KnowingRareNlp

英文:

You can sort using sort() as below to sort the array using status.

  1. const data = [
  2.   { id: 1, name: &quot;name1&quot;, status: &quot;Failed&quot; },
  3.   { id: 2, name: &quot;name2&quot;, status: &quot;Success&quot; },
  4.   { id: 3, name: &quot;name3&quot;, status: &quot;In progress&quot; },
  5.   { id: 4, name: &quot;name4&quot;, status: &quot;Reserved&quot; },
  6.   { id: 5, name: &quot;name5&quot;, status: &quot;Pending&quot; }
  7. ]
  9. function sortBy(data: any): any {
  10.   const order = [&#39;Failed&#39;, &#39;In progress&#39;, &#39;Reserved&#39;, &#39;Pending&#39;, &#39;Success&#39;]
  11.   var ordering: any = {};
  12.   for (var i = 0; i &lt; order.length; i++)
  13.     ordering[order[i]] = i;
  14.   var result = data.sort(function(a: any, b: any) {
  15.     return (ordering[a.status] - ordering[b.status]) || a.status.localeCompare(b.status);
  16.   });
  17.   return result;
  18. }
  20. console.log(sortBy(data));

Checkout the example https://repl.it/repls/KnowingRareNlp

答案3

得分: 0

要按自定义顺序对数据进行排序，您可以首先对项目进行分组，然后根据您的排序顺序将它们添加到最终输出中。

尝试这样做：

  1. constructor() {
  2.   var groupedData = this.groupBy(this.data, "status");
  3.   var sortArrangement = ["Failed", "In progress", "Reserved", "Pending", "Success"]
  4.   sortArrangement.forEach(item => {
  5.     groupedData[item].forEach(x => {
  6.       this.result.push(x)
  7.     })
  8.   })
  9.   console.log(this.result)
  10. }
  12. groupBy(xs, key) {
  13.   return xs.reduce(function(rv, x) {
  14.     (rv[x[key]] = rv[x[key]] || []).push(x);
  15.     return rv;
  16.   }, {});
  17. }

工作示例

注意：您也可以将此逻辑移到一个管道中。

英文:

To sort the data in custom order, you can group the items first and then based on your sort order, add them to the final output.

Try like this:

  1.   constructor() {
  2.     var groupedData = this.groupBy(this.data, &quot;status&quot;);
  3.     var sortArrangement = [&quot;Failed&quot;, &quot;In progress&quot;, &quot;Reserved&quot;, &quot;Pending&quot;, &quot;Success&quot;]
  4.     sortArrangement.forEach(item =&gt; {
  5.       groupedData[item].forEach(x =&gt; {
  6.         this.result.push(x)
  7.       })
  8.     })
  9.     console.log(this.result)
  10.   }
  12.   groupBy(xs, key) {
  13.     return xs.reduce(function(rv, x) {
  14.       (rv[x[key]] = rv[x[key]] || []).push(x);
  15.       return rv;
  16.     }, {});
  17.   }

Working Demo

Note: You can move this logic to a pipe as well.

答案4

得分: 0

要按任意值排序，创建一个映射或对象，为每个状态分配数值权重，然后使用 Array.sort() 或 lodash 的 _.orderBy()，根据状态从映射中获取权重：

  1. const arr = [
  2.   {"id": 1, "name": "name1", "status": "Failed"},
  3.   {"id": 2, "name": "name2", "status": "Success"},
  4.   {"id": 3, "name": "name3", "status": "In progress"},
  5.   {"id": 4, "name": "name4", "status": "Reserved"},
  6.   {"id": 5, "name": "name5", "status": "Pending"}
  7. ];
  9. const order = new Map([
  10.   ['Failed', 0],
  11.   ['In progress', 1],
  12.   ['Reserved', 2],
  13.   ['Pending', 3],
  14.   ['Success', 4]
  15. ]);
  17. const result = _.orderBy(arr, o => order.get(o.status));
  19. console.log(result);
  1. <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.js"></script>
英文:

To sort by an arbitrary value, create a Map or an object that gives numeric weight to each status, and then use Array.sort() or lodash's _.orderBy(), and get the weight from the map according to the status:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. const arr = [{&quot;id&quot;:1,&quot;name&quot;:&quot;name1&quot;,&quot;status&quot;:&quot;Failed&quot;},{&quot;id&quot;:2,&quot;name&quot;:&quot;name2&quot;,&quot;status&quot;:&quot;Success&quot;},{&quot;id&quot;:3,&quot;name&quot;:&quot;name3&quot;,&quot;status&quot;:&quot;In progress&quot;},{&quot;id&quot;:4,&quot;name&quot;:&quot;name4&quot;,&quot;status&quot;:&quot;Reserved&quot;},{&quot;id&quot;:5,&quot;name&quot;:&quot;name5&quot;,&quot;status&quot;:&quot;Pending&quot;}]
  3. const order = new Map([[&#39;Failed&#39;, 0], [&#39;In progress&#39;, 1], [&#39;Reserved&#39;, 2], [&#39;Pending&#39;, 3], [&#39;Success&#39;, 4]])
  5. const result = _.orderBy(arr, o =&gt; order.get(o.status))
  7. console.log(result)

<!-- language: lang-html -->

  1. &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.js&quot;&gt;&lt;/script&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2020年1月3日 14:50:50
  • 转载请务必保留本文链接：https://go.coder-hub.com/59574334.html
  • angular
  • lodash
  • typescript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定