使用数组值从对象动态创建对象数组答案

【问题标题】：Dynamically create array of objects from the object with the array values使用数组值从对象动态创建对象数组
【发布时间】：2023-03-29 23:15:01
【问题描述】：

目前我有以下对象结构，

`让 selectedOptions = { “颜色”： { “id”：“2”， “价值观”：[ { “价值”：“红色”， “标签”：“红色”， “身份证”：1 }, { “价值”：“蓝色”， “标签”：“蓝色”， “身份证”：2 } ] }, “尺寸”： { “id”：“19”， “价值观”：[ { “价值”：“中等”， “标签”：“中”， “身份证”：2 } ] }, “演示”：{ “id”：“19”， “价值观”：[ { “价值”：“尼龙”， “标签”：“尼龙”， “身份证”：2 } ] } . . . ñ }; `

并且想从上面的对象创建对象数组，如下所示，

[
 { color: "red", size: "medium", demo: "neylon" },
 { color: "blue", size: "medium", demo: "neylon" }
]

我尝试了下面的方法，但没有成功 https://jsfiddle.net/6Lvb12e5/18/

let cArr = [];
for(key in selectedOptions) {
  selectedOptions[key].values.forEach(function(val,i) {
   cArr.push({ [key]: val.value  })
  })
}

谢谢

【问题讨论】：

如果size 有多个对象，你如何从中创建最终数组？
@AaminKhan - 例如 Size 包含另一个值 Small。那么最终的数组应该是[ { color: "red", size: "medium", demo: "neylon" }, { color: "red", size: "small", demo: "neylon" }, { color: "blue", size: "medium", demo: "neylon" }, { color: "blue", size: "small", demo: "neylon" } ]
“没有用”是什么意思？你能粘贴你错误的结果吗（我猜是cArr）？

标签： javascript arrays object underscore.js javascript-objects

【解决方案1】：

您可以获取所需的部分，例如 color、size 和 demo，并根据给定数据构建笛卡尔积。

const
    cartesian = (a, b) => a.reduce((r, v) => r.concat(b.map(w => [].concat(v, w))), []),
    options = { color: { id: "2", values: [{ value: "red", label: "Red", id: 1 }, { value: "blue", label: "Blue", id: 2 }] }, size: { id: "19", values: [{ value: "small", label: "Small", id: 1 }, { value: "medium", label: "Medium", id: 2 }] }, demo: { id: "19", values: [{ value: "neylon", label: "Neylon", id: 2 }] } },
    parts = Object
        .entries(options)
        .map(([k, { values }]) => [k, values.map(({ value }) => value)]),
    keys = parts.map(([key]) => key),
    result = parts
        .map(([, values]) => values)
        .reduce(cartesian)
        .map(a => Object.assign(...a.map((v, i) => ({ [keys[i]]: v }))));

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

【讨论】：

感谢@nina-scholz，它的工作。但是如果Size 或demo 对象有更多的Values，那么结果并不如预期。例如，如果Size 值有另一个值“小”，则结果应为[ { color: "red", size: "medium", demo: "neylon" }, { color: "red", size: "small", demo: "neylon" }, { color: "blue", size: "medium", demo: "neylon" }, { color: "blue", size: "small", demo: "neylon" } ]。

【解决方案2】：

我不确定这是不是最好的方法，甚至数据都丢失了，但作为评论，发布的内容很大，但可以尝试：

let selectedOptions = {
  "color": {
    "id": "2",
    "values": [
      {
        "value": "red",
        "label": "Red",
        "id": 1
      },
      {
        "value": "blue",
        "label": "Blue",
        "id": 2
      }
    ]
  },
  "size": {
    "id": "19",
    "values": [
      {
        "value": "medium",
        "label": "Medium",
        "id": 2
      }
    ]
  },
  "demo": {
    "id": "19",
    "values": [
      {
        "value": "neylon",
        "label": "Neylon",
        "id": 2
      }
    ]
  }
}; 

let cArr = [];
var obj = {};
var glob;
for(key in selectedOptions) {
  selectedOptions[key].values.forEach(function(val,i) {
  obj[key] = val.value;
  }
)
  glob = obj;
}
cArr.push(glob);
console.log(cArr)

【讨论】：