For the first time, I have been tasked with dynamically retrieving object parameters from the URL parameter. I am aware that I can use
this.$route.params.[somelink-parameter]
to obtain the URL parameter, and I understand how to retrieve and store the response result in a variable like this.response = res
, for instance.
However, here lies the issue:
Suppose I have a URL structured as follows:
https://myUrl.com/some-campaign/:packageCategory
I attempted to store the parameter using this method:
const packageCategory = this.$route.params.packageCategory
Here is an example of the object structure from the response:
{
packageCategory: {
promoA: [
{
id: promoA-0001
},
{
id: promoA-0002
},
...
],
promoB: [
{
id: promoB-0001
},
...
],
...
}
}
The goal is:
How can I dynamically fetch data from the URL and merge it with the results to access the packageCategory object based on the URL parameters?
One approach I tried is as follows:
URL:
https://myUrl.com/some-campaign/promoA
Package Category: promoA
Objective:
Retrieve the object dynamically from the params such as this.packages = result.promoA
{
promoA: [
{
id: promoA-0001
},
...
]
}
1st Attempt:
const packageCategory = this.$route.params.packageCategory;
getPackageCampaign().then((result) => {
this.packages = `${JSON.parse(result)}.${packageCategory}`;
console.log("check result:", this.packages);
})
Error output:
Uncaught (in promise) SyntaxError: Unexpected token o in JSON at position 1 at JSON.parse (<anonymous>)
2nd Attempt:
const packageCategory = this.$route.params.packageCategory;
getPackageCampaign().then((result) => {
this.packages = `${result}.${packageCategory}`;
console.log("check result:", this.packages);
})
Output:
[object Object].promoA
Is it feasible to resolve this issue using this method, or are there alternative approaches to achieve my objectives?