title: typescript load json data from url into arrays
body: <p>I have json data coming in from a URL. The data looks like this:</p>
  <pre><code>[
    {&quot;id&quot;:1,&quot;symbol&quot;:&quot;SP-500&quot;,&quot;date&quot;:&quot;1927-12-30T07:00:00.000+00:00&quot;,&quot;open&quot;:17.66,&quot;high&quot;:17.66,&quot;low&quot;:17.66,&quot;close&quot;:17.66,&quot;volume&quot;:0},
    {&quot;id&quot;:2,&quot;symbol&quot;:&quot;SP-500&quot;,&quot;date&quot;:&quot;1928-01-03T07:00:00.000+00:00&quot;,&quot;open&quot;:17.76,&quot;high&quot;:17.76,&quot;low&quot;:17.76,&quot;close&quot;:17.76,&quot;volume&quot;:0}
  ]
  </code></pre>
  <p>The code to retrieve it is in <em>quote.service.ts</em> and looks like this:</p>
  <pre><code>  getQuotesList(): Observable&lt;any&gt; {
      return this.http.get(`${this.baseUrl}`);
    }
  </code></pre>
  <p>Here is the whole class:</p>
  <pre><code>        import { Injectable } from '@angular/core';
          import { HttpClient } from '@angular/common/http';
          import { Observable, Subject } from 'rxjs';
          import { of } from 'rxjs';
          import 'rxjs/add/operator/map'
          import 'rxjs/operator/filter';
          import { Quote } from &quot;./quote&quot;;
          
          @Injectable({
            providedIn: 'root'
          })
          export class QuoteService {
          
            private baseUrl = 'http://localhost:8080/springboot-crud-rest/api/v1/quotes';
          
            constructor(private http: HttpClient) { }
          
            getQuote(id: number): Observable&lt;any&gt; {
              return this.http.get(`${this.baseUrl}/${id}`);
            }
          
            createQuote(quote: Object): Observable&lt;Object&gt; {
              return this.http.post(`${this.baseUrl}`, quote);
            }
          
            updateQuote(id: number, value: any): Observable&lt;Object&gt; {
              return this.http.put(`${this.baseUrl}/${id}`, value);
            }
          
            deleteQuote(id: number): Observable&lt;any&gt; {
              return this.http.delete(`${this.baseUrl}/${id}`, { responseType: 'text' });
            }
          
            //getQuotesList(): Observable&lt;any&gt; {
            //  return this.http.get(`${this.baseUrl}`);
            //}
      
      getQuotesList(): Observable&lt;[string[], string[]]&gt; {
        // replace of(data) to this.http.get(this.baseUrl)
        return of(data).pipe(
          map((quotes) =&gt; {
            return quotes.reduce((acc, curr) =&gt; {
              acc[0].push(curr.date.substr(0, 10));
              acc[1].push(curr.open);
              return acc;
            }, [[], []]);
          }),
        )
      }
  }
  </code></pre>
  <p>The data is then sent on to <em>quote-list.component.ts</em> which successfully loads it into the quotes array like this:</p>
  <pre><code>export class QuoteListComponent implements OnInit {
    quotes: Observable&lt;Quote[]&gt;;
  </code></pre>
  <p>It then passes <code>quotes</code> on to <em>quote-list.component.html</em> and builds a table using the following code:</p>
  <pre><code>&lt;tr *ngFor=&quot;let quote of quotes | async&quot;&gt;
    &lt;td&gt;{{quote.symbol}}&lt;/td&gt;
    &lt;td&gt;{{quote.date}}&lt;/td&gt;
    &lt;td&gt;{{quote.open}}&lt;/td&gt;
    &lt;td&gt;{{quote.high}}&lt;/td&gt;
    &lt;td&gt;{{quote.low}}&lt;/td&gt;
    &lt;td&gt;{{quote.close}}&lt;/td&gt;
    &lt;td&gt;{{quote.volume}}&lt;/td&gt;
    &lt;td&gt;&lt;button (click)=&quot;deleteQuote(quote.id)&quot; class=&quot;btn btn-danger&quot;&gt;Delete&lt;/button&gt;
        &lt;button (click)=&quot;quoteDetails(quote.id)&quot; class=&quot;btn btn-info&quot; style=&quot;margin-left: 10px&quot;&gt;Details&lt;/button&gt;
    &lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  <p>The table looks nice and all the data is there.</p>
  <p>Now I want to load it into a separate array for each value, like this:</p>
  <pre><code>[1927-12-30,1928-01-03]
  [17.66,17.76]
  </code></pre>
  <p>etc.</p>
  <p>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.</p>
  <p>I thought that if I modified <em>quote.service.ts</em> to look something like</p>
  <pre><code>  getQuotesList(): Observable&lt;any&gt; {
      let quotes = this.http.get(`${this.baseUrl}`);
      let opens = quotes.map(theOpen =&gt; open);
      console.log(&quot;opens.length=&quot; + opens.length);
      opens.forEach(function(item,index,array) {
          console.log(item,index);
          })
      return quotes;
    }
  </code></pre>
  <p>But get the error:</p>
  <blockquote>
  <pre><code>ERROR in quote.service.ts:38:23 - error TS2339: Property 'map' does not exist on type 'Observable&lt;Object&gt;'.
  
  38    let opens = quotes.map(theOpen =&gt; open);
  </code></pre>
  </blockquote>
  <p>So I changed <code>getQuotesList(): Observable&lt;any&gt;</code> to <code>getQuotesList(): Observable&lt;Quote[]&gt;</code></p>
  <p>But got the following error:</p>
  <blockquote>
  <pre><code>ERROR in quote.service.ts:38:23 - error TS2339: Property 'map' does not exist on type 'Observable&lt;Object&gt;'.
  
  38    let opens = quotes.map(theOpen =&gt; open);
                           ~~~
  quote.service.ts:43:4 - error TS2322: Type 'Observable&lt;Object&gt;' is not assignable to type 'Observable&lt;Quote[]&gt;'.
    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.
  </code></pre>
  </blockquote>
  <p>So I changed <code>let opens = quotes.map(theOpen =&gt; open);</code> to <code>let opens = quotes.pipe(map(theOpen =&gt; open));</code></p>
  <p>But got the error</p>
  <pre><code>ERROR in quote.service.ts:39:40 - error TS2339: Property 'length' does not exist on type 'Observable&lt;(url?: string, target?: string, features?: string, replace?: boolean) =&gt; Window&gt;'.
  
  39    console.log(&quot;opens.length=&quot; + opens.length);
                                            ~~~~~~
  quote.service.ts:40:18 - error TS2345: Argument of type '(item: any, index: any, array: any) =&gt; void' is not assignable to parameter of type '(value: (url?: string, target?: string, features?: string, replace?: boolean) =&gt; Window) =&gt; void'.
  
  40    opens.forEach(function(item,index,array) {
  </code></pre>
  <p>Then I tried:</p>
  <pre><code>getQuotesList() {
    let quotes = this.http.get&lt;Quote[]&gt;(`${this.baseUrl}`);
    let opens = quotes.pipe(map(theOpen =&gt; open));
    alert(opens[0]);
    return quotes;
  }
  </code></pre>
  <p>But the output was &quot;undefined&quot;</p>
  <p>Then I tried</p>
  <pre><code>private quoteObserver = {
    next(quote) {
      console.log(&quot;quote.open=&quot; +quote.open);
    }
  }
  
  getQuotesList() {
    let quotes = this.http.get&lt;Quote[]&gt;(`${this.baseUrl}`);
    of(quotes).subscribe(this.quoteObserver);
    return quotes;
  }
  </code></pre>
  <p>but the output was <code>quote.open=undefined</code></p>
  <p>Then I tried</p>
  <pre><code>  getQuotesList(): Observable&lt;any&gt; {
      let quotes = this.http.get(`${this.baseUrl}`);
      quotes.subscribe(arr =&gt; {
        Object.values(arr[0].forEach(el =&gt; {
          let col = arr.map(ele =&gt; ele[el]);
          console.log(el,':', col);
        }
      )}
      return quotes;
    }
  </code></pre>
  <p>But the error was</p>
  <pre><code>ERROR in quote.service.ts:67:6 - error TS1005: ',' expected.
  
  67     )}
          ~
  quote.service.ts:68:5 - error TS1005: ',' expected.
  
  68     return quotes;
         ~~~~~~
  
  
      ERROR in quote.service.ts:64:23 - error TS2339: Property 'map' does not exist on type 'Object'.
  
      64         let col = arr.map(ele =&gt; ele[el]);
  </code></pre>
  <p>Do you think I've made enough attempts yet? :-(
  I'm new to Angular/Typescript so hoping someone can guide me.</p>
  <p>EDIT: I managed to figure how to port the code over to a linux server. Now you can access the back end to see the actual data coming in by entering this in the browser: 167.172.141.34:8080/springboot-crud-rest/api/v1/quotes</p>