How do I access a property of each JSON object?

Question

So I am making an API call using Axios and I am pushing the JSON response to an empty array. Im having issues accessing the individual properties of each object. `

        <div class="wrapper">
            <div class="row">
                <div v-for="group in groups" :key="group.id">
                    <div class="col-md-4 cards">
                        <h3>{{ group[1].name }}</h3>
                        <h3>{{ group.name }}</h3>
                    </div>
                </div>
            </div>
        </div>
    </div>

and then my js is

import axios from 'axios'
export default {
    name: 'app',
        data () {
            return {
                groups: [],
                loading: false
            }
        },
        methods: {
            getHomes: function() {
                this.loading = true;
                axios.get("*******")
                    .then((response) =>{
                        this.loading = false;
                        this.groups.push(response.data);
                        // console.log(this.groups)
                    }, (error) => {
                        this.loading = false;
                    })

            },

I can access each individual group.name by hard coding the array index, but I'm having issues with dynamically accessing them.

Here is a picture of the response

Answer 1

Instead of doing this:

.then((response) =>{
  this.loading = false;
  this.groups.push(response.data);
}, (error) => {
  this.loading = false;
})

Just assign the response.data to the groups variable.

.then((response) =>{
  this.loading = false;
  this.groups = response.data;
}, (error) => {
  this.loading = false;
})

And in your template:

<div v-for="(group, index) in groups" :key="index">
  <div class="col-md-4 cards">
    <h3>{{ group.name }}</h3>
    <h4>{{ group.url }}</h4>
  </div>
</div>

The reason why you are not able to access the item is because you are pushing the object array inside an array, hence you would need to traverse the array inside another array.

Answer 2

In your example data set, the response.data you get in your Axios call seems to be already an array. You should be doing it this way.

"use strict";

import Vue from "vue";
import Axios from "axios";

export default Vue.component({
    data() {
        return {
            groups: [],
            loading: false
        };
    },

    created() {
        this.loading = true;

        axios.get("https://somwhere.com/api/something").then(response => {
            this.groups = response.data;
        }).finally(() => this.loading = false);
    }
});

Also, you should be doing the loading cancellation in a finally block. I took the initiative of adding it so that you can see how it is done even if it is out of the scope of the question.