littleboby
601
15
Vue

Getting all json instances from an axios response dynamically

Posted 1 month ago by littleboby

I am giving my API-Resource to my vue component, but I cannot access all the single id's.

Route:

// Get all Groups
Route::get('groups', '[email protected]');

Index method:

public function index() {
        // Get Groups
        $groups = Groups::paginate(10);

        // Return collection of Groups as a resource
        return GroupsResource::collection($groups);
    }

and the Resource itself:

class Groups extends JsonResource {
    /**
     * Transform the resource into an array.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return array
     */
    public function toArray($request) {
        return [
            'type' =>'group',
            'id' => $this->id,
            'attributes' => [
                'name' => $this->name,
                'description' => $this->description,
            ],
        ];
    }

    public function with($request) {
        return [
            'version' => '1.0.0',
            'author_url' => url('http://www.blabla.com')
        ];
    }
}

My Component looks like this:

<template>
    <div class="group-card">
        <div v-for="group in groups" class="demo-card-wide mdl-card mdl-shadow--2dp" :group="group">
            <div class="mdl-card__title">
                <h2 class="mdl-card__title-text"> {{ group.name }}</h2>
            </div>
            <div class="mdl-card__supporting-text">
                {{ group.description }}
            </div>
            <div class="mdl-card__actions mdl-card--border">
                <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect"> Get Started </a>
            </div>
            <div class="mdl-card__menu">
                <button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
                <i class="material-icons">share</i>
                </button>
            </div>
        </div>
    </div>
</template>


<script>
export default {
    data: function() {
        return {
            groups: [],
            group: [{ // commenting this out has absolutely no effect
                    name: "",
                    description : ""
                }]
        }
    },

    methods: {
        getGroups() {
            axios.get('/api/groups')
            .then(function (response) {
                console.log(response.data.data[0].attributes.name); // this line is where we are getting our Name value from
                this.groups = response.data.data[0].attributes; // this line doesn't work
            })
        }
    },

    mounted() {
    console.log('Group Card mounted.');
    this.getGroups();
    }

}
</script>

While as a response in my console log I get:

Aliquam autem voluptas ipsa non. // the name
app.js:1914 Uncaught (in promise) TypeError: Cannot set property 'groups' of undefined
    at app.js:1914

Also I should mention, what I get as response.data is the following:

{data: Array(10), links: {…}, meta: {…}}
data: Array(10)
0:
attributes:
description: "Esse doloremque iste aperiam atque minus ab illum dolores dignissimos amet illum voluptatem voluptas."
name: "Aliquam autem voluptas ipsa non."
__proto__: Object
id: 1
type: "group"
__proto__: Object
1: {type: "group", id: 2, attributes: {…}}
2: {type: "group", id: 3, attributes: {…}}
3: {type: "group", id: 4, attributes: {…}}
4: {type: "group", id: 5, attributes: {…}}
5: {type: "group", id: 6, attributes: {…}}
6: {type: "group", id: 7, attributes: {…}}
7: {type: "group", id: 8, attributes: {…}}
8: {type: "group", id: 9, attributes: {…}}
9: {type: "group", id: 10, attributes: {…}}
length: 10
__proto__: Array(0)
links: {first: "http://www.styx-occursum.io/api/groups?page=1", last: "http://www.styx-occursum.io/api/groups?page=2", prev: null, next: "http://www.styx-occursum.io/api/groups?page=2"}
meta: {current_page: 1, from: 1, last_page: 2, path: "http://www.styx-occursum.io/api/groups", per_page: 10, …}
__proto__: Object

The group component, (in itself a material design card element) is not being shown at this point. As you can see I can access the attributes.name of a single un-dynamical instance and I cannot "fill" the groups array declared at the top.

  • How do I access all the instances of this Json object and give it back at the HTML above?

Thanks in advance and sorry for the long post, I'm trying to give as much info as possible.

Please sign in or create an account to participate in this conversation.