How to make a web api call to propublica.org from angular service

Issue

I’m trying to use get information from propublica.org’s congress api from an Angular 8 service.

Being new to Http calls to an external web api, I’m struggling with reading the documentation found here: https://projects.propublica.org/api-docs/congress-api/#requests

The best thing I could find that shows how to make a call is here: https://gist.github.com/renderorange/f2a8bd0ffc6eeefe79f13de684631387

But I can’t figure out how to translate that to using angular’s HttpClient.

I’m calling the service from within the component. I’ve gotten as far as setting up structure of it. However, I’m confused about propublica’s reference to jsonp in their documentation. I tried using angular’s jsonp, but it doesn’t relate to the example javascript call in the link above.

In the component, I’m trying to log the response

    this.CongressService
      .getStateCounts()
      .subscribe(data=>console.log(data));

The Service

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http'

import { PropublicaKey } from '../../assets/config/propublica'

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

  constructor(private HttpClient:HttpClient) { }

  getStateCounts() {
    let options = {
      url: 'https://api.propublica.org/congress/v1/states/members/party.json',
      headers: {
        'X-API-Key': 'my-api-key'
      },
      json: true
    };

    return this.HttpClient.jsonp(options.url, headers);
  }
}

The goal is to log the data so I know the api call works.

Thanks for the help!

Solution

Return this.HttpClient.get(url,options)

Answered By – Gergő Éles

Answer Checked By – Cary Denson (AngularFixing Admin)