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

What steps can I take to troubleshoot the cause of my browser freezing when I try to navigate to a different webpage

Passing parameters in a jQuery function through a button click

looping through the elements in a collection using a for-in loop

Difficulty encountered when trying to template routes with more than one slash in Angular-route

Using JavaScript's if-else statements is akin to a checkbox that is always in its

What is preventing the MenuItem component from functioning as a Link in React Material-UI?

The JavaScript date picker is malfunctioning in the HTML editor, but it functions properly in Fiddle

Angular error: Trying to assign a value of type ArrayBuffer to a string type

Encountering a TypeError message stating: "list indices must be integers or slices, not list," while attempting to insert JSON data into a

Discovering the method to incorporate a data-icon attribute within select options using vue.js

retrieving data from a php file using ajax for a post request

The system encountered an error while attempting to access the property "getChild" of an unspecified object

React not functioning properly when packaged with Webpack

First render does not define useEffect

Ways to Load JSON Content by Directly Pointing to a Node Module

What is the best way to reference a div link from a different PHP file?

The jQuery AJAX request is not returning a truthy value when parsing

Retrieving a variable value from an AJAX call for external use

Retrieve the body's coordinates when dragging an element using the jQuery UI library

Error Occurs While Getting Request Parameters with Ajax Post and Express.js