在 React 中转换对象的对象

Question

我对 JS 和 React 还很陌生，但遇到以下问题（也许很简单，但我不知道如何解决）。

这是我拥有的对象：

{
  React: {
    title: 'React',
    questions: [
      {
        question: 'What is React?',
        answer: 'A library for managing user interfaces'
      },
      {
        question: 'Where do you make Ajax requests in React?',
        answer: 'The componentDidMount lifecycle event'
      }
    ]
  },
  JavaScript: {
    title: 'JavaScript',
    questions: [
      {
        question: 'What is a closure?',
        answer: 'The combination of a function and the lexical environment within which that function was declared.'
      }
    ]
  }
}

这就是我需要的：

[
  { title: "React", questions: 2},
  { title: "JavaScript", questions: 1}
]

我已经尝试过Object.keys，然后对其进行映射 - 这给了我一个新数组中的标题或问题。

Answer 1

您可以映射Object.values 并提取您需要的值。

const data = {
  React: {
    title: 'React',
    questions: [{
        question: 'What is React?',
        answer: 'A library for managing user interfaces'
      },
      {
        question: 'Where do you make Ajax requests in React?',
        answer: 'The componentDidMount lifecycle event'
      }
    ]
  },
  JavaScript: {
    title: 'JavaScript',
    questions: [{
      question: 'What is a closure?',
      answer: 'The combination of a function and the lexical environment within which that function was declared.'
    }]
  }
}

console.log(
  Object.values(data).map(({
    title,
    questions: {
      length: questions
    }
  }) => ({
    title,
    questions
  }))
)

Answer 2

Object.keys 是要走的路。

const data = {
  React: {
    title: 'React',
    questions: [
      {
        question: 'What is React?',
        answer: 'A library for managing user interfaces'
      },
      {
        question: 'Where do you make Ajax requests in React?',
        answer: 'The componentDidMount lifecycle event'
      }
    ]
  },
  JavaScript: {
    title: 'JavaScript',
    questions: [
      {
        question: 'What is a closure?',
        answer: 'The combination of a function and the lexical environment within which that function was declared.'
      }
    ]
  }
};

const newArray = Object.keys(data).map((key) => {
  return {
    title: data[key].title,
    questions: data[key].questions.length
  }
});

console.log(newArray)

Answer 3

使用lodash的reduce更加清晰简单，因为它可以像数组一样迭代对象：

import { reduce } from 'lodash';

const newData = reduce(
  data,
  (acc, { title, questions }) => [
    ...acc,
    { title, questions: questions.length },
  ],
  []
);