xhttp.onreadystatechange return undefined xhttp.responseText

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