Struggling to populate my existing array with elements from a JSON response using a button click. The issue lies in properly adding these elements to the array.
I have an empty array named results where I store the data from the response.
export default {
name: 'Posts',
props: ['user_id'],
data: function(){
return{
results: [],
pageNumber: 1,
}
},.....
This is the method I use to fetch the data:
getData: function () {
var vm = this;
axios.get('http://127.0.0.1:8000/api/posts?page=' + vm.pageNumber)
.then(function (response) {
vm.results += response.data.data;
})
.catch(function (error) {
});
},
In this method, I am appending the data from the response like this:
vm.results += response.data.data;
The response is correct, but after this operation, my results array looks like: "[object Object],[object Object]..."
I also attempted to add new elements using the push method:
vm.results.push(response.data.data);
However, this adds objects to new arrays rather than the existing one.
Here is the structure of the response:
{"current_page":1,
"data":[
{
"id":60,
"title":"Post 1",
"body":"Post 1 body",
"created_at":"2018-06-09 18:33:40",
"updated_at":"2018-06-09 18:33:40",
"user_id":8
},
{
"id":61,
"title":"Post 2",
"body":"post 2 body",
"created_at":"2018-06-09 18:33:40",
"updated_at":"2018-06-09 18:33:40",
"user_id":8
},
etc...]