How to get data dynamically by combining result from Response with dynamic param from route in Vue.js

Question

This is the first time I got a task to get object parameter dynamically from the url param. I know I can use this.$route.params.[somelink-parameter] to get the url parameter. and I know the way to get and store the response result into a subject such as this.response = res for example.

But Here comes the problem:

let say I have a Url like this: https://myUrl.com/some-campaign/:packageCategory

I tried to store the param like this:

const packageCategory = this.$route.params.packageCategory

and this is the the example of my object from response:


{
  packageCategory: {
      promoA: [
         {
            id: promoA-0001
         },
         {
            id: promoA-0002
         },
         {
            id: promoA-0003
         },
         {
            id: promoA-0004
         }
      ],
      promoB: [
         {
            id: promoB-0001
         }
      ],
      promoC: [
         {
            id: promoC-0001
         },
         {
            id: promoC-0002
         },
         {
            id: promoC-0003
         }
      ],
      promoD: [
         {
            id: promoD-0001
         },
         {
            id: promoD-0002
         }
      ],
  }
}

what I want to achieve is:

How to get the data object dynamically from the Url and combine it with the result to get the object from packageCategory based on Url Params

some way that I tried is something like this:

URL: https://myUrl.com/some-campaign/promoA

packageCategory : promoA

goals: to get the object dynamically from the params such as this.packages = result.promoA

{
 promoA: [
  {
   id: promoA-0001
  },
  {
   id: promoA-0002
  },
  {
   id: promoA-0003
  },
  {
   id: promoA-0004
  }
 ],
}

1st Try:

const packageCategory = this.$route.params.packageCategory;

getPackageCampaign().then((result) => {
 this.packages = `${JSON.parse(result)}.${packageCategory}`;
 console.log("cek result : ", this.packages);
})

output give an error:

Uncaught (in promise) SyntaxError: Unexpected token o in JSON at position 1 at JSON.parse ()

2nd Try:

const packageCategory = this.$route.params.packageCategory;

getPackageCampaign().then((result) => {
 this.packages = `${result}.${packageCategory}`;
 console.log("cek result : ", this.packages);
})

output:

[object Object].promoA

Is it possible to solve this problem with this approach? or is there any other approach to achieve my goals?

user_381282 · Answer

In JS you can access object properties with indexer syntax:

let A = {
  a: 1,
  b: {
    c: 2
  }
}

let B = A['a'] // B = 1
let member = 'b'
let C = A[member] // C === A.b

So in your case it's something like this (depends on the real structure of your data ...which is not really clear from your question)

getPackageCampaign().then((result) => {
 // assuming result is already JS object (result of JSON.parse)
 this.packages = result[this.$route.params.packageCategory];
 console.log("result : ", this.packages);
})

How to get data dynamically by combining result from Response with dynamic param from route in Vue.js

1 Answers