How to map Object from http.get to Array?

Question

I have a service that fetches JSON data from local files. I would like to convert the Object type that http.get returns to this array: Array<{ bookName: string, bookId: number }>. You can see all of my source code in this Github repository.

bible.service.ts

import { Injectable } from '@angular/core';

import { HttpClient } from "@angular/common/http";

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

  constructor(private http: HttpClient) { }

  public fetch(file: string) {
    return this.http.get(file);
  }
}

bible.component.ts (simplified)

import { Component, OnInit } from '@angular/core';

import { BibleService } from "../bible.service";

@Component({
  selector: 'app-bible',
  templateUrl: './bible.component.html',
  styleUrls: ['./bible.component.scss']
})
export class BibleComponent implements OnInit {
  dataBooks: Array<{ bookName: string, bookId: number }>;

  constructor(
    private bibleService: BibleService,
  ) {
    // fetch JSON data asynchronously 
    this.bibleService.fetch('./assets/bible/books.json')
      .subscribe(response => {
        this.dataBooks = response;  // how do I map this?
      }, error => {
        console.error(error);
      }, () => {
      });
  }

  ngOnInit() {
  }
}

The code is currently working with type any, but I would like to be more explicit with the data.

angular.io/guide/http

jonrsharpe
– jonrsharpe

2019-07-20 21:50:40 +00:00
Commented Jul 20, 2019 at 21:50 — jonrsharpe
– jonrsharpe, Commented Jul 20, 2019 at 21:50

pascalpuetz · Accepted Answer · 2019-07-20 22:34:58Z

1

One of the overloads for the httpClient.get() method allows to specify the type that it returns:

import { Injectable } from '@angular/core';

import { HttpClient } from "@angular/common/http";

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

  constructor(private http: HttpClient) { }

  public fetch(file: string) {
    return this.http.get<Array<{ bookName: string, bookId: number }>>(file); // <---------------
  }
}

answered Jul 20, 2019 at 22:34

pascalpuetz

5,4281 gold badge15 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

xinthose Over a year ago

OK. Thank you sir. I suppose I need a separate service method for each return then: books, chapters, and verses.

xinthose Over a year ago

It looks like Overload #15 here: angular.io/api/common/http/HttpClient#get

Collectives™ on Stack Overflow

How to map Object from http.get to Array?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related