vue.js json object array as data

Question

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

thanksd · Accepted Answer · 2017-09-05T14:42:42.390

2

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)
}

edited Sep 05 '17 at 14:42

answered Sep 05 '17 at 13:31

thanksd

54,176
22
157
150

I tried it that way before but it doesn't work. I still get no output. I think that the ajax.onload function doesn't even fire. (added some consolte logs and the one inside this function doesn't show up.) – Andreas Grafen Sep 05 '17 at 13:39
You're sure that `ajax.responseText` is valid JSON? – thanksd Sep 05 '17 at 13:57
@AndreasGrafen are you sure that above suggestion not working? Check this [out](https://jsfiddle.net/ph7w4j4h/). It works fine. If you find it not working, then you must be getting some error in networks tab. – Pradeepb Sep 05 '17 at 14:02
I'm sure that it's valid json, yes. The fiddle doesn't work for me either. All i see is blank space. http://i.epvpimg.com/8Trmbab.png – Andreas Grafen Sep 05 '17 at 14:18
The fiddle didn't work for me either. But that was because of a network error. Are you experiencing a network error? – thanksd Sep 05 '17 at 14:19
@thanksd nope. status code 200 for every request i'm sending – including the api request. :/ – Andreas Grafen Sep 05 '17 at 14:24
Wherever you're seeing the 200 response should also include the response data. What does that look like? – thanksd Sep 05 '17 at 14:28
You both got the error in console? `XMLHttpRequest cannot load https://api.unseen.ninja/data/index.php. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://fiddle.jshell.net' is therefore not allowed access.` ?? – Pradeepb Sep 05 '17 at 14:30
2

If you get the error as above, use [this](https://stackoverflow.com/a/28848096/2334849) solution. Then JSFIDDLE will work. – Pradeepb Sep 05 '17 at 14:31
@thanksd the repsonse i get is the data array the api generates: http://i.epvpimg.com/zqJ4gab.png – Andreas Grafen Sep 05 '17 at 14:34
And you're not getting a `No 'Access-Control-Allow-Origin' header` error in the console? Does this fiddle alert you? https://jsfiddle.net/ph7w4j4h/1/ – thanksd Sep 05 '17 at 14:37
i just downloaded chrome to check if the solution Pradeebb provided does help with jsfiddle. It does work with the plugin and i also get an alert with your fiddle. I guess i know what the problem is now. I'll have a look into cors and set it up on the server. o: – Andreas Grafen Sep 05 '17 at 14:40
phew. Everything does work now. I'm so glad this site exists. No way i would have figured that out by myself. Thank you very much guys! <3 – Andreas Grafen Sep 05 '17 at 14:50

vue.js json object array as data

1 Answers1

Linked