【问题标题】:Javascript: How to convert and map an object containing objects into an array?Javascript:如何将包含对象的对象转换和映射到数组中?
【发布时间】:2020-04-26 12:37:58
【问题描述】:

在Javascript中,如何映射和转换这个对象:

  {
    0: {k1 : v1},
    2: {k2 : v2}
  }

到这个数组:

[
    {
        label: k1,
        value: v1
    },
    {
        label: k2,
        value: v2
    }
]

obs.:单行词很好,但欢迎所有答案。

我无法得到想要的结果,但我盲目地遵循以下公式:

const objectMap = (obj, fn) =>
  Object.fromEntries(
    Object.entries(obj).map(
      ([k, v], i) => [i, fn(v, k, i)]
    )
  )
const cfieldsFinal = objectMap(modcf, (k, v) => ({
  label: v,
  value: k
}))

这几乎是我需要的,除了它仍然是一个对象:

output => {0: {label: k1, value: v1}, 1: {label: k2, value:  v2}}

所以,只有像我这样的菜鸟才会卡在这部分……

【问题讨论】:

    标签: javascript arrays object ecmascript-6 map-function


    【解决方案1】:

    你已经很接近了,你只需要手动构造对象。首先使用Array.values()data 转换为数组。使用Array.flatMap() 迭代数组以展平由内部映射创建的子数组。将每个对象转换为 [key, value] 对的数组。映射每一对,并创建一个对象。

    const data = {0: { k1: 'v1' }, 2: { k2: 'v2' }}
    
    const result = Object.values(data) // convert data to an array
      .flatMap(o => // map to a flattend array
        Object.entries(o) // get the entries of each object 
          .map(([label, value]) => ({ label, value })) // create a new object from each entry
      )
      
    console.log(result)

    【讨论】:

    • 谢谢 Ori 和 zero298。难怪我不能简单地推断出一种方法来做一些显然如此微不足道的事情......
    • 不客气。不要害怕问/回答。有些现在看起来微不足道的事情,需要时间来学习和发展。
    【解决方案2】:

    const foo = {
      0: {
        k1: "v1"
      },
      2: {
        k2: "v2"
      }
    };
    
    /*
    [
        {
            label: k1,
            value: v1
        },
        {
            label: k2,
            value: v2
        }
    ]
    */
    
    const oe = Object.entries;
    const bar = oe(foo).map(([k, v]) => {
      const [label, value] = oe(v)[0];
      return {
        label,
        value
      };
    });
    
    console.log(bar);

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2015-01-03
      • 2017-04-23
      • 1970-01-01
      • 1970-01-01
      • 2023-02-06
      • 2020-11-09
      • 2017-09-11
      相关资源
      最近更新 更多