CODEWITHSUNDEEP
jsonangulartypescriptyaml
TheCoderGuy
TheCoderGuy

Reputation: 873

How to get data of YAML file in the Angular 7 array of objects

I know how to get a JSON file and to show it in the array in Angular 7 but I am having a problem with the YAML file I have searched and I really do not know how to get in the array the YAML

For the moment I have tried this but it is coming with errors.

Service

@Injectable({
  providedIn: 'root'
})
export class getYamlDataService {

  constructor(private http: HttpClient) {
    this.getJson().subscribe(data => {
      console.log(data);
    })
  }

  public getJson(): Observable<any> {
    return this.http.get("./assets/swagger/swagger.yaml");
  }
}

Component.ts

constructor(private getYamlData: getYamlDataService) {}
ngOnInit() {
    this.getYamlData.getJson().subscribe(data => {
      console.log(data);
    });

Error

Http failure during parsing for http://localhost:4200/assets/swagger/swagger.yaml

But when I open this localhost then it is showing in browser yaml file.

Upvotes: 1

Views: 9763

Answers (1)

pascalpuetz
pascalpuetz

Reputation: 5418

This is due to your response being parsed as a JSON Object instead of returning a plain string. If you look at the API of HttpClient.get(string) without an options parameter, you will see that the response is observed as a json (found here, 15th overload)

get<T>(url: string, options?: { headers?: HttpHeaders | { [header: string]: string | string[]; }; observe?: "body"; params?: HttpParams | { [param: string]: string | string[]; }; reportProgress?: boolean; responseType?: "json"; withCredentials?: boolean; }): Observable<T>

You have to specify the return type you want (in this case most likely "text")

@Injectable({
  providedIn: 'root'
})
export class getYamlDataService {

  constructor(private http: HttpClient) {
    this.getJson().subscribe(data => {
      console.log(data);
    })
  }

  public getJson(): Observable<any> {
    return this.http.get("./assets/swagger/swagger.yaml", {
      observe: 'body',
      responseType: "text";   // This one here tells HttpClient to parse it as text, not as JSON
    });
  }
}

If you want to use that yaml as a JavaScript Object, you will have to parse it yourself. Luckily, there are already libararies like yaml.js that you can leverage for this. First, install the libarary npm i --save yamljs and then use it like this:

import {parse} from 'yamljs';
import {map} from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class getYamlDataService {

  constructor(private http: HttpClient) {
    this.getJson().subscribe(data => {
      console.log(data);
    })
  }


  public getJson(): Observable<any> {
    return this.http.get("./assets/swagger/swagger.yaml", {
      observe: 'body',
      responseType: "text"   // This one here tells HttpClient to parse it as text, not as JSON
    }).pipe(
      // Map Yaml to JavaScript Object
      map(yamlString => parse(yamlString))
    );
  }
}

Here is a working StackBlitz showcasing this.

Edit: Added example for parsing the returned string to a JavaScript Object

Edit2: Added StackBlitz example

Upvotes: 5

Related Questions