Javascript / vue.js receive json

Question

I'm trying to receive json in my vue.js app like this:

  new Vue({
            el: 'body',
            data:{
                role: '',
                company: '',
                list:[],
                created: function() {
                  this.getJson();
                },
                methods: {
                    getJson: function(){
                        $.getJSON('http://domain.dev/data',function(task){
                          this.list = task;
                        }.bind(this));
                    }
                }
            }
        });

But the result is null? When I test this in postman the url returns json. What am I doing wrong here?

EDIT:

JSON (testdata):

{"EmployeeId":1,"RoleId":5,"DepartmentId":6,"InternId":1,"FirstName":"Zoe","LastName":"Altenwerth","Bio":"Quidem perferendis.","email":"[email protected]","LinkedIn":"[email protected]","Gender":0,"password":"$2y$10$bbUlDh2060RBRVHSPHoQSu05ykfkw2hGQa8ZO8nmZLFFa3Emy18gK","PlainPassword":"gr^S=Z","remember_token":"D528C0Ba1Xzq3yRV7FdNvDd8SYbrM0gAJdFUcOBq4sNEJdHEOb2xIQ0geVhZ","Address":"0593 Dallin Parkway Apt. 499\nBotsfordborough, MT 12501","Zip":"21503-","City":"East Janiston","ProfilePicture":null,"BirthDate":"2002-10-13 00:00:00","StartDate":"1995-11-09 21:42:22","EndDate":"2011-01-27","Suspended":0,"created_at":"2016-02-29 12:21:42","updated_at":"2016-03-02 11:53:58","deleted_at":null,"role":{"RoleId":5,"RoleName":"Superadministrator","Description":"Mag administrators toevoegen en bewerken","deleted_at":null,"created_at":"-0001-11-30 00:00:00","updated_at":"-0001-11-30 00:00:00"},"department":{"DepartmentId":6,"CompanyId":12,"DepartmentName":"com","Description":"Accusantium quae.","deleted_at":null,"created_at":"2016-02-29 12:21:41","updated_at":"2016-02-29 12:21:41","company":{"CompanyId":12,"CompanyName":"Dare, Bailey and Bednar","Logo":null,"Address":"85762 Tabitha Lights\nWest Jettie, AK 20878-2569","Zip":"29601","City":"Traceside","KvKNumber":"84c70661-9","EcaboNumber":"fdee61e3-a22d-3332-a","deleted_at":null,"created_at":"2016-02-29 12:21:41","updated_at":"2016-02-29 12:21:41"}}}

vbarbarosh · Accepted Answer · 2016-03-03 13:08:20Z

22

Here is a little example of how to load external JSON data into your component:

a.json:

{"hello": "welcome"}

index.html:

<div id="app">
    <pre>{{ json.hello }}</pre>
</div>

<script type="text/javascript">
var app = new Vue({
    el: '#app',
    data: {
        json: null
    }
});
$.getJSON('http://localhost/a.json', function (json) {
    app.json = json;
});
</script>

--- Edited ---

Or with created event:

<script type="text/javascript">
new Vue({
    el: '#app',
    data: {
        json: null
    },
    created: function () {
        var _this = this;
        $.getJSON('http://localhost/a.json', function (json) {
            _this.json = json;
        });
    }
});
</script>

edited Mar 3, 2016 at 13:08

answered Mar 3, 2016 at 11:35

vbarbarosh

3,7124 gold badges38 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Suat Atan PhD Over a year ago

What is the meaning of _this ? Why we cannot use this?

vbarbarosh Over a year ago

@SuatAtanPhD There are 3 ways to access this. 1) using variable like _this; 2) using arrow function () => {...}; 3) using bind function(){}.bind(this). I choose first option.

sn4ke Over a year ago

@vbarbarosh how does _this connect to data?, in normal vue apps this.json = json works, but not in this instance. (your method does work, just curious how)

vbarbarosh Over a year ago

Two lines above - var _this = this;.

Ñhosko Over a year ago

I'm new to vue - and looking at it as a replacement to jquery for my purposes. Somehow using .getJSON inside vue feels wrong.. why not axios? vuejs.org/v2/cookbook/using-axios-to-consume-apis.html

|

antoine · Accepted Answer · 2017-06-29 00:11:21Z

14

Building on @vbarbarosh's answer, but using the browser's fetch api:

a.json:

{"hello": "welcome"}

index.html:

<div id="app">
    <pre>{{ json.hello }}</pre>
</div>

<script type="text/javascript">
new Vue({
    el: '#app',
    data: {
        json: null
    },
    created: function () {
      fetch("/a.json")
        .then(r => r.json())
        .then(json => {
          this.json=json;
        });
    }
});
</script>

answered Jun 29, 2017 at 0:11

antoine

2,10625 silver badges17 bronze badges

3 Comments

alttag Over a year ago

Any particular reason you went with created rather than beforeCreate? (The Vue lifecycle diagram shows all available hooks.)

Howdy Over a year ago

I have issues running this code in IE11 on this line .then(r => r.json()) even after having polyfill.

Ideogram Over a year ago

developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

Lars Graubner · Accepted Answer · 2016-03-03 11:21:42Z

6

You have to bind this to the outer function, too.

getJson: function () { ...}.bind(this)

answered Mar 3, 2016 at 11:21

Lars Graubner

8374 silver badges9 bronze badges

5 Comments

Lars Graubner Over a year ago

Does task contains any data?

Jamie Over a year ago

When I console.log(task); it's not showing anything in the console?! (And I included jquery)

Jamie Over a year ago

it can't be the problem because it returns json please see my edit.

Lars Graubner Over a year ago

Then your Ajax request seems to fail somehow. Anyway regarding you initial question you can check if this.list = 'test' works to seperate your problems.

Jamie Over a year ago

Ohhh I found it a beginner mistake -_- I had created() within the data section. Thanks for your help.

glitchyme · Accepted Answer · 2021-07-23 15:28:04Z

1

Update for Vue3

const app = Vue.createApp({
    data: function() {
        return {
            role: '',
            company: '',
            list:[]
        };
    },
    beforeMount: function() {
        this.getJson();
    },
    methods: {
        getJson: function(){
            $.getJSON('http://domain.dev/data',function(task){
                this.list = task;
            }.bind(this));
        }
    }
});

const mountedApp = app.mount('body');

answered Jul 23, 2021 at 15:28

glitchyme

2893 silver badges15 bronze badges

Collectives™ on Stack Overflow

Javascript / vue.js receive json

4 Answers 4

6 Comments

3 Comments

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

3 Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related