How to extract data from a multidimensional array in Vue?

Question

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.

Have you tried v-for="(results,index) in maindata.results" ? — IVO GELOV
– IVO GELOV, Commented Jun 10, 2020 at 11:43

mohammad · Accepted Answer · 2020-06-10 11:53:55Z

1

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>

answered Jun 10, 2020 at 11:53

mohammad

5414 silver badges17 bronze badges

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

Collectives™ on Stack Overflow

How to extract data from a multidimensional array in Vue?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related