How to retrieve just one object from JSON file using TypeScript Angular?

Question

I made a very normal HTTP request to get one object from a JSON file. but I noticed I get all the file's data instead of the only needed object. following my code demonstrates how I made a class to fetch needed data but it still not working as planned for some reason.

JSON file (DB.json) => I need just (articles)

{
    "articles": [
      {
        "id": "1",
        "title": "Title 1",
        "body": "what ever ... ",
        "date": "14/03/2020",
        "rating": 4,
        "pic": "../../assets/images/cat.jpg"
      },
      {
        "id": "2",
        "title": "Title 2",
        "body": "what ever ... ",
        "date": "15/03/2020",
        "rating": 5,
        "pic": "../../assets/images/dog.jpg"
      }
    ],
    AnotherTableName [ ... etc ],
    AnotherTableName [ ... etc ]
}

article.ts => the class

export class Article {
    id: string;
    title: string;
    body: string;
    date: Date;
    rating: number;
    pic: string;
}

component.ts

export class ArticleComponent implements OnInit {

  constructor(private httpGetArticles: ArticleService) { }
  
  errMess: string;
  articles: Article[];

  ngOnInit(){
    this.httpGetArticles.getArticles().subscribe(
     data =>  this.articles = data,
     errmess => this.errMess = <any>errmess,
     () => console.log(this.articles));
    
  }

}

component.html

<p *ngFor="let artcl of articles">
    <span>artcl.title</span>>
</p>

Service

  getArticles(): Observable<Article[]> {
    return this.http.get<Article[]>("./assets/DB.json")
    .pipe(catchError(this.handleHttpErrService.handleError));
  }

console.log( .. result

Object { 
articles: Array [ {…}, {…} ]
feedback: Array(13) [ {…}, {…}, {…}, … ]
leaders: Array(4) [ {…}, {…}, {…}, … ]
promotions: (1) […]

Despite I get the object as shown, I got also the following error ( I think because I use NgFor for one object named articles but retrieved data come up with a different format "the whole JSON file" )

ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

So I need to retrieve the casted data only (articles) not all the JSON file

Barremian · Accepted Answer · 2021-03-31 07:16:41Z

1

Ideally the backend should support returning specific properties of an object. For a quick fix you could pipe in RxJS pluck operator to the HTTP request in the client

Service

import { catchError, pluck } from 'rxjs/operators';

getArticles(): Observable<Article[]> {
  return this.http.get<Article[]>("./assets/DB.json").pipe(
    pluck('articles'),
    catchError(this.handleHttpErrService.handleError)
  );
}

In addition I'd also suggest the following changes.

Use TS interface instead of class for type checking. When to use an interface or a class in Typescript?

article.ts

export interface Article {
  id: string;
  title: string;
  body: string;
  date: Date;
  rating: number;
  pic: string;
}

Use async pipe in the component template instead of a subscription in the controller.

Component

import { throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';

export class ArticleComponent implements OnInit {
  constructor(private httpGetArticles: ArticleService) { }
  
  articles$: Observable<Article[]>;

  ngOnInit(){
    this.articles$ = this.httpGetArticles.getArticles().pipe(
      catchError(error => {
        console.log('Error fetching articles:', error);
        return throwError(error);
      }
    );
  }
}

Template

<ng-container *ngIf="(articles$ | async) as articles">
  <div *ngFor="let article of articles">
    ...
  </div>
</ng-container>

edited Mar 31, 2021 at 7:16

answered Mar 31, 2021 at 7:02

Barremian

31.2k4 gold badges37 silver badges67 bronze badges

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

6 Comments

MOHAMED ABUELATTA Over a year ago

here is how me service look like .... getArticles(): Observable<Article[]> { return this.http.get<Article[]>("./assets/DB.json") .pipe(catchError(this.handleHttpErrService.handleError)); }

Barremian Over a year ago

@MOHAMEDABUELATTA: Please post any updates to the question.

Barremian Over a year ago

@MOHAMEDABUELATTA: You could pipe in pluck before the catchError operator. I've updated the answer.

MOHAMED ABUELATTA Over a year ago

It works but I couldn't able to use 2 pipes in a row like pluck('articles'), catchError ... So that I removed catchError because it gives me an error .. thanks anyway

Barremian Over a year ago

You should be able to pipe in as many operators as you want. And if you'd like to enforce the type checking instead of using any, use map operator instead of pluck and cast the type: map((data: any) => data['articles'] as Article[])

|

Collectives™ on Stack Overflow

How to retrieve just one object from JSON file using TypeScript Angular?

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related