1

I am creating a project that takes a GET call from an API and writes out select data from the result to a text file. I understand how to call the API and to print out the select data to the console and the page itself, but I am struggling with putting that data into a text file. Here is the typescript class I have to call the API

export class LoginComponent implements OnInit {
  url = '';
  login = '';
  pass = '';
  token = '';
  dataToToken = '';
  loginPassed = false;
  response: any;



  constructor(private http: HttpClient) {  
  }

  ngOnInit(): void{
    
  }

  onCreateData(){
    this.loginPassed = true;
    if(this.token === ''){
      this.dataToToken = 'Basic ' + btoa(this.login + ':' + this.pass);
    }
    else if (this.login === ''){
      this.dataToToken = this.token;
    }
    else{
      this.dataToToken = this.token;
    }
    const httpOptions = {
      headers: new HttpHeaders({
        'Content-Type':  'application/json',
        'Authorization': this.dataToToken
      })
    };
    this.http.get(this.url, httpOptions).subscribe((response) => {
      this.response = response;
    });
  
  }

}

And here is my HTML code for printing out the data I want to the page:

<p>URL:</p>
<input
    type="text"
    class="form-control"
    [(ngModel)]="url">
<br>
<br>
<p>Username:</p>
<input
    type="text"
    class="form-control"
    [(ngModel)]="login">
<p>Password:</p>
<input
     type="password"
     class="form-control"
     [(ngModel)]="pass">
  
<br>
<h4>OR:</h4>
<br>
<p>Token:</p>
<input
    type="text"
    class="form-control"
    [(ngModel)]="token">
<br>
<br>
<button
    class="btn btn-primary"
    (click)="onCreateData()">Submit</button>
<hr>
<ng-container *ngIf="loginPassed">
    <p>Data from API:</p>
    <p *ngFor="let lines of this.response"> {{ lines.line1 }} <br> {{ lines.line2 }}</p>
</ng-container>

How do I take the data I collected (line1 and line2) and put them into a downloadable text file?

Petlover620
  • 115
  • 1
  • 11

1 Answers1

1

Change the below code. 

onCreateData(){
    this.loginPassed = true;
    if(this.token === ''){
      this.dataToToken = 'Basic ' + btoa(this.login + ':' + this.pass);
    }
    else if (this.login === ''){
      this.dataToToken = this.token;
    }
    else{
      this.dataToToken = this.token;
    }
    const httpOptions = {
      headers: new HttpHeaders({
        'Content-Type':  'application/json',
        'Authorization': this.dataToToken
      })
    };
    this.http.get(this.url, httpOptions).subscribe((response) => {
      this.response = response;
  let line_1_2 = {line1:this.response.line1 , line2:this.response.line2}
 const blob = new Blob([line_1_2], { type: 'text/csv' });
  const url= window.URL.createObjectURL(blob);
  window.open(url);
    });
  
  }
if doesn't open the new window please check that you have already imported 'rxjs/Rx' ; 

import 'rxjs/Rx' ;
surendra kumar
  • 1,686
  • 11
  • 15
  • When I change my code there, I get the error: "Type '{ line1: any; line2: any; }' is not assignable to type 'BlobPart'. Type '{ line1: any; line2: any; }' is missing the following properties from type 'Blob': size, type, arrayBuffer, slice, and 2 more." Is there something else I need to add to the blob to get this to work? – Petlover620 Jul 07 '20 at 15:19
  • 1
    add the code here. const blob = new Blob([line_1_2 as BlobPart], { type: 'text/csv' }); – surendra kumar Jul 08 '20 at 04:10
  • When I add that code, I now get the error " Type '{ line1: any; line2: any; }' is missing the following properties from type 'Blob': size, type, arrayBuffer, slice, and 2 more." Does a Blob need other parameters? – Petlover620 Jul 08 '20 at 14:47
  • And on top of that, the code runs, but instead of the two lines, [object Object] writes to a file. – Petlover620 Jul 08 '20 at 14:55
  • Tomorrow morning I will check the issue. – surendra kumar Jul 08 '20 at 14:56
  • Thank you! If you know of the issue that would be so helpful. – Petlover620 Jul 09 '20 at 14:25