Receiving JSON using Javascript and vue.js

Question

Receiving JSON using Javascript and vue.js

When attempting to fetch json data in my vue.js application, I use the following code:

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

However, the result is coming back as null. Strangely enough, when I test the URL using Postman, it returns valid JSON data. What could be the issue here?

UPDATE:

Here is an example of the JSON data (testdata):

{"EmployeeId":1,"RoleId":5,"DepartmentId":6,"InternId":1,"FirstName":"Zoe","LastName":"Altenwerth","Bio":"Quidem perferendis.","email":"example@email.com","LinkedIn":"example@linkedin.com","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"}}}

javascript json vue.js

Answer 1

Answer №1

Let's dive into a simple example on how to import external JSON data into your component:

example.json:

{"greetings": "hello"}

index.html:

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

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

--- Updated ---

Alternatively, you can utilize the created event:

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

Answer 2

Let's dive into a simple example on how to import external JSON data into your component:

example.json:

{"greetings": "hello"}

index.html:

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

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

--- Updated ---

Alternatively, you can utilize the created event:

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

Answer 3

Answer №2

Expanding on @vbarbarosh's response, utilizing the fetch api of the browser:

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>

Answer 4

Expanding on @vbarbarosh's response, utilizing the fetch api of the browser:

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>

Answer 5

Answer №3

To properly connect this to the outer function, ensure you bind it there as well.

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

Answer 6

To properly connect this to the outer function, ensure you bind it there as well.

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

Answer 7

Answer №4

Latest Vue3 Update

const app = Vue.createApp({
    data() {
        return {
            role: '',
            company: '',
            list:[]
        };
    },
    beforeMount() {
        this.fetchData();
    },
    methods: {
        fetchData() {
            $.getJSON('http://website.com/data', (response) => {
                this.list = response;
            });
        }
    }
});

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

Answer 8

Latest Vue3 Update

const app = Vue.createApp({
    data() {
        return {
            role: '',
            company: '',
            list:[]
        };
    },
    beforeMount() {
        this.fetchData();
    },
    methods: {
        fetchData() {
            $.getJSON('http://website.com/data', (response) => {
                this.list = response;
            });
        }
    }
});

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

Receiving JSON using Javascript and vue.js

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Error encountered while attempting to convert a unique custom object to JSON in Jersey

Tips for sending Decimal objects to JSON in Django

Tips for retrieving the ID of a newly added Firestore document in Vue.js

`Proliferating values through constantly changing addition`

Transform a CSV file into a JSON object containing arrays of numbers

Tips for customizing the border of an outlined TextField in MUI

How do you adapt nested JSON data when editing sub-columns in a Webix datatable?

Using Vue.js within Cordova platform allows developers to create dynamic

If the PHP variable evaluates to true, then a CJuiDialog in Yii view will open

Leveraging a component as a property of an object in Vue version 3

Ways to adjust the color of individual elements within an array

Grouping various event listeners within a v-for loop

AJAX: Enhancing Web Pages without Replacing JavaScript

Can media queries styles be applied to a window of random size using JavaScript?

Specify touch event regions with the ngTouch directive

Next.js presents a challenge with micro frontend routing

What is the functionality of the save callback in Mongoose?

Conceal dynamically generated div elements created with ngIf

Transferring PointLight Parameters to a Custom Shader using three.js

Comparison of WebAPI Response Codes: Understanding the Difference Between 401 and