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

Having trouble retrieving information from the JSON data received from the Google Place Search API

The data-src tags are functioning properly in the index.html file, but they are not working correctly in angular

Utilizing React to implement a search functionality with pagination and Material UI styling for

Directing a controller assignment in AngularJS 1.2 via a directive

Tips for transferring a Vuex-stored value to a variable within Vuejs 3 (Quasar 2)

I am seeking a way to conceal text in an HTML document using JavaScript when the browser window width is less than a specified amount, and reveal it when the window width exceeds that value

Encountering issues with resolving dependencies in webdriverIO

Tips for monitoring a variable within a Service using a Controller to trigger a modal?

Excluding form items that are disabled from a request in ReactJS

Discovering the number of intervals running at any given time within the console - JavaScript

Issue encountered while running the TestCafe Docker Image within a GitLab CI job. Attempting to run automated end-to-end tests on BrowserStack

The derived class did not contain the necessary constructor to deserialize an object of Type

What could be causing the "Error - Only secure origins are permitted" message to appear for my service worker?

Having trouble with either posting a JSON using $.ajax() or reading it using PHP?

Combining an AJAX POST within a JSON GET request

Enhance your Vue PWA by utilizing ServiceWorker to efficiently cache remote media assets fetched from an array of URLs

Guide to transmitting webcam feed from server to servlet

Guide to retrieving targeted JSON information with an identifier (React Hooks)

Leverage the power of React-PDF to smoothly magnify or minimize your

Issue with pop-up functionality on web page using HTML, CSS, and JavaScript