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

59    Asked by ColinPayne in Salesforce , Asked on Jun 20, 2024

There is a scenario where I am trying to build a task management application. The users can add tasks, and each task has a unique ID. I have an array of the tasks with their IDs and I need to convert this array into an object where each of these task's IDs is the key and the corresponding task details are the values. 

Answered by David

 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);
        });

 



Your Answer

Interviews

Parent Categories