How do you make this API request in Angular?

Viewed 38

There is an existing third party API I need to be making GET requests to bring in JSON data to my Angular website. I have seen the docs for the third party API. It's called Paperless Parts: https://docs.paperlessparts.com/

I also have an account with Paperless that already has order data in it. And if I use that link's own API testing service along with my authorization token I get this text for the curl request:

Curl:

 curl -X 'GET' \   
'https://api.paperlessparts.com/orders/public/1' \  
 -H 'accept: application/json' \  
 -H 'Authorization: API-Token "my-api-token"'

Request URL: https://api.paperlessparts.com/orders/public/1

The server response is 200 ok and I can see the order data that I'm looking for in JSON. I'm not going to upload it because it's so big unless someone needs it but it's in the form of a list. However, I need to be making the same request but in Angular, here is my Angular code so far:

app.component.html

  <!-- Highlight Card -->
  <div class="card highlight-card card-small">
    <!-- My stuff -->
    <h1>
      Welcome to {{ title }}!
      <p *ngFor='let order of orderData'>
order

      </p>
    </h1>
  </div>

app.component.ts

import { Component, OnInit } from '@angular/core';
import { OrderService } from './order.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'my-app';

  orderData: any;

  constructor(private api:OrderService) {}

  ngOnInit() {
    this.api.getOrders().subscribe((data) => {
      this.orderData = data;
    })
  }
}

order.services.ts

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


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

  constructor(private http: HttpClient) { }

  getOrders(){
    const requestUrl = "https://api.paperlessparts.com/orders/public/1";
    return this.http.get(requestUrl); 
  }
}

How do I make that curl request in Angular?

1 Answers

the comment left by jonrshape is the correct answer I just don't know how to mark the answer right because it's in a comment.

Related