Hướng dẫn chuyển đổi cấu trúc của mảng đối tượng trong JavaScript

Giới thiệu

Trong bài viết này, chúng ta sẽ tìm hiểu cách chuyển đổi cấu trúc của một mảng các đối tượng trong JavaScript. Điều này rất hữu ích khi chúng ta cần gửi dữ liệu từ Frontend lên Backend theo một định dạng nhất định.

Yêu cầu

Chúng ta có một mảng được gọi là arrayA mà cần chuyển đổi thành từ mảng arrayB. Dưới đây là các dạng của hai mảng này:

arrayA

json Copy

[
    {
        "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"
    }
]

arrayB

json Copy

[
    {
        "id": "597efe0e-d23c-4f99-bd53-56a788691725",
        "isOpen": true,
        "type": "Single",
        "timerEnabled": true,
        "timerValue": 90,
        "timerUnit": "S",
        "question": "Lorem ipsum dolor sit amet...",
        "options": [
            "Lorem ipsum dolor sit amet...",
            "Lorem ipsum dolor sit amet...",
            "Lorem ipsum dolor sit amet...",
            "Lorem ipsum dolor sit amet..."
        ],
        "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...",
        "options": [
            "Lorem ipsum dolor sit amet...",
            "Lorem ipsum dolor sit amet...",
            "Lorem ipsum dolor sit amet...",
            "Lorem ipsum dolor sit amet..."
        ],
        "answers": null,
        "sortNo": 2
    }
]

Giải pháp

Để chuyển đổi arrayB thành arrayA, ta sẽ sử dụng hàm transformQuestions. Dưới đây là mã nguồn của hàm:

javascript Copy

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 mã nguồn

Hàm transformQuestions: Chức năng của hàm này là nhận vào một mảng originalArray (ở đây là arrayB) và sẽ trả về một mảng mới với cấu trúc yêu cầu của arrayA.
Sử dụng map: Chúng ta sử dụng phương thức map() để lặp qua từng phần tử trong originalArray. Phương thức này sẽ trả về một mảng mới mà không làm thay đổi mảng cũ.

Tại sao lại dùng `map()` thay vì `forEach`?

Phương thức map() cho phép chúng ta tạo ra một mảng mới từ phần tử của mảng cũ mà không làm thay đổi mảng đó. Ngược lại, forEach chỉ lặp qua mảng mà không trả về giá trị, do đó không phù hợp cho yêu cầu chuyển đổi dữ liệu ở đây.

Kết luận

Việc chuyển đổi cấu trúc dữ liệu giữa các mảng trong JavaScript có thể thực hiện đơn giản nhưng rất hiệu quả nhờ vào các phương thức như map(). Nắm vững công cụ này sẽ giúp các lập trình viên xử lý và quản lý dữ liệu tốt hơn trong các ứng dụng web hiện đại.
source: viblo