CODEWITHSUNDEEP
typescriptvue.jsaxios
Antoine Kurka
Antoine Kurka

Reputation: 322

Add a response data into an object - Vue.js

I created a model like this :

export class Model{
    data1: string
    data2: string
    data3: string
    data4: string

    constructor(data1: string, data2: string, data3: string, data4: string){
        this.data1 = data1
        this.data2 = data2
        this.data3 = data3
        this.data4 = data4
    }
}

And in my component, I'm doing an axios request and I want to "add" the axios response into this object. But my axios data don't have the same titles (ex: data1 in my model / dataName in my response).

Here is my component.vue 

import { Model } from '@/models/Model'

export default Vue.extend({
  data: () => ({
    data: [] as Model[]
  }),
  created() {
    apiService.getDataList().then(response =>{ //ApiService.getDataList() is an method coming from another component
      //I search what to do here
    })

  }
})

Someone have any idea how to do this ?

PS: I'm using TypeScript

Upvotes: 1

Views: 1066

Answers (1)

blackgreen
blackgreen

Reputation: 44697

Assuming there are no other hidden requirements, you can just map the response data into your declared model:

import { Model } from '@/models/Model'

export default Vue.extend({
  data: () => ({
    data: [] as Model[]
  }),
  created() {
    apiService.getDataList().then(response => {
      for(const item in response.data) {
         this.data.push(new Model(item.dataName, item.foo, item.bar /* etc. */))
      }
    })

  }
})

Upvotes: 1

Related Questions