Using a map feature to extract properties and then transforming them into strings

Question

Using a map feature to extract properties and then transforming them into strings

Here is the data I have:

let myInputArray = [
    {
        "id": 1,
        "commercialRanges": [
          {
            "rangeId": "305",
            "rangeName": "FIXE"
          },
          {
            "rangeId": "306",
            "rangeName": "POSTPAID"
          },
        ],
        "active": true,
        "pefName": "Alertes",
        "roles": "ADVISOR",
        "equipmentTypes": "PC",
      },
      ...
      {
        "id": 1523,
        "commercialRanges": [
          {
            "rangeId": "700",
            "rangeName": "POSTPAID"
          },
          {
            "rangeId": "500",
            "rangeName": "PREPAID"
          },
        ]
        ,
        "active": true,
        "pefName": "Alertes",
        "roles": "ADVISOR",
        "equipmentTypes": "PC",
      },
    ]

I am looking to transform my data by converting the "commercialRanges" attribute from an array of objects to a simple string that joins the different "rangeName" values.

The resulting array would look like this:

myResultArray = [
{
    "id": 1,
    "commercialRanges": "FIXE,POSTPAID",
    "active": true,
    "pefName": "Alertes",
    "roles": "ADVISOR",
    "equipmentTypes": "PC",
  },
  ...
  {
    "id": 1523,
    "commercialRanges": "POSTPAID,PREPAID",
    "active": true,
    "pefName": "Alertes",
    "roles": "ADVISOR",
    "equipmentTypes": "PC",
  },
]

This means converting the embedded object "commercialRanges"

"commercialRanges": [
      {
        "rangeId": "305",
        "rangeName": "FIXE"
      },
      {
        "rangeId": "306",
        "rangeName": "POSTPAID"
      },
    ]

to:

"commercialRanges": "FIXE,POSTPAID"

javascript angular typescript ecmascript-6

Answer 1

Answer №1

If you want to achieve this, you can consider utilizing Array.forEach, Array.map, and Array.join.

let sampleInput = [{"id":1,"commercialRanges":[{"rangeId":"305","rangeName":"FIXE"},{"rangeId":"306","rangeName":"POSTPAID"}],"active":true,"pefName":"Alertes","roles":"ADVISOR","equipmentTypes":"PC"}];
  
sampleInput.forEach(obj => obj.commercialRanges = obj.commercialRanges.map(r => r.rangeName).join(','));
console.log(sampleInput);

Answer 2

If you want to achieve this, you can consider utilizing Array.forEach, Array.map, and Array.join.

let sampleInput = [{"id":1,"commercialRanges":[{"rangeId":"305","rangeName":"FIXE"},{"rangeId":"306","rangeName":"POSTPAID"}],"active":true,"pefName":"Alertes","roles":"ADVISOR","equipmentTypes":"PC"}];
  
sampleInput.forEach(obj => obj.commercialRanges = obj.commercialRanges.map(r => r.rangeName).join(','));
console.log(sampleInput);

Answer 3

Answer №2

To simplify the process, you can iterate through the myInputArray array and convert the commercialRanges into a string using a loop. One efficient approach is to utilize the Array.prototype.reduce method on the myInputArray, followed by Array.prototype.map on the commercialRanges array for a more elegant solution.

You have the flexibility to choose between using both map and reduce or just one of them based on your preference. Here's a sample implementation:

let myInputArray = [
  {
      "id": 1,
      "commercialRanges": [
        {
          "rangeId": "305",
          "rangeName": "FIXE"
        },
        {
          "rangeId": "306",
          "rangeName": "POSTPAID"
        },
      ],
      "active": true,
      "pefName": "Alertes",
      "roles": "ADVISOR",
      "equipmentTypes": "PC",
    },
    ...
    {
      "id": 1523,
      "commercialRanges": [
        {
          "rangeId": "700",
          "rangeName": "POSTPAID"
        },
        {
          "rangeId": "500",
          "rangeName": "PREPAID"
        },
      ]
      ,
      "active": true,
      "pefName": "Alertes",
      "roles": "ADVISOR",
      "equipmentTypes": "PC",
    },
  ]

const myInputString = myInputArray.reduce((arr, obj) => [
  ...arr,
  {
    ...obj,
    commercialRanges: obj.commercialRanges.map(rObj => rObj.rangeName).join(',')
  }
], [])

Alternatively, you can achieve the same result by simultaneously iterating through both arrays using Array.prototype.map:

const myInputString = myInputArray.map(obj => ({
    ...obj,
    commercialRanges: obj.commercialRanges.map(rObj => rObj.rangeName).join(',')
  })
)

Answer 4

To simplify the process, you can iterate through the myInputArray array and convert the commercialRanges into a string using a loop. One efficient approach is to utilize the Array.prototype.reduce method on the myInputArray, followed by Array.prototype.map on the commercialRanges array for a more elegant solution.

You have the flexibility to choose between using both map and reduce or just one of them based on your preference. Here's a sample implementation:

let myInputArray = [
  {
      "id": 1,
      "commercialRanges": [
        {
          "rangeId": "305",
          "rangeName": "FIXE"
        },
        {
          "rangeId": "306",
          "rangeName": "POSTPAID"
        },
      ],
      "active": true,
      "pefName": "Alertes",
      "roles": "ADVISOR",
      "equipmentTypes": "PC",
    },
    ...
    {
      "id": 1523,
      "commercialRanges": [
        {
          "rangeId": "700",
          "rangeName": "POSTPAID"
        },
        {
          "rangeId": "500",
          "rangeName": "PREPAID"
        },
      ]
      ,
      "active": true,
      "pefName": "Alertes",
      "roles": "ADVISOR",
      "equipmentTypes": "PC",
    },
  ]

const myInputString = myInputArray.reduce((arr, obj) => [
  ...arr,
  {
    ...obj,
    commercialRanges: obj.commercialRanges.map(rObj => rObj.rangeName).join(',')
  }
], [])

Alternatively, you can achieve the same result by simultaneously iterating through both arrays using Array.prototype.map:

const myInputString = myInputArray.map(obj => ({
    ...obj,
    commercialRanges: obj.commercialRanges.map(rObj => rObj.rangeName).join(',')
  })
)

Using a map feature to extract properties and then transforming them into strings

Answer №1

Answer №2

Similar questions

Is it possible to use both "npm install --global" and "--save" simultaneously?

Exploring a new method for AJAX loading when handling large amounts of data into multiple div elements

Challenges arise when attempting to break down an API into separate components rather than consolidating it into a

A guide to implementing bounds with dynamic markers in react-leaflet

Ways to transfer information from an axios API to a state in React

jQuery unable to find designated elements in uploaded templates

Effective Ways to Segregate CRUD Endpoints in Node.js with Express

Using Firestore queries in your NodeJS application

Informing the parent window of the child window's activities in order to adjust the timer for the user timeout feature

Using Jest and Typescript to mock a constant within a function

how can a select dropdown be dynamically displayed based on the previous selection?

The process of dynamically inserting input types into a <td> element using the innerHTML tag is not functioning properly in Internet Explorer

Rearranging components in React does not automatically prompt a re-render of the page

Is it possible to utilize an enum for typing an array variable?

Troubleshooting Ng Serve Module Conflict

Objective: Remove all soft items from array stored in MongoDb using Mongoose

Designing a platform for dynamic components in react-native - the ultimate wrapper for all elements

The enigma of the mysterious karma provider error

How can data be displayed in AngularJS/Json without using ng-repeat?

Designing templates for websites and applications using node.js