Considering implementing a Single Page Application (SPA) using a JavaScript framework like Angular JS. Currently, I have multiple existing Web APIs containing the necessary information for the app. I need to add another API that will handle new data and reference other DTOs. My question is, would it be better to make separate calls to each API and compile the DTO on the web app, or should I create a new API that merges all the data and provides a GET method with the complete object?
Approach 1 from the perspective of the website:
API Calls (Assuming userId = 1 for the logged-in user)
/get/order/{userId}
{
UserId: 1
Products:{1,2}
}
Based on the above call:
/get/user/1
{
FirstName: test,
LastName: test
}
/get/product/1
{
Price: 10,
Name: Test
}
/get/product/2
{
Price: 100,
Name: Test2
}
Data merging in Angular JS Website
Approach 2 from the website's perspective:
Merge all data within the Order Web API
API Call:
/get/ordermerged/{userId}
{
FirstName: test,
LastName: test
Products:
{
{
Price: 10,
Name: Test
},
{
Price: 100,
Name: Test2
}
}
}
I have attached a screenshot for better visualization.