javascript - 如何在我的特定情况下形成嵌套数组的数组？

Question

我有一个特定的用例，我想将一个数组中的所有对象组合成一个新数组。所以我在我的网站上有一个表格，用户在预订时正在添加参与者。他们可以根据需要添加任意数量的参与者。我将它们作为 JSON 保存在数据库中，现在我想形成一个所有参与者的数组，以便我可以在表中显示它们。

所以我首先从一个特定的列表中获取所有交易，这些交易我作为一个对象数组获得，然后我遍历它们，只获得transaction.attributes.protectedData.questions包含每个交易参与者的交易。

所以我的交易对象看起来像：

[
   {
      "type":"transaction",
      "attributes":{
         "createdAt":"2021-06-24T08:50:26.911Z",
         "protectedData":{
            "questions":[
               [
                  {
                     "question":"name",
                     "answer":"Mario North"
                  },
                  {
                     "question":"email",
                     "answer":"[e-mail]"
                  }
               ]
            ],
            "ticketType":{
               "name":"Main entry",
               "quantity":1
            }
         }
      }
   },
   {
      "type":"transaction",
      "attributes":{
         "createdAt":"2021-06-24T08:48:57.646Z",
         "protectedData":{
            "questions":[
               [
                  {
                     "question":"name",
                     "answer":"John Adkins"
                  },
                  {
                     "question":"email",
                     "answer":"[e-mail]"
                  }
               ],
               [
                  {
                     "question":"name",
                     "answer":"Thomas Smith"
                  },
                  {
                     "question":"email",
                     "answer":"[e-mail]"
                  }
               ]
            ],
            "ticketType":{
               "name":"General entry",
               "quantity":2
            }
         }
      }
   }
]

所以我需要遍历每个事务，然后遍历问题，问题数组中的每个新数组都是一个新参与者。在每个参与者中，我需要保存交易属性中的 createdAt 和 ticketType 值。

所以我的最终数组/对象需要如下所示：

[
   {
      "createdAt":"2021-06-24T08:50:26.911Z",
      "ticketType":"Main entry",
      "name":"Mario North",
      "email":"[e-mail]"
   },
   {
      "createdAt":"2021-06-24T08:48:57.646Z",
      "ticketType":"General entry",
      "name":"John Adkins",
      "email":"[e-mail]"
   },
   {
      "createdAt":"2021-06-24T08:48:57.646Z",
      "ticketType":"General entry",
      "name":"Thomas Smith",
      "email":"[e-mail]"
   }
]

所以我可以得到参与者列表，每个参与者都添加了 createdAt 和 ticketType。但我不知道如何才能让我的问题/答案显示为我在上面发布的我想要的对象。这就是我所拥有的：

export const denormalisedParticipantList = transactions => {
  let participants = [];

  transactions.map(transaction => {
    const createdAt = transaction.attributes.createdAt;
    const questions = transaction.attributes.protectedData?.questions;
    const ticketType = transaction.attributes.protectedData?.ticketType?.name;

    return questions.map(q => {
      // Form new participant object
      const participant = {
        createdAt,
        ticketType,
        ...Object.fromEntries(q.map(({ question, answer }) => [question, answer])),
      };

      // Push new participant
      participants.push(participant);
    });
  });

  return participants;
};

从昨晚开始，我一直在努力解决这个问题，但我无法让它发挥作用。谁能帮我弄清楚如何从我的交易对象中制作一个最终数组，我将非常感激。

标签： javascriptarraysjsonreactjs

Answer 1

解构可以成为跟踪您在复杂对象中访问的内容的有效方式。在这里flatMap()返回单个展平数组并将数组Object.fromEntries()映射questions到单个对象。

const input = [{ "type": "transaction", "attributes": { "createdAt": "2021-06-24T08:50:26.911Z", "protectedData": { "questions": [[{ "question": "name", "answer": "Mario North" }, { "question": "email", "answer": "[e-mail]" }]], "ticketType": { "name": "Main entry", "quantity": 1 } } } }, { "type": "transaction", "attributes": { "createdAt": "2021-06-24T08:48:57.646Z", "protectedData": { "questions": [[{ "question": "name", "answer": "John Adkins" }, { "question": "email", "answer": "[e-mail]" }], [{ "question": "name", "answer": "Thomas Smith" }, { "question": "email", "answer": "[e-mail]" }]], "ticketType": { "name": "General entry", "quantity": 2 } } } }]

const result = input.flatMap((
  {
    attributes: {
      createdAt,
      protectedData: {
        questions,
        ticketType: { name: ticketType } }
    }
  }
) => (
  questions.map(p => ({
    createdAt,
    ticketType,
    ...Object.fromEntries(p.map(({ question, answer }) => [question, answer]))
  }))
));

console.log(result)

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