Today marks my first time not as a reader, but seeking advice after grappling with RxJS for two whole days.
The task at hand involves firing off two API calls: the initial call fetches a list of pricelists. The response takes the form of an object with IDs serving as keys. Here's a snippet for reference:
{
"a64cb186455a5a0b5ea1f12e027ce384": {
"supplier_name": "Supplier_1",
"pricelists": [
{
"status": "enabled",
"title": "Pricelist_1",
"pricelist_id": "839b47d67954a9dec375a40652f93b52",
},
{
"status": "expired",
"title": "Pricelist_2",
"pricelist_id": "1aed04c948bc63e3b6f8100b0e410afd",
}
]
}
}
My goal is to extract only the array of pricelists from this object. Subsequently, I need to filter these pricelists to retain only the enabled ones. Following this filtering process, I check if there are any pricelists left. If so, I store all pricelists in an array and designate the first one as the selected pricelist.
With the selected pricelist in hand, the next step involves fetching the wines associated with this pricelist using its unique identifier through another API call. A glimpse into the response looks something like this:
[
{
"producer": "Producer_1",
"id_prod": "90e2ac8275a68d9eb3a246735e7546cd",
"wines": [
{...},
{...},
{...},
{...}
]
},
{
"producer": "Producer_2",
"id_prod": "54e2bf8275a68d9eb3a246735e7546zq",
"wines": [
{...},
{...},
{...},
{...}
]
}
]
Subsequently, I seek to consolidate all objects within the "wines" keys into a single array for efficient looping on the HTML side.
Furthermore, a modal exists for altering the selected pricelist. Leveraging the stored pricelists enables me to switch between them. Whenever the active pricelist changes, it necessitates a fresh API request to load the corresponding wines.
I've managed to implement the code thus far, albeit nested subscriptions that feel somewhat inelegant. Hence, I yearn to refactor the structure in a more streamlined manner, and I present the existing code snippet below for clarity:
// Existing code here
In essence, I strive to restructure the above code employing an RxJS approach. Any insights or tips would be greatly valued, as I find myself at a loss here!
Despite my attempts with RxJS, though successful in obtaining pricelists and their associated wines, transitioning between active pricelists remains unresponsive with no HTML updates. Clarity eludes me regarding RxJS operations, accentuating the urgency of your guidance.