Vuejs, how to build an object?

Question

Hello I'm trying to display graphics on my website from API, to display my graphic in column, I need to send him an object like this one

data: [{
            name: 'Data1',
            data: [
              ['ALIONIVS', 1],
              ['GARCIC(I)VS', 1],
              ['NONIVS', 1],
              ['SERVERS,A', 1]
            ],
          },
          {
            name: 'Data2',
            data: [
              ['TVTOR', 1],
              ['FVSCINVS', 1],
              ['GVTAMVS / GVMATIVS', 1],
              ['SEVERINVS, -A', 1],
              ['TVSCVS, -A / TVSGVS', 1],
              ['VEIENTA', 1],
            ]
          }
        ],

But I would like to have dynamic data I'm retrieving data from my api with axios.

        axios
          .get('../api/civitasnomen/' + this.searchInputcivitas)
          .then(response => {
            this.data1 = response.data.map(item => {
              return [item.lemme, item.nb];
            })
          })

        axios
          .get('../api/civitascognomen/' + this.searchInputcivitas)
          .then(response => {
            this.data2 = response.data.map(item => {
              return [item.lemme, item.nb];
            })
          })

In my object I would like to retrieve both my api data

If write this in axios :

axios .get('../api/civitasnomen/' + this.searchInputcivitas) .then(response => this.data1 = response.data )

For example Data1 =

[ { "nb": 1, "lemme": "ALIONIVS" }, { "nb": 1, "lemme": "GARIC(I)VS" }, { "nb": 1, "lemme": "NONIVS, -A" }, { "nb": 1, "lemme": "SEVERVS, -A" } ]

And Data2 =

[ { "nb": 1, "lemme": "TVTOR" }, { "nb": 1, "lemme": "FVSCINVS" }, { "nb": 1, "lemme": "GVTAMVS / GVMATIVS" }, { "nb": 1, "lemme": "SEVERINVS, -A" }, { "nb": 1, "lemme": "TVSCVS, -A / TVSGVS" }, { "nb": 1, "lemme": "VEIENTA" } ]

How does the data returned from the API look like ? i mean ` this.data = response.data` and ` this.data2 = response.data` — Boussadjra Brahim
– Boussadjra Brahim, Commented Jun 23, 2020 at 16:35
@BoussadjraBrahim data1 = [ { "nb": 1, "lemme": "ALIONIVS" }, { "nb": 1, "lemme": "GARIC(I)VS" }, { "nb": 1, "lemme": "NONIVS, -A" }, { "nb": 1, "lemme": "SEVERVS, -A" } ] and data2: [ { "nb": 1, "lemme": "TVTOR" }, { "nb": 1, "lemme": "FVSCINVS" }, { "nb": 1, "lemme": "GVTAMVS / GVMATIVS" }, { "nb": 1, "lemme": "SEVERINVS, -A" }, { "nb": 1, "lemme": "TVSCVS, -A / TVSGVS" }, { "nb": 1, "lemme": "VEIENTA" } ] — Léo-Paul Dubourg
– Léo-Paul Dubourg, Commented Jun 24, 2020 at 8:38
Your question is not clear and the data that your provide first doesn't have any common feature with that returned from api — Boussadjra Brahim
– Boussadjra Brahim, Commented Jun 24, 2020 at 10:28
@BoussadjraBrahim I want to make the data object dynamic. the data > name is fixe Data1 or Data2 but I want the data > data dynamic . I have change the data object to match with my api — Léo-Paul Dubourg
– Léo-Paul Dubourg, Commented Jun 24, 2020 at 13:36

Léo-Paul Dubourg · Accepted Answer · 2020-06-25 09:07:40Z

1

Suppose that you have data property initialized as an empty array:

data(){
  return {
   data: [],

  }
}

Then update it with result coming from API :

 axios
          .get('../api/civitasnomen/' + this.searchInputcivitas)
          .then(response => {
             this.data.push({
               name:'data1',
               data:response.data.map(item => {
              return [item.lemme, item.nb];
            })
            })
          })

        axios
          .get('../api/civitascognomen/' + this.searchInputcivitas)
          .then(response => {
             this.data.push({
               name:'data2',
               data:response.data.map(item => {
              return [item.lemme, item.nb];
            })
          })

edited Jun 25, 2020 at 9:07

Léo-Paul Dubourg

691 silver badge9 bronze badges

answered Jun 24, 2020 at 15:00

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Léo-Paul Dubourg Over a year ago

Thank you very much for your help you're helping me a lot, it's working perfectly. Thank you

Collectives™ on Stack Overflow

Vuejs, how to build an object?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related