What is the best way to incorporate a JSON file into a JavaScript class?

Question

What is the best way to incorporate a JSON file into a JavaScript class?

I attempted to load a JSON file within a JavaScript class, but encountered an issue where the loaded data was only accessible inside a specific function.

 class CreatePage {
     constructor() {
        var request = new XMLHttpRequest();
        request.open('GET', 'data.json');
        request.responseType = 'json';
        request.send();
        request.onload = function() {
            this.data = request.response;
            alert(this.data[1].Name); // This works
        }       
    }
    
    test(name) {
        document.getElementById(name).innerHTML = this.data[1].Name;
    }
}

const page = new CreatePage();
page.test("xyz"); // TypeError: this.data is undefined

Is there a way to store the loaded data as a class property?

EDIT: I appreciate the responses received so far. Despite trying solutions like `self=this`, `bind(this)`, and the arrow operator, I am still encountering the same TypeReference error.

javascript json class

Answer 1

Answer №1

Simply swap out your callback function with an arrow function. When you make this change:

this.daten=request.response

this may not be what you assume it is ;) By using an arrow function, the value of this remains unchanged and will behave as expected.

class MakePage {
     constructor() {
        var request=new XMLHttpRequest();
        request.open('GET','daten.json');
        request.responseType='json';
        request.send();
        request.onload = () => {
            this.daten=request.response;
            alert(this.daten[1].Name); // this works
        }       
    }
    test(name) {
        document.getElementById(name).innerHTML=this.daten[1].Name;
    }
}

Alternatively, you can utilize bind.

    request.onload=function() {
        this.daten=request.response;
        alert(this.daten[1].Name); // this works
    }       
    request.onload = request.onload.bind(this);

Remember to refer to the documentation to gain a thorough understanding of how it operates: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

Answer 2

Simply swap out your callback function with an arrow function. When you make this change:

this.daten=request.response

this may not be what you assume it is ;) By using an arrow function, the value of this remains unchanged and will behave as expected.

class MakePage {
     constructor() {
        var request=new XMLHttpRequest();
        request.open('GET','daten.json');
        request.responseType='json';
        request.send();
        request.onload = () => {
            this.daten=request.response;
            alert(this.daten[1].Name); // this works
        }       
    }
    test(name) {
        document.getElementById(name).innerHTML=this.daten[1].Name;
    }
}

Alternatively, you can utilize bind.

    request.onload=function() {
        this.daten=request.response;
        alert(this.daten[1].Name); // this works
    }       
    request.onload = request.onload.bind(this);

Remember to refer to the documentation to gain a thorough understanding of how it operates: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

Answer 3

Answer №2

Consider swapping out the following code snippet:

request.onload=function() {
    this.data=request.response;
    alert(this.data[1].Name); // this works
}

with an arrow function like so:

request.onload=()=> {
    this.data=request.response;
    alert(this.data[1].Name); // this works
}

Answer 4

Consider swapping out the following code snippet:

request.onload=function() {
    this.data=request.response;
    alert(this.data[1].Name); // this works
}

with an arrow function like so:

request.onload=()=> {
    this.data=request.response;
    alert(this.data[1].Name); // this works
}

Answer 5

Answer №3

To enhance the callback function, make sure to include a reference like this:

 class GenerateContent {
     constructor() {
        var req=new XMLHttpRequest();
        req.open('GET','data.json');
        req.responseType='json';
        req.send();
        self=this;
        req.onload=function() {
            self.data=req.response;
            alert(self.data[1].Title); // see how it works
        }       
    }
    displayInfo(title) {
        document.getElementById(title).innerHTML=this.data[1].Name;
    }
 }

Answer 6

To enhance the callback function, make sure to include a reference like this:

 class GenerateContent {
     constructor() {
        var req=new XMLHttpRequest();
        req.open('GET','data.json');
        req.responseType='json';
        req.send();
        self=this;
        req.onload=function() {
            self.data=req.response;
            alert(self.data[1].Title); // see how it works
        }       
    }
    displayInfo(title) {
        document.getElementById(title).innerHTML=this.data[1].Name;
    }
 }

Answer 7

Answer №4

The this keyword within the context of the request.onload=function() does not point to the correct scope.

To address this issue, you can either utilize an arrow function such as request.onload = () => {} (which is the recommended approach), or store a reference to the outer scope by assigning const self = this at some point within the constructor.

Answer 8

The this keyword within the context of the request.onload=function() does not point to the correct scope.

To address this issue, you can either utilize an arrow function such as request.onload = () => {} (which is the recommended approach), or store a reference to the outer scope by assigning const self = this at some point within the constructor.

What is the best way to incorporate a JSON file into a JavaScript class?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Is it possible in HTML to detect any changes made to an input, not just those made by the keyboard?

Using jQuery to load HTML response into entire page

Arranging elements on a webpage using Javascript

Where can content-tag and main-tag be found in vue-virtual-scroller?

When working on a REST APIs project with ReactJS fetch and NodeJS, I am encountering difficulties in reading authorization headers on the server side

What method can I use in webpage coding to achieve this special highlight effect, and what is the official term for it?

Is async programming synonymous with multi-threading?

What is the best way to implement a sub-menu using jQuery?

Problem arising from animation not commencing at expected starting point

Display refined outcomes on the search results page

The clear function in the template slot of Vue multiselect is not functioning properly

Restricting variable values in Node.js

Is there a way to incorporate multer middleware into my express controller without using the router?

Emphasize the Jqgrid row when clicked on, but do not check the multiselect checkbox

Using JQuery to extract information from a JSON file

Looping through elements using .each in jQuery and accessing their values in the following iteration

Ways to retrieve nested data from an object

What could be causing the issue with export default not functioning as expected in this straightforward code?

Top Method for Reloading Element-Specific JavaScript When Replacing Elements

Creating a personalized Autocomplete feature using React Material-UI with the help of the renderInput method

What is the best way to incorporate a JSON file into a JavaScript class?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Is it possible in HTML to detect *any* changes made to an input, not just those made by the keyboard?

Using jQuery to load HTML response into entire page

Arranging elements on a webpage using Javascript

Where can content-tag and main-tag be found in vue-virtual-scroller?

When working on a REST APIs project with ReactJS fetch and NodeJS, I am encountering difficulties in reading authorization headers on the server side

What method can I use in webpage coding to achieve this special highlight effect, and what is the official term for it?

Is async programming synonymous with multi-threading?

What is the best way to implement a sub-menu using jQuery?

Problem arising from animation not commencing at expected starting point

Display refined outcomes on the search results page

The clear function in the template slot of Vue multiselect is not functioning properly

Restricting variable values in Node.js

Is there a way to incorporate multer middleware into my express controller without using the router?

Emphasize the Jqgrid row when clicked on, but do not check the multiselect checkbox

Using JQuery to extract information from a JSON file

Looping through elements using .each in jQuery and accessing their values in the following iteration

Ways to retrieve nested data from an object

What could be causing the issue with export default not functioning as expected in this straightforward code?

Top Method for Reloading Element-Specific JavaScript When Replacing Elements

Creating a personalized Autocomplete feature using React Material-UI with the help of the renderInput method

Is it possible in HTML to detect any changes made to an input, not just those made by the keyboard?