title: Angular 5 [object Object] error with json
body: <p>I'm trying to load json data via httpclient using get in Angular 5. I'm using a service, interface, component and json file; I've followed a few tutorials already to try and get this to work as well as verified my json with <a href="https://jsonlint.com/" rel="nofollow noreferrer">jsonlint</a>. From what I can see, everything should function, the json should be parsed and everything should be fine except I get <strong><em>'error: [object Object]'</em></strong> in the console every time. I've tried various things to fix it, such as </p>
  
  <pre><code>data =&gt; this.jsonArticles = Object.values(data);
  this.articles = data[0];
  </code></pre>
  
  <p>but I can't get my data into any other form. </p>
  
  <p><strong>article.service.ts</strong></p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { Article } from './article';
  import { Observable } from 'rxjs/Observable';
  import { HttpClient } from '@angular/common/http';
  
  @Injectable()
  export class ArticleService {
  
    // Variables
    private _jsonUrl: string = './assets/data.json';
  
    // Constructors
    constructor(private http: HttpClient) { }
  
    // Methods
    getArticles(): Observable&lt;Article[]&gt; {
      return this.http.get&lt;Article[]&gt;(this._jsonUrl);      
    }
  
  }
  </code></pre>
  
  <p><strong>article.component.ts</strong></p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { ArticleService } from '../article.service';
  import { Article } from '../article';
  
  @Component({
    selector: 'app-article',
    templateUrl: './article.component.html',
    styleUrls: ['./article.component.scss']
  })
  export class ArticleComponent implements OnInit {
  
    // Variables
    public jsonArticles = [];
    public errorMsg;
    // Consturctors
    constructor(private _articleService: ArticleService) { }
  
    // Methods
    ngOnInit(){
      this._articleService.getArticles()
        .subscribe( 
          data =&gt; this.jsonArticles = data,
          error =&gt; this.errorMsg = error);
    }
  }
  </code></pre>
  
  <p><strong>article.ts</strong></p>
  
  <pre><code>export interface Article {
      id: number;
      author: string;
      title: string;
      content: string;
      tags: string[];
      categories: string[];
      publishDate: string;
      published: boolean;
  }
  </code></pre>
  
  <p><strong>data.json</strong></p>
  
  <pre><code> [
      {
          "id": 3,
          "author": "",
          "title": "Fancy Meat",
          "content": "Strip steak bresaola capicola tail cow chicken corned beef turkey.",
          "tags": ["test", "lorum"],
          "categories": ["blah"],
          "publishDate": "2018-02-12T08:15:00.000-05:00",
          "published": true
      },
  ]
  </code></pre>
  
  <p>I truncated the json file for brevity, there are more entries in the file making my json object an array and there is no comma after the last entry in the json array. </p>