JS case study - Thay đổi cấu trúc của mảng các Object (Convert an Array Object to another array with different object)

Yêu cầu đưa ra:

Gửi lên Backend mảng có dạng sau, tạm gọi là arrayA:

[
    {
        "id": "597efe0e-d23c-4f99-bd53-56a788691725",
        "answersReq": [
            false,
            false,
            false,
            false
        ],
        "type": "Single"
    },
    {
        "id": "447a2c47-77e0-45e3-bcc9-c79f9f9514f1",
        "answersReq": [
            false,
            false,
            false,
            false
        ],
        "type": "Multiple"
    }
]

Mảng hiện tại đang xử lý ở Frontend, tạm gọi là arrayB:

    [
    {
        "id": "597efe0e-d23c-4f99-bd53-56a788691725",
        "isOpen": true,
        "type": "Single",
        "timerEnabled": true,
        "timerValue": 90,
        "timerUnit": "S",
        "question": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident aliquid quibusdam modi.",
        "options": [
            "Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident aliquid quibusdam modi.",
            "Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident aliquid quibusdam modi.",
            "Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident aliquid quibusdam modi.",
            "Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident aliquid quibusdam modi."
        ],
        "answers": null,
        "sortNo": 1
    },
    {
        "id": "447a2c47-77e0-45e3-bcc9-c79f9f9514f1",
        "isOpen": true,
        "type": "Multiple",
        "timerEnabled": true,
        "timerValue": 90,
        "timerUnit": "S",
        "question": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident aliquid quibusdam modi.",
        "options": [
            "Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident aliquid quibusdam modi.",
            "Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident aliquid quibusdam modi.",
            "Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident aliquid quibusdam modi.",
            "Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident aliquid quibusdam modi."
        ],
        "answers": null,
        "sortNo": 2
    }
]

Giải pháp

Chuyển đổi arrayB sang arrayA sử dụng hàm sau:

const transformQuestions = (originalArray) => {
    return originalArray?.map((item) => {
      return {
        id: item?.id,
        answersReq: Array(item?.options?.length).fill(false),
        type: item?.type,
      }
    })
  }

Giải thích code:

• Hàm transformQuestions nhận vào giá trị originalArray là arrayB
• Duyệt qua các phần tử trong originalArray (arrayB) sử dụng map
• Mỗi lần duyệt qua một phần tử trong originalArray, trả ra một object mới có các trường dữ liệu mới { id, answerReq, type }

Vì sao lại dùng map() mà không phải là forEach?

Cơ chế của hàm map() là tạo ra một array mới mà không làm thay đổi array cũ, khác với forEach là sẽ làm thay đổi array cũ.

forEach is a method that executes a provided function once for each element in an array. It does not return a new array, but instead modifies the original array. - Rohit Bansal