Utilizing Rxjs to transform an array of objects

Question

Utilizing Rxjs to transform an array of objects

My goal is to map an array of objects. Currently, I have the following code:

return this.service.post(url, payload, this.httpOptions)
    .pipe(
        map((obj: any, index) => [({
            ...obj,
            val1: obj[index].val1.id,
            val2: obj[index].val2.id
        })]
    ))

I've also tried approaching it in a different way:

  map((obj: any, index) => 
        {   
            const list = []
            const newObj = { 
                ...obj,
                val1: obj[index].val1.id,
                val2: obj[index].val2.id
            }
            list.push(newObj);
            return list;
        }

Input:

 [
  {
    "val1": { "id": "USER_ID", "value": "User1" },
    "val2": { "id": "USER_ID", "value": "User2" },
    "val3": "aaa",
    "val4": "val2"
  },
  {
    "val1": { "id": "USER_ID", "value": "User3" },
    "val2": { "id": "USER_ID", "value": "User4" },
    "val3": "dds",
    "val4": "eee"
  }
]

Expected output:

   [
    {
      "val1": "USER_ID",
      "val2": "USER_ID",
      "val3": "aaa",
      "val4": "val2"
    },
    {
      "val1": "USER_ID",
      "val2": "USER_ID",
      "val3": "dds",
      "val4": "eee"
    }
]

Currently, instead of an array of objects, I have an array with one object that contains all objects. My desired outcome is to have an array of objects where each object contains the original data plus the mapped values such as val1 and val2.

angular typescript rxjs

Answer 1

Answer №1

Your issue lies within the map() operator. It is receiving the entire payload instead of individual items, treating what you refer to as obj as an array. To resolve this, you must also apply .map() on the array.

Additionally, the index parameter is unnecessary since the property exists directly on the object itself.

    map(inputArray => inputArray.map(obj => ({
      ...obj,
      val1: obj.val1.id,
      val2: obj.val2.id
    }))

For a functional demonstration, check out this StackBlitz

Answer 2

Your issue lies within the map() operator. It is receiving the entire payload instead of individual items, treating what you refer to as obj as an array. To resolve this, you must also apply .map() on the array.

Additionally, the index parameter is unnecessary since the property exists directly on the object itself.

    map(inputArray => inputArray.map(obj => ({
      ...obj,
      val1: obj.val1.id,
      val2: obj.val2.id
    }))

For a functional demonstration, check out this StackBlitz

Answer 3

Answer №2

When utilizing the .map() method on the response data, which is anticipated to be an array, the resulting output will also be an array. There is no need to re-encapsulate it within another array in the map callback function. As for the second requirement of adding additional key-value pairs to each element of the response, your current code using the spread operator is adequate. Consider implementing this modification for your map operation:

return this.service.post(url, payload, this.httpOptions)
    .pipe(
        map((obj: any) => {
          return {
            ...obj,
            val1: obj.val1?.id,
            val2: obj.val2?.id
         }
      })
   )

By following this approach, the desired output will be achieved as:

[ {key1: value, ..., val1: value, val2: value}, ... ]

To review a demonstration of the code, refer to: https://ideone.com/stVusF

Answer 4

When utilizing the .map() method on the response data, which is anticipated to be an array, the resulting output will also be an array. There is no need to re-encapsulate it within another array in the map callback function. As for the second requirement of adding additional key-value pairs to each element of the response, your current code using the spread operator is adequate. Consider implementing this modification for your map operation:

return this.service.post(url, payload, this.httpOptions)
    .pipe(
        map((obj: any) => {
          return {
            ...obj,
            val1: obj.val1?.id,
            val2: obj.val2?.id
         }
      })
   )

By following this approach, the desired output will be achieved as:

[ {key1: value, ..., val1: value, val2: value}, ... ]

To review a demonstration of the code, refer to: https://ideone.com/stVusF

Utilizing Rxjs to transform an array of objects

Answer №1

Answer №2

Similar questions

Obtain the filter criteria within the user interface of a Kendo grid

Exploring Angular 7: A guide to implementing seamless pagination with routing for fetching API data

Refreshing the page causes TypeScript Redux to lose its state

Efficient Searching with Typescript and Lodash: Boosting Performance with Arrays and Objects

Using Angular with adal-angular4 and implementing refresh token functionality

Passing checkbox values using formgroup in Angular

Breaking down types in Typescript: Extracting individual types from an object containing multiple objects

"Manipulating values in an array with a union type: a guide to setting and

Passing asynchronous data from method1 to method2 without impacting the functionality of the script responsible for fetching the asynchronous data in method1

Encountering a roadblock while trying to install a package using NPM, as the installation process becomes halted at version [email

"Implementing a Filter for Selecting Multiple Options in Ionic Framework

TS2339 Error: The object 'Navigator' does not contain the property 'clipboard'

How to easily scroll to the top of the previous page in Angular 8

Determining the data type of a property within an interface using TypeScript

Guide on creating a detailed list of categories mapped to specific classes that all adhere to a common generic standard

Encountering errors while setting up routes with Browser Router

Using Angular 6's httpClient to securely post data with credentials

Undefined error when refreshing Angular page

Managing tabular data in reactive forms in Angular

I'm encountering an issue in my node application where it is unable to access the push