creating a map of a collection of elements

Question

creating a map of a collection of elements

I'm seeking suggestions on how to achieve this task. The getAllData function returns an array of objects, and I need to iterate through each object resulting from getAllData and extract the id of objects with Type-A. Subsequently, I aim to use each id to query getDealDetails based on the Id.

If there is a matching id in getDealDetails and it has a result, I want to retrieve the TypeValues summary value from the getDealDetails result and add a new key-value pair to the res items obtained from getAllData. The new key will be "dataValue:" and the value will be the data fetched from TypeValues summary.

The final result should resemble the sample object provided below. For instance, if there is a match with the id 248, then append the specified dataValue.

Thank you for any assistance and insights.

[
        {
            "id": 248,
            "name": "248-A",
            "Type": "Type-A",
            "fileName": null,
            "serverFileName": null,
            "size": null,
            "absoluteUri": null,
            "sentTo": null,
            "dataValue": "Summary Data"
        },
          {
            "id": 249,
            "name": "249-A",
            "Type": "Type-A",
            "fileName": null,
            "serverFileName": null,
            "size": null,
            "absoluteUri": null,
            "sentTo": null
        },
     {
            "id": 243,
            "name": "243-Z",
            "Type": "Type-Z",
            "fileName": null,
            "serverFileName": null,
            "size": null,
            "absoluteUri": null,
            "sentTo": null
        },
    ]

Here's the code snippet fetching data and the res items:

private getAllData() {
    this.searchInput = '';
    const status = 'Draft'
    this.isLoading = true;
    this.dealService
      .getAllData(
        status,
        this.accountId,
        this.transaction.id,
        this.table.pageIndex + 1,
        this.table.pageSize,
        this.searchInput,
        this.table.sortParams,
        this.table.sortDirs
      )
      .pipe(finalize(() => (this.isLoading = false)))
      .subscribe((res) => {
        console.log("ress " , res.items)
        this.getDealDetails(res.items.id);
      }, (err) => this.notificationService.showError(err)
    );
  }

Below are sample result items obtained from getAllData:

[
    {
        "id": 248,
        "name": "248-A",
        "Type": "Type-A",
        "fileName": null,
        "serverFileName": null,
        "size": null,
        "absoluteUri": null,
        "sentTo": null
    },
      {
        "id": 249,
        "name": "249-A",
        "Type": "Type-A",
        "fileName": null,
        "serverFileName": null,
        "size": null,
        "absoluteUri": null,
        "sentTo": null
    },
 {
        "id": 243,
        "name": "243-Z",
        "Type": "Type-Z",
        "fileName": null,
        "serverFileName": null,
        "size": null,
        "absoluteUri": null,
        "sentTo": null
    },
]

Code snippet for fetching details:

getDetails(Id: number) {
    this.service.getDetails(Id)
    .subscribe(
      res =>{  
        console.log("res.data;" , res.data)            
      },
      err =>{
        console.log('Error getting deal details');
      }
    )
   }

Sample result from getDetails:

{
    "id": 248,
    "name": "248-A",
    "fileName": null,
    "serverFileName": null,
    "size": null,
    "absoluteUri": null,
    "sentTo": null,
    "TypeValues": {
        "id": 24,
        "name": "248-A",
        "summary": "Summary Data",
   
        }
    }
}

javascript angular typescript

Answer 1

Answer №1

It seems like your goal is to retrieve data from the initial query and then perform multiple additional queries to enrich the data further. I recommend checking out the RxJS documentation, specifically focusing on operators such as combineAll, concatAll, and combineLatest.

Below is an example of how you could approach this task. However, it appears that there are other significant issues in your code snippet, such as referencing res.data instead of res.items and attempting to access res.items.id within an array. Here is a pseudo-code representation:


  private getAllData() {
   
    this.isLoading = true;
    this.dealService
      .getAllData(
        status,
        this.accountId,
        this.transaction.id,
        this.table.pageIndex + 1,
        this.table.pageSize,
        this.searchInput,
        this.table.sortParams,
        this.table.sortDirs
      )
      .pipe(
        map((res: any) => res.items.map(
          // Fetch details for each item and merge them with a new copy of the item 
          item => this.getDealDetails(item.id).pipe(
            map((getDealDetailsResponse: any) =>
              ({
                ...item,
                ...{ dataValue: getDealDetailsResponse.data.TypeValues }
              })
            )
          ))
        ),
        // Combine the array of observables above into a single observable 
        // and emit the result when all operations have completed
        combineAll()
      ).subscribe((mergedResults) => {
        console.log(mergedResults);
      });      
  }

Answer 2

It seems like your goal is to retrieve data from the initial query and then perform multiple additional queries to enrich the data further. I recommend checking out the RxJS documentation, specifically focusing on operators such as combineAll, concatAll, and combineLatest.

Below is an example of how you could approach this task. However, it appears that there are other significant issues in your code snippet, such as referencing res.data instead of res.items and attempting to access res.items.id within an array. Here is a pseudo-code representation:


  private getAllData() {
   
    this.isLoading = true;
    this.dealService
      .getAllData(
        status,
        this.accountId,
        this.transaction.id,
        this.table.pageIndex + 1,
        this.table.pageSize,
        this.searchInput,
        this.table.sortParams,
        this.table.sortDirs
      )
      .pipe(
        map((res: any) => res.items.map(
          // Fetch details for each item and merge them with a new copy of the item 
          item => this.getDealDetails(item.id).pipe(
            map((getDealDetailsResponse: any) =>
              ({
                ...item,
                ...{ dataValue: getDealDetailsResponse.data.TypeValues }
              })
            )
          ))
        ),
        // Combine the array of observables above into a single observable 
        // and emit the result when all operations have completed
        combineAll()
      ).subscribe((mergedResults) => {
        console.log(mergedResults);
      });      
  }

creating a map of a collection of elements

Answer №1

Similar questions

The Javascript loop is not returning true even when the two strings are equal

A method for setting values independently of [(ngModel)] within an *ngFor loop and selecting an HTML tag

Ways to remove specific characters from the escape() function in express-validators

Trouble with two dropdown selections in Angular and preset values

What are some tips to ensure that my JavaScript submissions always execute correctly?

Twilio SMS Notification: The Class extension value provided is not a valid constructor or null

Initiate button click event of a Vue.js application via a Chrome extension automatically

What is the best way to obtain the most recent value from an observable or subject without needing to subscribe?

Reduce the value of a Perl scalar variable each time an ajax script is executed

Is it possible to implement custom PDF rendering in ng2-pdf-viewer for handling large PDF files?

How can I customize the color of grayed-out days in Fullcalendar's validRange?

React's `setState` function seems to be failing to update my rendered catalog

Error: Functionality cannot be achieved

Navigating with Three.JS FPS controls by moving left and right

Is it possible to call a service within an NgFor loop in Ionic/Angular 2?

Having trouble retrieving the chosen option from the radio button list

Using Jquery and Ajax to add information to a database

AngularJS: Issue with JQuery Slider not Updating Scope Value

Having trouble converting customized tabs into Bootstrap navigation tabs?

Prevent submission of Angular form while still displaying errors upon clicking