【问题标题】:sort objects in array with dynamic keys使用动态键对数组中的对象进行排序
【发布时间】:2019-11-21 22:32:11
【问题描述】:

我正在尝试根据对象中的属性对动态键/值(对象)数组进行排序。有人可以给我一个如何做到这一点的例子。我会尝试创建与我的问题类似的结构

订单类别:

export class order {
  id: number; 
  productRank: number; 
  productId: number; 
  productName: string;
}

我的组件中有一个 storeOrders 可观察的订单数组

storeOrders$: Observable<Array<orders>>;

orders数组中的key是动态生成的,key/value作为key,order对象作为value存储

那么订单对象例如是这样的:

 let orders = {
12_123: { id: 123, productRank: 3, productId: 23, productName: 'shirt'},
23_124: { id: 124, productRank: 1, productId: 14, productName: 'cologne'},
67_124: { id: 125, productRank: 2, productId: 45, productName: 'belt' }       
 }

当我订阅此数据时,如何遍历 storeOrders 数组并根据 productRank 对项目进行排序。我一直在努力解决这个问题,但无法让它工作,有人可以指出如何迭代数组中的动态键并根据值对象中的属性进行排序吗?谢谢你,你的帮助真的很感激!

【问题讨论】:

  • 您的订单数组错误。很简单,数组中不能有键值对
  • @PratapA.K 是对的,你确定 orders 不是对象吗?

标签: javascript arrays angular typescript


【解决方案1】:

您的订单应该是如下的对象,

orders = {
    12_123: { id: 123, productRank: 3, productId: 23, productName: 'shirt' },
    23_124: { id: 124, productRank: 1, productId: 14, productName: 'cologne' },
    67_124: { id: 125, productRank: 2, productId: 45, productName: 'belt' }
  };

您可以使用Object.values(orders) 形成值

我习惯使用 lodash 库中的sortBy,你得到的排序值是

console.log(sortBy(Object.values(orders),['productRank']));

Stackblitz

【讨论】:

  • 在这里使用 loadash 真的没那么有用。只需 ordersValues = Object.values(orders); ordersValues.sort((o2, o1) =&gt; o2.productRank - o1.productRank); 即可开箱即用。
  • @Jeto 是的。我提到我习惯了lodash!甚至数组排序功能也应该像你提到的那样工作
  • @Aravind 感谢您的帮助,我为此苦苦挣扎了一分钟,尤其是迭代动态键让我失望
【解决方案2】:

要订购一个动态的键/值数组,您可以这样做:

数组示例:

arr = [
{de : 'germany'},
{fr : 'france'},
{uk : 'united kingdom'},
{tn : 'tunisia'}
]

arr.sort((a, b) => {

      const a_key = Object.keys(a);
      const a_value = a[a_key];
      const b_key = Object.keys(b);
      const b_value = b[b_key];

      if (a_value == b_value) return 0;
      return a_value > b_value ? 1 : -1;
    });

就是这样!

【讨论】:

    猜你喜欢
    • 2017-02-15
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-04-13
    • 2020-07-11
    • 1970-01-01
    • 2018-05-13
    • 1970-01-01
    相关资源
    最近更新 更多