Combining various POST requests by matching the common value in each array. (Angular)

Question

Combining various POST requests by matching the common value in each array. (Angular)

Here are the two different sets of data:

"statusCode": 200,
    "data": [
        {
            "color": {
                "id": "1111",
                "name": null,
                "hex": null,
                "image": "\/img\/.jpg",
                "subColors": [
                    {
                        "id": null,
                        "name": "White",
                        "hex": "#F5F4F8",
                        "image": null,
                        "subColors": []
                    },
                    {
                        "id": null,
                        "name": "Grey",
                        "hex": "#6c6f70",
                        "image": null,
                        "subColors": []
                    }
                ]
            },
            "articleVariants": [
                {
                    "id": "941282",
                    "articleNumber": "1000204445",
                    "size": "68\/74"
                }
            ]
        }
    ]

and

{
    "statusCode": 200,
    "data": [
        {
            "article": 1000204445,
            "ownStock": 3,
            "supplierStock": 18,
            "notice": null,
            "nextAvailability": null,
            "hasMoreOwnStock": false,
            "ownStockText": "3"
        }
    ]
}

The goal is to merge these responses based on the matching article numbers from "articleVariants.articleNumber" and the value of "article" from the second response.

This process aims to simplify the arrays for article numbers, where stock services can subscribe to these values, compare them with the requested article numbers, and return matching values mapped to the request.

If you have any tips on how to effectively merge these requests with the same values and map the new response accordingly, please share your insights as I am currently struggling with this task.

angular typescript api post request

Answer 1

Answer №1

When working with Angular, leveraging ngrx can be incredibly beneficial for tasks like this.

To tackle your specific issue, consider utilizing combineLatest. Here's a basic example:

combineLatest(getStock(...), getArticleVariantsByColor(...)).subscribe(
    [stockResult, articleVariantsResult] => {
        /* Merge the results here to further process them
           such as assigning them to a component variable */
        const mergedItems = stockResult.data.map(stock => 
            articleVariantsResult.data.find(variant =>
                variant.articleVariants.include(articleVariant => 
                    articleVariant.articleNumber === stock.article
                )
            )
        )
    }
)

If my merging code doesn't meet your requirements, I simply wanted to showcase the use of combineLatest and accessing API results. Feel free to reach out if you encounter any challenges.

Answer 2

When working with Angular, leveraging ngrx can be incredibly beneficial for tasks like this.

To tackle your specific issue, consider utilizing combineLatest. Here's a basic example:

combineLatest(getStock(...), getArticleVariantsByColor(...)).subscribe(
    [stockResult, articleVariantsResult] => {
        /* Merge the results here to further process them
           such as assigning them to a component variable */
        const mergedItems = stockResult.data.map(stock => 
            articleVariantsResult.data.find(variant =>
                variant.articleVariants.include(articleVariant => 
                    articleVariant.articleNumber === stock.article
                )
            )
        )
    }
)

If my merging code doesn't meet your requirements, I simply wanted to showcase the use of combineLatest and accessing API results. Feel free to reach out if you encounter any challenges.

Answer 3

Answer №2

For the solution, let's break it down into 2 simple steps.

Initially, we will merge responses without involving Observables.

const response1 = {"statusCode": 200,
"data": [
    {
        "color": {
            "id": "1111",
            "name": null,
            "hex": null,
            "image": "\/img\/.jpg",
            "subColors": [
                {
                    "id": null,
                    "name": "White",
                    "hex": "#F5F4F8",
                    "image": null,
                    "subColors": []
                },
                {
                    "id": null,
                    "name": "Grey",
                    "hex": "#6c6f70",
                    "image": null,
                    "subColors": []
                }
            ]
        },
        "articleVariants": [
            {
                "id": "941282",
                "articleNumber": "1000204445",
                "size": "68\/74"
            }
           ]
        }
        ]
        };
const response2 = {
"statusCode": 200,
"data": [
  {
        "article": 1000204445,
        "ownStock": 3,
        "supplierStock": 18,
        "notice": null,
        "nextAvailability": null,
        "hasMoreOwnStock": false,
        "ownStockText": "3"
    }]};

var dataArray1 = response1.data;
var dataArray2 = response2.data;
const mergedResponse = dataArray2.map(d2 => ({...d2, 
...dataArray1.find(d1 => d1.articleVariants.find(av=>+av.articleNumber 
=== d2.article))}));
console.log(mergedResponse);

In the second step, we will utilize forkJoin to handle Observables efficiently.

const postResponse1 = of(response1);
const postResponse2 = of(response2);


