xhttp.onreadystatechange return undefined xhttp.responseText - ajax

Question

I'm trying to access xhttp.responseText by calling it from another component but it shows undefined. Than I tried to access it from outside xtthp.onreadystatechange. Again it shows undefined. Kindly help me. I want to access it from another Component(login.component.ts).
Here's the files.
filedata.component.ts
import { Component, OnInit } from '#angular/core';
#Component(
{
selector: "file",
templateUrl: "./filedata.component.html",
})
export class FileData
{
makeRequest(): string
{
let input;
let xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function()
{
if (this.readyState === 4 && this.status === 200)
{
// here it's good
document.getElementById("demo").innerHTML = this.responseText;
input = this.responseText;
}
};
document.getElementById("demo").innerHTML = input; //here it's undefined
xhttp.open("GET", 'http://localhost/Angular-cli/login/employees.txt', true);
xhttp.send();
return input; //I want to call it from login.component.ts
}
}
filedata.component.html
<div>
<button type = "button" (click) = "makeRequest()">File Test</button>
<p id = "demo"></p>
</div>
login.component.ts
import { Component, OnInit } from '#angular/core';
import { AdminAccount } from '../admin/admin.component';
import { Router } from "#angular/router";
import {ReactiveFormsModule, FormsModule} from "#angular/forms";
import { FileData } from "../filedata/filedata.component";
#Component(
{
selector: "login",
templateUrl: "./login.component.html"
})
export class LoginForm
{
data = {username: "", password: ""};
input = {username: "", password: ""};
constructor(private router: Router, private filedata: FileData){}
formSubmit()
{
console.log("Input file data for login:", typeof(this.filedata.makeRequest()));
if(this.filedata.makeRequest()) //here it is undefined.
{
this.input.username = this.filedata.makeRequest().split("??")[0];
this.input.password = this.filedata.makeRequest().split("??")[1];
if(this.data.username == this.input.username && this.data.password == this.input.password)
{
this.router.navigate(["/admin"]);
}
else
console.log("Wrong User or Pass");
}
else
console.log("Undefined!");
this.data.username = "";
this.data.password = "";
}
}
I want to access responseText here by calling makeRequest. Any suggestions what's going on? What should I do to access responseText here.
this.input.username = this.filedata.makeRequest().split("??")[0];
this.input.password = this.filedata.makeRequest().split("??")[1];
if(this.data.username == this.input.username && this.data.password ==
this.input.password)
{
this.router.navigate(["/admin"]);
}

Answer 1

UPDATED: I think you need return async function. Try like this:
makeRequest(): any {
return new Promise(resolve => {
let xhr = new XMLHttpRequest();
xhr.withCredentials = true;
xhr.open("GET", 'http://localhost/Angular-cli/login/employees.txt', true);
xhr.onreadystatechange = () => {if(xhr.readyState === 4 && xhr.status === 200) resolve(xhr.responseText);};
xhr.send();
});
}
then use this function:
this.filedata.makeRequest().then(res => { if(res) {/* do what u want */} })
UPDATED 2: better use requests like this:
import { Http, RequestOptions, Response, Headers} from '#angular/http';
import { Observable } from "rxjs";
constructor(private http: Http){}
functionName() {
let headers = new Headers({ 'Content-Type': 'application/json' });
let options = new RequestOptions({ withCredentials: true, headers });
return this.http.get(`your url here`, options)
.map((res: Response) => {
return res.json();
})
.catch((error: Response) => {
return Observable.throw(`error: ${error}`);
})
}
then call function in component