React - 如何将嵌套的 object 转换为数组

Question

我有以下 object，我想将其转换为 object 的数组，并且数组中的每个 object 都有键：value[0]。

object：

const obj = {
   comedy: ['book1', 'book2'],
   action: ['book3', 'book4'],
   drama: ['book5'],
}

output

const arr = [
{comedy: 'book1'},
{comedy: 'book2'},
{action: 'book3'},
{action: 'book4'},
{drama: 'book5'},
]

到目前为止，我已经尝试通过循环和使用Object.entries来解决这个问题。 但我没有得到我需要的 output。

let result = [];

for(const [key1, value1] of Object.entries(arr)) {
  for (const [key2, value2] of Object.entries(value1)) {
    if(result[key2]) {
      result[key2] [key1] = value2
    } else {
      result[key2] = {[key1]: value2}
    }
  }
}

console.log(result)

我还尝试循环调用 function 内部。 （我找到了这个寻找答案的方法）。 但它会陷入无限循环。

const result = [];

const getArray = (obj) => {
  if (!obj) return;

  const {keys, ...rest} = obj;
  result.push({...rest});
  getArray(keys);
}

console.log('here', getArray(arr));

Answer 1

 const obj = { comedy: ['book1', 'book2'], action: ['book3', 'book4'], drama: ['book5'], } const result = Object.keys(obj).reduce((acc, key) => [...acc, ...obj[key].map((value) => ({[key]: value}))], [] ) console.log(result)

Answer 2

尝试这个

function nestedObjectIntoArray(obj) {
  const arr = [];
  for (const key in obj) {
    for (const value of obj[key]) {
      const obj = {};
      obj[key] = value;
      arr.push(obj);
    }
  }
  return arr;
}

const obj = {
  comedy: ["book1", "book2"],
  action: ["book3", "book4"],
  drama: ["book5"],
};

console.log(nestedObjectIntoArray(obj));

Answer 3

您可以对obj的条目使用 reduce，为数组值中的每个条目将对象添加到累加器：

 const obj = { comedy: ['book1', 'book2'], action: ['book3', 'book4'], drama: ['book5'], } const arr = Object.entries(obj).reduce((acc, [k, v]) => acc.concat(v.map(b => ({ [k]: b }))), [] ) console.log(arr)

Answer 4

 const obj = { comedy: ['book1', 'book2'], action: ['book3', 'book4'], drama: ['book5'], } let result = Object.entries(obj).flatMap(([k,v]) => v.map(n => ({[k]:n})) ) console.log(result)

Answer 5

我们也可以通过使用Array.forEach()方法来实现这一点。

现场演示：

 // Input object const obj = { comedy: ['book1', 'book2'], action: ['book3', 'book4'], drama: ['book5'], }; // Declare a variable to store the final result. const arr = []; // Iterate the input object based on the keys and build the final object. Object.keys(obj).forEach(key => { obj[key].forEach(item => { arr.push({ [key]: item }) }) }); // Result console.log(arr);