forkJoin({
    response2: postResponse2,
    response1: postResponse1
})
.subscribe(({response2, response1}) => {
   var dataArray1 = response1.data;
   var dataArray2 = response2.data;
   const mergedResponse = dataArray2.map(d2 => ({...d2, 
      ...dataArray1.find(d1 => 
      d1.articleVariants.find(av=>+av.articleNumber === d2.article))}));
      console.log(mergedResponse);
});

Answer 4

For the solution, let's break it down into 2 simple steps.

Initially, we will merge responses without involving Observables.

const response1 = {"statusCode": 200,
"data": [
    {
        "color": {
            "id": "1111",
            "name": null,
            "hex": null,
            "image": "\/img\/.jpg",
            "subColors": [
                {
                    "id": null,
                    "name": "White",
                    "hex": "#F5F4F8",
                    "image": null,
                    "subColors": []
                },
                {
                    "id": null,
                    "name": "Grey",
                    "hex": "#6c6f70",
                    "image": null,
                    "subColors": []
                }
            ]
        },
        "articleVariants": [
            {
                "id": "941282",
                "articleNumber": "1000204445",
                "size": "68\/74"
            }
           ]
        }
        ]
        };
const response2 = {
"statusCode": 200,
"data": [
  {
        "article": 1000204445,
        "ownStock": 3,
        "supplierStock": 18,
        "notice": null,
        "nextAvailability": null,
        "hasMoreOwnStock": false,
        "ownStockText": "3"
    }]};

var dataArray1 = response1.data;
var dataArray2 = response2.data;
const mergedResponse = dataArray2.map(d2 => ({...d2, 
...dataArray1.find(d1 => d1.articleVariants.find(av=>+av.articleNumber 
=== d2.article))}));
console.log(mergedResponse);

In the second step, we will utilize forkJoin to handle Observables efficiently.

const postResponse1 = of(response1);
const postResponse2 = of(response2);


forkJoin({
    response2: postResponse2,
    response1: postResponse1
})
.subscribe(({response2, response1}) => {
   var dataArray1 = response1.data;
   var dataArray2 = response2.data;
   const mergedResponse = dataArray2.map(d2 => ({...d2, 
      ...dataArray1.find(d1 => 
      d1.articleVariants.find(av=>+av.articleNumber === d2.article))}));
      console.log(mergedResponse);
});

Answer 5

Answer №3

If you're looking to streamline your code, consider using the forkJoin() method. Hopefully, this approach proves successful for you.

fetchData() {
     let requests = [this.articleVariantService.getArticleVariantsByColor(this.masterArticle.id,{},{}, this.language), this.stockService.getStock(itemNumbers)]
     forkJoin(requests).subscribe(data => {
     console.log(data[0], data[1]);
     let response = data;
  });
}

Answer 6

If you're looking to streamline your code, consider using the forkJoin() method. Hopefully, this approach proves successful for you.

fetchData() {
     let requests = [this.articleVariantService.getArticleVariantsByColor(this.masterArticle.id,{},{}, this.language), this.stockService.getStock(itemNumbers)]
     forkJoin(requests).subscribe(data => {
     console.log(data[0], data[1]);
     let response = data;
  });
}

Combining various POST requests by matching the common value in each array. (Angular)

Answer №1

Answer №2

Answer №3

Similar questions

The local variable within the Angular constructor is not initialized until the ngOnInit() function is invoked

Incorporate @ngx-translate into individual components within Angular 17 for enhanced translation capabilities

Making if-else statements easier

Even when imperfections inevitably arise, flawless submission is always achieved

Incapable of acquiring the classification of the attribute belonging to the

When an Angular service is created, its properties are not immediately configured

Gridster2 for Angular: Resolving Overlapping Grid Items during Drag

Getting TypeScript errors when incorporating a variant into a Material-UI button using a custom component

Structuring your Angular 6 application and server project

Exploring data retrieval from nested arrays of objects in TypeScript/Angular

Monitor checkbox status to trigger confirmation dialog

Issue "unable to use property "useEffect", dispatcher is undefined" arises exclusively when working with a local npm package

Using IONIC2 to localize month names in the UI

Is it possible for a component to accept another component as an input in Angular 2?

Monitoring Node.js Server Events Triggered by Request and Response Objects

Strange Appearance of Angular Material Slider

What are the steps to resolve the MSB4132 error in MSBUILD on a Windows 10 system?

Error in Angular production build due to Clean CSS failure

What is the best way to store a small number of files in the state

Navigating through a list using tabs and automatic scrolling to a specific index in React with Material UI's Scrollspy