CODEWITHSUNDEEP
jsonajaxvuejs2
Andreas Grafen
Andreas Grafen

Reputation: 125

vue.js json object array as data

aye folks!

I'm currently learning to do stuff with vue.js. unfortunately i'm stuck atm. what i want to do is sending a request to my sample API which responds with a simple json formatted object. I want to have this object as data in my component – but it doesn't seem to do that for whatever reason.

Ofc i tried to find a solution on stackoverflow but maybe i'm just blind or this is just like the code other people wrote. i even found this example on the official vue website but they're doing the same thing as i do .. i guess?

btw. When i run the fetchData() function in a separate file it does work and i can access the data i got from my API. no changes in the code .. just no vue around it. i'm really confused right now because i don't know what the mistake is.

code:

var $persons = [];

and inside my component:

data: {

  persons: $persons,
  currentPerson: '',
  modal: false

},


created: function() {

  this.fetchData()

},


methods: {

  fetchData: function () {

    var ajax = new XMLHttpRequest()

    ajax.open('GET', 'http://api.unseen.ninja/data/index.php')
    ajax.onload = function() {
      $persons = JSON.parse(ajax.responseText)
      console.log($persons[0].fname)
    }
    ajax.send()

  }

},

[...]

link to the complete code

Upvotes: 1

Views: 9680

Answers (1)

thanksd
thanksd

Reputation: 55634

First, make sure that the onload callback is actually firing. If the GET request causes an error, onload won't fire. (In your case, the error is CORS-related, see this post suggested by @Pradeepb).

Second, you need to reference the persons data property directly, not the $persons array that you initialized persons with.

It would look like this (inside your fetchData method):

var self = this;
ajax.onload = function() {
  self.persons = JSON.parse(ajax.responseText)
  console.log($persons[0].fname)
}

Upvotes: 2

Related Questions