使用 lodash 从复杂数组中检索值答案

【问题标题】：Using lodash to retrieve values from a complex array使用 lodash 从复杂数组中检索值
【发布时间】：2018-11-28 14:00:09
【问题描述】：

我有以下复杂数组

[
   {
      label: "Country1",
      metrics: [
         {
            label: "xyz",
            metric: "xyz",
            value: 234184
         },
         {
            label: "abc",
            metric: "abc",
            value: 145678
         }
      ]
   },
   {
      label: "Country2",
      metrics: [
         {
            label: "xyz",
            metric: "xyz",
            value: 123456
         },
         {
            label: "abc",
            metric: "abc",
            value: 456789
         }
      ]
   },
   {
      label: "Country3",
      metrics: [
         {
            label: "xyz",
            metric: "xyz",
            value: 62389
         },
         {
            label: "abc",
            metric: "abc",
            value: 4964738
         }
      ]
   }
]

我需要将其转换为以下简单数组，其中从指标子数组标签和值的值成为键值对。

[
    {label: “Country1”, xyz: 234184, abc: 145678},
    {label: “Country2”, xyz: 123456, abc: 456789},
    {label: “Country3”, xyz: 62389, abc: 4964738}
]

这种转换可以使用 lodash 进行吗？

【问题讨论】：

您的问题没有代码，这使得其他人难以理解您在做什么以及您将如何处理它。请使用Minimal, Complete, and Verifiable example 和明确的问题说明更新您的帖子。

标签： lodash

【解决方案1】：

可能有更好/更清洁的方法来做到这一点，但这是我可以在几分钟内想到的。

const inputData = [
   {
      label: "Country1",
      metrics: [
         {
            label: "xyz",
            metric: "xyz",
            value: 234184
         },
         {
            label: "abc",
            metric: "abc",
            value: 145678
         }
      ]
   },
   {
      label: "Country2",
      metrics: [
         {
            label: "xyz",
            metric: "xyz",
            value: 123456
         },
         {
            label: "abc",
            metric: "abc",
            value: 456789
         }
      ]
   },
   {
      label: "Country3",
      metrics: [
         {
            label: "xyz",
            metric: "xyz",
            value: 62389
         },
         {
            label: "abc",
            metric: "abc",
            value: 4964738
         }
      ]
   }
];

const newData = _.map(inputData, first => {
  const additional = _.map(first.metrics, metric => [metric.label, metric.value]);
  return _.assign({}, _.fromPairs(additional), {
    label: first.label
  });
});
  
console.log(newData);

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.js"&gt;&lt;/script&gt;

【讨论】：

【解决方案2】：

这是一个不需要 lodash 的解决方案，您只需利用 Array#map 转换顶级数组中的每个项目，然后使用 Array#reduce 转换对象并获取其余部分您需要的属性。下面使用的方法利用了以下 ES6 特性：

Destructuring assignment 从Array#map 和Array#reduce 回调中提取属性。
Spread Syntax 组合来自不同来源的对象的属性。
Computed property names 用于对象中的动态属性名称。

var result = data.map(({ label, metrics }) =>
  metrics.reduce(
    (result, { metric, value }) => ({ ...result, [metric]: value }),
    { label }
  )
);

var data = [{label:"Country1",metrics:[{label:"xyz",metric:"xyz",value:234184},{label:"abc",metric:"abc",value:145678}]},{label:"Country2",metrics:[{label:"xyz",metric:"xyz",value:123456},{label:"abc",metric:"abc",value:456789}]},{label:"Country3",metrics:[{label:"xyz",metric:"xyz",value:62389},{label:"abc",metric:"abc",value:4964738}]}];

var result = data.map(({ label, metrics }) =>
  metrics.reduce(
    (result, { metric, value }) => ({ ...result, [metric]: value }),
    { label }
  )
);

console.log(result);

.as-console-wrapper{min-height:100%;top:0}

【讨论】：