'Merge multiple POST requests based on the same value of each array. (Angular)

These are the two outputs

"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"
        }
    ]
}

I need to merge these two responses based on the same value from articleVariants.articleNumber and the value of article from the second call.

This is supposed to flatten the arrays for articleNumbers, the stockServices is supposed to subscribe to these values and compare them with the requested articlenumbers. If they are equal it is supposed to return the values and map them to the request.

Sadly I'm a bit lost here, maybe someone can help me out? How can I merge these request that have the same value and map the new response to the other.

angulartypescriptapipostrequest


Solution 1:[1]

Especially when working in Angular you can (and probably should) make extensive use of ngrx for things like this.

For your specific problem you could use combineLatest. Roughly like the following:

combineLatest(getStock(...), getArticleVariantsByColor(...)).subscribe(
    [stockResult, articleVariantsResult] => {
        /* Now you can merge the results here and do smth with them
           like assigning to a variable of the component */
        const mergedItems = stockResult.data.map(stock => 
            articleVariantsResult.data.find(variant =>
                variant.articleVariants.include(articleVariant => 
                    articleVariant.articleNumber === stock.article
                )
            )
        )
    }
)

I assume my merge code does not exactly do what you need, i just wanted to demonstrate combineLatestand how you can access the api results. Let me know if you had success

Solution 2:[2]

Let's divide the solution into 2 steps.

The first step with no Observables, let's just combine responses.

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);

The second step - forkJoin usage to deal with Observables.

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);
});

Solution 3:[3]

You can use forkJoin(), I hope it worked for you.

getData() {
     let requestArray = [this.articleVariantService.getArticleVariantsByColor(this.masterArticle.id,{},{}, this.language), this.stockService.getStock(articleNumbers)]
     forkJoin(requestArray).subscribe(results => {
     console.log(results[0], result[1]);
     let response = results;
  });
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Laurenz Honauer
Solution 2 Nataly Chkhan
Solution 3 Bansi29

Related Questions