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

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":"mario@gmail.com"
                  }
               ]
            ],
            "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":"john@gmail.com"
                  }
               ],
               [
                  {
                     "question":"name",
                     "answer":"Thomas Smith"
                  },
                  {
                     "question":"email",
                     "answer":"thomas@gmail.com"
                  }
               ]
            ],
            "ticketType":{
               "name":"General entry",
               "quantity":2
            }
         }
      }
   }
]

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

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

[
   {
      "createdAt":"2021-06-24T08:50:26.911Z",
      "ticketType":"Main entry",
      "name":"Mario North",
      "email":"mario@gmail.com"
   },
   {
      "createdAt":"2021-06-24T08:48:57.646Z",
      "ticketType":"General entry",
      "name":"John Adkins",
      "email":"john@gmail.com"
   },
   {
      "createdAt":"2021-06-24T08:48:57.646Z",
      "ticketType":"General entry",
      "name":"Thomas Smith",
      "email":"thomas@gmail.com"
   }
]

所以我可以得到参与者列表，每个参与者都添加了 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;
};

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

Answer 1

Destructuring 可以成为跟踪您在复杂对象中访问的内容的有效方法。这里使用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": "mario@gmail.com" }]], "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": "john@gmail.com" }], [{ "question": "name", "answer": "Thomas Smith" }, { "question": "email", "answer": "thomas@gmail.com" }]], "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; }

Answer 2

var array = []
data.forEach((element) => {
var object = { created: null,ticketType: null,name: null,email: null }
object.created = element.attributes.createdAt;
object.ticketType = element.attributes.protectedData.ticketType.name;
var tmp_data = element.attributes.protectedData.questions;
tmp_data.forEach((tmp) => {
    tmp.forEach((item) => {
        if(item.question == "name"){
            object.name = item.answer;
        }else{
            object.email = item.answer;
        }
    })
    array.push(object);
})
})

试试这个:)

Answer 3

您可以简单地使用reduce 和map。

const data = [{ "type": "transaction", "attributes": { "createdAt": "2021-06-24T08:50:26.911Z", "protectedData": { "questions": [[{ "question": "name", "answer": "Mario North" }, { "question": "email", "answer": "mario@gmail.com" }]], "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": "john@gmail.com" }], [{ "question": "name", "answer": "Thomas Smith" }, { "question": "email", "answer": "thomas@gmail.com" },{ "question": "gender", "answer": "male" }]], "ticketType": { "name": "General entry", "quantity": 2 } } } }]


const output = data.reduce(
  (a, b) => [
    ...a,
    ...b.attributes.protectedData.questions.map(e => ({
      createdAt: b.attributes.createdAt,
      ticketType: b.attributes.protectedData.ticketType.name,
      ...e.reduce((acc, cur) => ({ ...acc, [cur.question]: cur.answer }), {}),
    })),
  ],
  []
);

console.log(output);

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