CODEWITHSUNDEEP
javascriptarraysjsonobjectvue.js
VividDreams
VividDreams

Reputation: 93

Vue.js add objects to existing array

I'm trying to add elements from json response to my existing array by clicking on a button but I have a problem with adding these elements properly.

Here I have an empty array called results where I'm storing my data from response.

export default {
  name: 'Posts',
  props: ['user_id'],
  data: function(){
      return{
          results: [],
          pageNumber: 1,
      }
  },.....

This is my method for getting 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'm adding response data to array like this:

vm.results += response.data.data;

My respose is correct but after this operation my results array look like: "[object Object],[object Object]..."

I have also tried to add new elements by push method:

vm.results.push(response.data.data);

But then, elements are added in new arrays but I want to add objects to existing array.

Here is the structure of my 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...]

Upvotes: 2

Views: 33544

Answers (3)

Philip Feldmann
Philip Feldmann

Reputation: 8365

First of all you don't have to use var vm = this;, this.results will work even in your axios (and every other) callbacks in the context of a vue component.

But the actual problem is that you are using the concatenation += operator to add to an array. Simply use push with the spread operator (...) instead and it should work.

axios.get('http://127.0.0.1:8000/api/posts?page=' + this.pageNumber)
.then(response => {
    this.results.push(...response.data.data);

})

Upvotes: 7

connexo
connexo

Reputation: 56720

ES6 way of doing this is using the spread operator ...:

let a = [{name: 'Peter'}]
let b = [{name: 'Joanna'}, {name: 'Steven'}]

// use JSON.stringify so you don't see [Object object] when console logging
console.log('[...a, ...b]' + JSON.stringify([...a, ...b]))

When used on an array ...arr it means give me all elements in arr here, when used on an object ...obj it means give me a shallow copy of all enumerable properties of obj.

Just to prove it works with your case:

let origArr = [{
    "id": 58,
    "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": 59,
    "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
  }
]
let response = {
  data: {
    "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
      }
    ]
  }
}

console.log(JSON.stringify([...origArr, ...response.data.data]))

Upvotes: 0

JeffProd
JeffProd

Reputation: 3148

Try :

vm.results =  vm.results.concat(response.data.data);

This will append the array "response.data.data" to the "results" array.

Upvotes: 8

Related Questions