CODEWITHSUNDEEP
arraysvuejs2vue-component
MikroMike
MikroMike

Reputation: 45

How to extract data from a multidimensional array in Vue?

I am new to Vue.

I am getting data from an external API using Axios:

import axios from 'axios'
var headers = {
    'Content-Type': 'application/json'
}
const api = 'https://avoindata.prh.fi/tr/v1/3132320-8'

methods: {
  onSubmit: function (event) {
  axios.get(api, headers)
    .then((response) => {
      this.maindata = response.data
      console.log(JSON.stringify(response.data))
    })
    .catch(e => {
      this.errors.push(e)
    })
}},

Once I get a response from Axios:

.then((response) => {
      this.maindata = response.data

I can only read data from maindata (array):

<ul >
    <li> Type: {{ maindata.type }}</li>
    <li> Version: {{ maindata.version }}</li>
</ul>

But not array results below:

<ul v-for="(results, index) in maindata" v-bind:key="index">
  <li> BusinessID: {{ results.businessId }}</li>
</ul>

Using the following:

data () {
    return {
        maindata: [
        {
           type: '',
           version: '',
           results: [{
               businessId: '',
               name: ''
           }]
       }]
    …
    }
}

The JSON looks like this: 

{
"type": "fi.prh.opendata.tr", 
"results":
    [
        { 
            "businessId":"3132320-8",
            "name":"Uracom 
        }
    ]
}

Question: How do I extract data from the results array?

Thanks MikroMike.

Upvotes: 0

Views: 154

Answers (1)

mohammad
mohammad

Reputation: 521

your v-for is wrong, try this:

<ul v-for ="(result, index) in maindata.results"
  v-bind:key="index">
 <li> BusinessID: {{ result.businessId }}</li>
 </ul>

Upvotes: 1

Related Questions