How can I use the” map” function in JavaScript to transform the array of tasks into an object?

 In the context of Salesforce, here is the approach given of how you can use the “map” function in javascript to convert an array of tasks into an object with the task IDs as keys and task details as values:-

// Sample array of tasks

Const tasksArray = [

  { id: 1, title: ‘Task 1’, description: ‘Description of Task 1’ },

  { id: 2, title: ‘Task 2’, description: ‘Description of Task 2’ },

  { id: 3, title: ‘Task 3’, description: ‘Description of Task 3’ }

];

// Initialize an empty object to store the converted tasks

Const tasksObject = {};

// Using the map function to convert array to object

tasksArray.map(task => {

  // Extracting task properties

  Const { id, title, description } = task;

  // Adding task to tasksObject

  tasksObject[id] = { title, description };

});

Console.log(tasksObject);

Here is the example given in python programming language:-

# Sample list of tasks (array in JavaScript)

Tasks_list = [

    {‘id’: 1, ‘title’: ‘Task 1’, ‘description’: ‘Description of Task 1’},

    {‘id’: 2, ‘title’: ‘Task 2’, ‘description’: ‘Description of Task 2’},

    {‘id’: 3, ‘title’: ‘Task 3’, ‘description’: ‘Description of Task 3’}

]

# Initialize an empty dictionary to store the converted tasks

Tasks_dict = {}

# Using a for loop to convert list to dictionary

For task in tasks_list:

    # Extracting task properties

    Task_id = task[‘id’]

    Title = task[‘title’]

    Description = task[‘description’]

    # Adding task to tasks_dict

    Tasks_dict[task_id] = {‘title’: title, ‘description’: description}

Print(tasks_dict)

Here is the example given in HTML:-

 

    Task Management System

    

        /* CSS styles for tasks */

        .task {

            Margin-bottom: 10px;

            Padding: 10px;

            Border: 1px solid #ccc;

            Border-radius: 5px;

        }

        .task-title {

            Font-size: 18px;

            Font-weight: bold;

        }

        .task-description {

            Font-size: 14px;

            Color: #666;

        }

    Task Management System

        

        // Sample array of tasks (similar to JavaScript)

        Const tasksArray = [

            { id: 1, title: ‘Task 1’, description: ‘Description of Task 1’ },

            { id: 2, title: ‘Task 2’, description: ‘Description of Task 2’ },

            { id: 3, title: ‘Task 3’, description: ‘Description of Task 3’ }

        ];

        // Function to render tasks in the HTML

        Function renderTasks(tasks) {

            Const taskListDiv = document.getElementById(‘taskList’);

            taskListDiv[removed] = ‘’; // Clear existing content

            tasks.forEach(task => {

                const taskDiv = document.createElement(‘div’);

                taskDiv.classList.add(‘task’);

                const titleElem = document.createElement(‘div’);

                titleElem.classList.add(‘task-title’);

                titleElem.textContent = task.title;

                const descElem = document.createElement(‘div’);

                descElem.classList.add(‘task-description’);

                descElem.textContent = task.description;

                taskDiv.appendChild(titleElem);

                taskDiv.appendChild(descElem);

                taskListDiv.appendChild(taskDiv);

            });

        }

        // Render tasks on page load

        Document.addEventListener(‘DOMContentLoaded’, () => {

            renderTasks(tasksArray);

        });