Why me subscribe method in angular is not working?

Question

I'm new in Angular, Nodejs and I was doing a CRUD app of txt files
I have to list all the files in a list, if you click one file need to display the data on a 'P'aragraph
My document component
getDocuments() - returns an array of all files in a path getOneDOcument(name) -> get all the data of a file given "name" getData(name) -> have to send the data to the paragraph with the id _> "paragraph_content"

  getDocuments(){
    this.DocumentService.getDocuments()
        .subscribe(res => {
          this.DocumentService.documents = res as Document[]
          console.log("dentro del susbcribe");
          console.log(res);
        });
    console.log("Fuera del subscribe");
  }

  getOneDocument(name : String){
    console.log("NOO");

    this.DocumentService.getOneDocument(name).subscribe(res => {
            this.DocumentService.documentSelected = res as Document;          
            console.log("."); 
        });

  }

  getData(name : String){
    console.log("hello name -> " , name)
    // document.getElementById("paragraph_content").innerHTML = this.DocumentService.getOneDocument(name)

    console.log("Before the subscrie");
    this.DocumentService.getOneDocument(name)
        .subscribe( (res ) =>{
          //I need to change the paragraph content like this
          //document.getElementById("paragraph_content").innerHTML = res.toString() Not working
          console.log("Within", res);
        } )
    console.log("After Subscribe ")
  }

Document Service
I got the arrays of the url given

  getDocuments(){
    console.log("Get Documents method");

   return this.http.get(this.URL_API );
  }
  getOneDocument(name: String){
    console.log("Get OneDocyment method name given: " , name);
    return this.http.get(this.URL_API + `/${name}`)
  }

  postDocument(){
   //left
  }

  deleteDocument(name:String){
   //left
  }

Document Component html

<nav>
        <ul class="ds-list-unstyled" *ngFor="let document of DocumentService.documents">
            <li><a href="#" (click)="getData(document)"> {{document}}  </a></li>
        </ul>
    </nav>

    <article>
        <h2>Texto en pantalla: </h2>
        <p id="paragraph_content">Needs to change with a click
        </p>

    </article>

And the responde that I got when I click a file is:

Thanks in advance

Answer 1

The XMLHttpRequest property responseType is an enumerated string value specifying the type of data contained in the response. It also lets the author change the response type. You should set the responseType to text.

Try like this

getOneDocument(name: String){
    console.log("Get OneDocyment method name given: " , name);
    const requestOptions: Object = {
     responseType: 'text'
   }  
   return this.http.get(`${this.URL_API}/${name}`,requestOptions )

  }