Storing a string in a variable within Typescript

Question

Storing a string in a variable within Typescript

Attempting to read an XML file in Typescript using some JavaScript code, with the goal of adding the text content to a local variable. The code snippet is as follows:

import { Injectable } from '@angular/core';

@Injectable()
export class JsonreaderService {    

private jsonText: string;

constructor() {
  this.readTextFile("../../assets/content.json");
}

readTextFile(file)
{
  let jsonText: string;
  var rawFile = new XMLHttpRequest();
  rawFile.open("GET", file, false);
  rawFile.onreadystatechange = function ()
  {
    if(rawFile.readyState === 4)
    {
      if(rawFile.status === 200 || rawFile.status == 0)
      {
        this.jsonText = rawFile.responseText;
      }
    }
  }
  rawFile.send(null);
}
}

Effort to assign text from the JSON file to private local variable jsonText - both being of type 'string':

this.jsonText = rawFile.responseText;

Encountering an error when trying:

Property 'jsonText' does not exist on type 'XMLHttpRequest'

Would appreciate any insight on executing this task in TypeScript. Omitting this. allows for defining responseText to the jsonText variable within the function readTextFile(file).

javascript typescript

Answer 1

Answer №1

One possible solution could be to store a reference to the class in a variable like this:

import { Injectable } from '@angular/core';

@Injectable()
export class JsonReaderService {

private jsonText: string;

constructor() {
  this.loadJsonFile("../../assets/data.json");
}

loadJsonFile(file) {
  var self = this;
  let jsonText: string;
  var request = new XMLHttpRequest();
  request.open("GET", file, false);
  request.onreadystatechange = function () {
    if(request.readyState === 4) {
      if(request.status === 200 || request.status == 0) {
        self.jsonText = request.responseText;
      }
    }
  }
  request.send(null);
}
}

Answer 2

One possible solution could be to store a reference to the class in a variable like this:

import { Injectable } from '@angular/core';

@Injectable()
export class JsonReaderService {

private jsonText: string;

constructor() {
  this.loadJsonFile("../../assets/data.json");
}

loadJsonFile(file) {
  var self = this;
  let jsonText: string;
  var request = new XMLHttpRequest();
  request.open("GET", file, false);
  request.onreadystatechange = function () {
    if(request.readyState === 4) {
      if(request.status === 200 || request.status == 0) {
        self.jsonText = request.responseText;
      }
    }
  }
  request.send(null);
}
}

Answer 3

Answer №2

Utilize an arrow function for preserving the context of this:

retrieveFileData(file)
{
  let jsonData: string;
  var fileRequest = new XMLHttpRequest();
  fileRequest.open("GET", file, false);
  fileRequest.onreadystatechange = () =>
  {
    if(fileRequest.readyState === 4)
    {
      if(fileRequest.status === 200 || fileRequest.status == 0)
      {
        this.jsonData = fileRequest.responseText;
      }
    }
  }
  fileRequest.send(null);
}

Answer 4

Utilize an arrow function for preserving the context of this:

retrieveFileData(file)
{
  let jsonData: string;
  var fileRequest = new XMLHttpRequest();
  fileRequest.open("GET", file, false);
  fileRequest.onreadystatechange = () =>
  {
    if(fileRequest.readyState === 4)
    {
      if(fileRequest.status === 200 || fileRequest.status == 0)
      {
        this.jsonData = fileRequest.responseText;
      }
    }
  }
  fileRequest.send(null);
}

Storing a string in a variable within Typescript

Answer №1

Answer №2

Similar questions

Manipulate image position with touchmove event using CSS3 transformations on an iPad

How can I ensure that my script reruns when the window is resized?

What is the best way to create a universal limitation for a larger collection of a discriminated union?

The function did not execute properly, resulting in the express route returning no value

What could be causing the NoScript tag to malfunction across different web browsers?

Using Typescript to test with Karma, we can inject a service for our

Looking to conceal an <hr> element using jQuery's slideToggle function and then reveal it when clicked once more

Strategies for bypassing Jquery form validation within a single form element

Using a React PureComponent to pass parameters from a Child component

How can you loop through keys and values in a JSON object using JavaScript?

Can someone explain the variance between these two script codes? Are they entirely distinct, or can I utilize just one source?

Angular directive for resizing C3 charts

acquiring the main class instance within a function without relying on an arrow function

utilize jQuery and AngularJS to transform a JSON object into a nested JSON structure

Using both ng-if and ng-click in AngularJS for enhanced functionalities

I'm curious, is there a method to add animation to dynamically adjust the size of the header within the HeaderFooterLayout

Exploring elementary Expressjs query concepts

Implementing a restricted Mongoose promise loop iteration count

Observing the state of a variable within a directive using a service from a different module

I am looking to modify the appearance of specific sections of a searched word in React.js, such as making them bold or lighter. Can anyone