Leveraging the power of map function to transform arrays in Javascript

Question

Leveraging the power of map function to transform arrays in Javascript

I have a JSON object structured like this:

{
   "id": 12,
   "firstName": "Mohamed",
   "lastName": "Sameer",
   "contactgroups": [
      {
         "id": 16,
         "group": {
            "id": 4,
            "groupname": "Angular"
         }
      },
      {
         "id": 19,
         "group": {
            "id": 5,
            "groupname": "React"
         }
      },
      {
         "id": 20,
         "group": {
            "id": 6,
            "groupname": "Node"
         }
      }
   ]
}

Desired output format:

{
   "id": 12,
   "firstName": "Mohamed",
   "lastName": "Sameer",
   "groups": [4, 5, 6] // retrieved from 'group' object with id and groupname //
}

I am looking to accomplish this using JavaScript methods without resorting to for loops.

Can it be achieved using the map method?

This was my attempt:

const data = {
   "id": 12,
   "firstName": "Mohamed",
   "lastName": "Sameer",
   "contactgroups": [
      {
         "id": 16,
         "group": {
            "id": 4,
            "groupname": "Angular"
         }
      },
      {
         "id": 19,
         "group": {
            "id": 5,
            "groupname": "React"
         }
      },
      {
         "id": 20,
         "group": {
            "id": 6,
            "groupname": "Node"
         }
      }
   ]
}

const finalData = data.contactgroups.map(x => ({
   id: data.id,
   firstName: data.firstName,
   lastName: data.lastName,
   groups: [x.group.id]
}));

console.log(finalData);

javascript arrays json object

Answer 1

Answer №1

Consider trying out something similar to the following code snippet. By the way, I've utilized ES6 syntax here.

let user = {
   "id": 12,
   "firstName": "Mohamed",
   "lastName": "Sameer",
   "contactgroups": [
      {
         "id": 16,
         "group": {
            "id": 4,
            "groupname": "Angular"
         }
      },
      {
         "id": 19,
         "group": {
            "id": 5,
            "groupname": "React"
         }
      },
      {
         "id": 20,
         "group": {
            "id": 6,
            "groupname": "Node"
         }
      }
   ]
};

let groupIds = user.contactgroups.map(item=>(item.group.id));

let modifiedUser = {
    "id": user.id,
   "firstName": user.firstName,
   "lastName": user.lastName,
   "groupIds": groupIds
}

Answer 2

Consider trying out something similar to the following code snippet. By the way, I've utilized ES6 syntax here.

let user = {
   "id": 12,
   "firstName": "Mohamed",
   "lastName": "Sameer",
   "contactgroups": [
      {
         "id": 16,
         "group": {
            "id": 4,
            "groupname": "Angular"
         }
      },
      {
         "id": 19,
         "group": {
            "id": 5,
            "groupname": "React"
         }
      },
      {
         "id": 20,
         "group": {
            "id": 6,
            "groupname": "Node"
         }
      }
   ]
};

let groupIds = user.contactgroups.map(item=>(item.group.id));

let modifiedUser = {
    "id": user.id,
   "firstName": user.firstName,
   "lastName": user.lastName,
   "groupIds": groupIds
}

Answer 3

Answer №2

Utilize destructuring assignments to create a new object containing mapped IDs.

function getModifiedObject({ id, firstName, lastName, contactgroups: groups }) {
    return { id, firstName, lastName, groups: groups.map(({ group: { id } }) => id) };
}

var data = { id: 12, firstName: "Mohamed", lastName: "Sameer", contactgroups: [{ id: 16, group: { id: 4, groupname: "Angular" } }, { id: 19, group: { id: 5, groupname: "React" } }, { id: 20, group: { id: 6, groupname: "Node" } }] };

console.log(getModifiedObject(data));

Answer 4

Utilize destructuring assignments to create a new object containing mapped IDs.

function getModifiedObject({ id, firstName, lastName, contactgroups: groups }) {
    return { id, firstName, lastName, groups: groups.map(({ group: { id } }) => id) };
}

var data = { id: 12, firstName: "Mohamed", lastName: "Sameer", contactgroups: [{ id: 16, group: { id: 4, groupname: "Angular" } }, { id: 19, group: { id: 5, groupname: "React" } }, { id: 20, group: { id: 6, groupname: "Node" } }] };

console.log(getModifiedObject(data));

Answer 5

Answer №3

Here is the solution to your query:

let userData = {
      id : data.id,
      firstName: data.firstName,
      lastName: data.lastName,groups: data.contactgroups.map(y=> y.group.id)}

console.log(userData);

Answer 6

Here is the solution to your query:

let userData = {
      id : data.id,
      firstName: data.firstName,
      lastName: data.lastName,groups: data.contactgroups.map(y=> y.group.id)}

console.log(userData);

Leveraging the power of map function to transform arrays in Javascript

Answer №1

Answer №2

Answer №3

Similar questions

Step-by-Step Guide on Retrieving Filtered Data using React Context API

Working with DateTime formatting in JSON and JODA librarires

Mapping an Optional<Enum> with @RequestBody in Spring's MVC

A guide to displaying the date retrieved from a JSON data file API request using JavaScript

Having trouble connecting JSON data to TreeTable Js through knockout.js?

Utilizing React Hooks to toggle the aria-expanded boolean value

Embed fashion and graph elements into a CSV document (generated from <script>)

The function IdleProvider.windowInterrupt does not exist

What is the most effective way to monitor the duration of video playback?

External CSS File causing improper sizing of canvas image

Experiencing port accessibility problems while running two separate ReactJS frontends on a Google Cloud virtual machine

Concealing a Column within a Hierarchical HTML Table

Avoiding unnecessary Ajax requests using pushstate for pagination

Automatically scroll to each div or element on the page

I keep receiving a 400 (Bad Request) error when trying to delete with my REST API

Ways to display a price near a whole number without using decimal points

Duplicating a div element using jQuery .load

Implementing user authentication in Node.js using the Passport library alongside Express framework

Failed to load TypeScript file or similar issue

Concealing external scripts on specific webpages