Angular 5 [object Object] error with json

Question

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 jsonlint. From what I can see, everything should function, the json should be parsed and everything should be fine except I get 'error: [object Object]' in the console every time. I've tried various things to fix it, such as

data => this.jsonArticles = Object.values(data);
this.articles = data[0];

but I can't get my data into any other form.

article.service.ts

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<Article[]> {
    return this.http.get<Article[]>(this._jsonUrl);      
  }

}

article.component.ts

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 => this.jsonArticles = data,
        error => this.errorMsg = error);
  }
}

article.ts

export interface Article {
    id: number;
    author: string;
    title: string;
    content: string;
    tags: string[];
    categories: string[];
    publishDate: string;
    published: boolean;
}

data.json

 [
    {
        "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
    },
]

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.

what do u get when you print data in subscribe method on console? — Akanksha Gaur
– Akanksha Gaur, Commented Apr 2, 2018 at 4:58
What if you try /assets/data.json (without the dot at the beginning) — David
– David, Commented Apr 2, 2018 at 6:43
@David removing the period did nothing. @Akanksha When I printed to the console it showed 'status: 404, statusText: "Not Found"' my folder structure is .article.ts<br> .article.service.ts ./article/article.component.ts ./assets/data.json' somehow my relative path is not accurate.... — berensn
– berensn, Commented Apr 2, 2018 at 19:03
@Akanksha, your suggestion got me to the answer, which was that I still had in-momory-data-service in my app.module.ts file Thanks! — berensn
– berensn, Commented Apr 2, 2018 at 19:54

Pipo · Accepted Answer · 2018-07-16 20:40:30Z

5

I got this error because I forgot to import HttpClientModule into app.module.ts and declare it into imports

...
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    BrowserModule,
    FormsModule,
    AppRouteModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

answered Jul 16, 2018 at 20:40

Pipo

5,1931 gold badge44 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular 5 [object Object] error with json

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related