typescript load json data from url into arrays

I have json data coming in from a URL. The data looks like this:

[
  {"id":1,"symbol":"SP-500","date":"1927-12-30T07:00:00.000+00:00","open":17.66,"high":17.66,"low":17.66,"close":17.66,"volume":0},
  {"id":2,"symbol":"SP-500","date":"1928-01-03T07:00:00.000+00:00","open":17.76,"high":17.76,"low":17.76,"close":17.76,"volume":0}
]

The code to retrieve it is in quote.service.ts and looks like this:

  getQuotesList(): Observable<any> {
    return this.http.get(`${this.baseUrl}`);
  }

The data is then sent on to quote-list.component.ts which successfully loads it into the quotes array like this:

export class QuoteListComponent implements OnInit {
  quotes: Observable<Quote[]>;

It then passes quotes on to quote-list.component.html and builds a table using the following code:

<tr *ngFor="let quote of quotes | async">
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td><button (click)="deleteQuote(quote.id)" class="btn btn-danger">Delete</button>
      <button (click)="quoteDetails(quote.id)" class="btn btn-info" style="margin-left: 10px">Details</button>
  </td>
</tr>

The table looks nice and all the data is there.

Now I want to load it into a separate array for each value, like this:

[1927-12-30,1928-01-03]
[17.66,17.76]

etc.

And then I want to make those arrays available to a javascript charting program which will plot the data. That plotting code requires a separate array for each value.

I thought that if I modified quote.service.ts to look something like

  getQuotesList(): Observable<any> {
    let quotes = this.http.get(`${this.baseUrl}`);
    let opens = quotes.map(theOpen => open);
    console.log("opens.length=" + opens.length);
    opens.forEach(function(item,index,array) {
        console.log(item,index);
        })
    return quotes;
  }

But get the error:

ERROR in quote.service.ts:38:23 - error TS2339: Property 'map' does not exist on type 'Observable<Object>'.

38    let opens = quotes.map(theOpen => open);

So I changed getQuotesList(): Observable<any> to getQuotesList(): Observable<Quote[]>

But got the following error:

ERROR in quote.service.ts:38:23 - error TS2339: Property 'map' does not exist on type 'Observable<Object>'.

38    let opens = quotes.map(theOpen => open);
                         ~~~
quote.service.ts:43:4 - error TS2322: Type 'Observable<Object>' is not assignable to type 'Observable<Quote[]>'.
  The 'Object' type is assignable to very few other types. Did you mean to use the 'any' type instead?
    Type 'Object' is missing the following properties from type 'Quote[]': length, pop, push, concat, and 26 more.

So I changed let opens = quotes.map(theOpen => open); to let opens = quotes.pipe(map(theOpen => open));

But got the error

ERROR in quote.service.ts:39:40 - error TS2339: Property 'length' does not exist on type 'Observable<(url?: string, target?: string, features?: string, replace?: boolean) => Window>'.

39    console.log("opens.length=" + opens.length);
                                          ~~~~~~
quote.service.ts:40:18 - error TS2345: Argument of type '(item: any, index: any, array: any) => void' is not assignable to parameter of type '(value: (url?: string, target?: string, features?: string, replace?: boolean) => Window) => void'.

40    opens.forEach(function(item,index,array) {

Then I tried:

getQuotesList() {
  let quotes = this.http.get<Quote[]>(`${this.baseUrl}`);
  let opens = quotes.pipe(map(theOpen => open));
  alert(opens[0]);
  return quotes;
}

But the output was "undefined"

Then I tried

private quoteObserver = {
  next(quote) {
    console.log("quote.open=" +quote.open);
  }
}

getQuotesList() {
  let quotes = this.http.get<Quote[]>(`${this.baseUrl}`);
  of(quotes).subscribe(this.quoteObserver);
  return quotes;
}

but the output was quote.open=undefined

I'm new to Angular/Typescript so hoping someone can guide me.

from typescript load json data from url into arrays