Thread

Marvin Dick

May 18, 2018

Reading json from assets + ngIf

I want to build a simple application that reads json from my assets folder. It currently looks like this:

app.component.ts

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import {Observable} from 'rxjs/Rx';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';

import { Concert } from './concert';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  private concertsUrl = 'assets/concerts.json';

  concerts : Concert[];

  constructor (private http: HttpClient) {}

  ngOnInit() {
    this.getConcerts()
      .subscribe(concerts => this.concerts);
  }

  getConcerts(): Observable<Concert[]> {
    return this.http.get(this.concertsUrl)
      .catch(this.handleError);
  }

  private handleError(error: any): Promise<any> {
    console.error('An error occurred', error);
    return Promise.reject(error.message || error);
  }

}

app.component.html

<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
    <li data-target="#myCarousel" data-slide-to="3"></li>
  </ol>


  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="assets/ny.jpg" alt="New York">
      <div class="carousel-caption">
        <h3>Featured</h3>
      </div>
    </div>
    <div class="item" *ngFor="let concert of concerts">
      <img src="assets/{{concert.featuredImage}}" alt="Something">
      <div class="carousel-caption">
        <h3>{{concert.name}}</h3>
      </div>
    </div>
  </div>

  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

concert.ts

export class Concert {
  id: number;
  name: string;
  events: Array<string>;
  featured: boolean;
  featuredImage: string;
}

concerts.json:

  "concerts": [
    {
      "id": "1",
      "name": "Linkin Park",
      "events": ["23.02.", "25.02."],
      "featured": true,
      "featuredImage": "ny.jpg"
    },
    {
      "id": "2",
      "name": "Green Day",
      "events": ["05.04.", "07.04."],
      "featured": true,
      "featuredImage": "chicago.jpg"
    },
    {
      "id": "3",
      "name": "Billy Talent",
      "events": ["29.03.", "03.04."],
      "featured": true,
      "featuredImage": "la.jpg"
    },
    {
      "id": "4",
      "name": "RandomBand1",
      "events": ["12.12.", "21.12."],
      "featured": false
    },
    {
      "id": "5",
      "name": "RandomBand2",
      "events": ["23.02.", "25.02."],
      "featured": false
    },
    {
      "id": "6",
      "name": "RandomBand3",
      "events": ["05.04.", "07.04."],
      "featured": false
    },
    {
      "id": "7",
      "name": "RandomBand4",
      "events": ["29.03.", "03.04."],
      "featured": false
    },
    {
      "id": "8",
      "name": "RandomBand5",
      "events": ["12.12.", "21.12."],
      "featured": false
    },
    {
      "id": "9",
      "name": "RandomBand6",
      "events": ["11.11.", "21.11."],
      "featured": false
    }
  ]
}

I have two problems currently:

1) It seems I'm not correctly getting the data, the carousel won't go past the first hardcoded item. What could be the problem?

2) I need to include an if statement in my ngFor so that concerts that aren't featured won't get listed. How would I achieve that? Can I just add *ngIf = "{{concert.featured}}" to the loop for that?

#angularjs #json

Responses(1)

I suspect your carousel library might not be able to work with Angular seamlessly. It has probably already initialized by the time Angular retrieves your dataset and tries to render. Try to find an Angular enabled carousal.
You cannot add a second structural directive onto the element with *ngFor. One option would be to use <ng-container> to conditionally include multiple tags. Or, if the item template would add an undesirable vacancy, you could create an observable that filters out non-featured concerts. Example:

const featured$ = this.concerts$.pipe(
    map(item => item.featured)
);

Also simply assign concerts to the observable returned by this.http.get() rather than placing it inside of getConcerts(). And then use the async pipe to subscribe to it.

<div *ngFor="let concert of featured$ | async">

So instead of subscribing directly to the this.http.get() method, define a variable to that method call, which will have type Observable<Concert[]>. Using this approach you can then define transforms on that observable.

Here's how it would look:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  private concertsUrl = './assets/concerts.json';

  concerts$: Observable<Concert[]>;
  featured$: Observable<Concert[]>;

  constructor (private httpService: HttpClient) {}

  ngOnInit() {
    this.concerts$ = this.httpService.get(this.concertsUrl)
      .pipe(
        tap((concerts) => console.log(concerts)),
        catchError(err => console.log(err.message))
      );

    this.featured$ = this.concerts$.pipe(
     filter(concert => concert.featured)
    );
  }
}

And then in your HTML, subscribe to the featured$ observable using the async pipe.

<div *ngFor="let concert of featured$ | async">
</div>

There are several advantages to this approach:

Angular will take care of unsubscribing from observables when components are destroyed.
You can take advantage of ChangeDetectionStrategy.OnPush, which will enhance the performance of your app.
You can compose the concerts$ observable with other operators to cleanly handle more complex interactions.

Observables are an incredibly powerful mechanism for handling complex behavior and interactions. There is a steep learning curve, but the time is worth it.

Search Hashnode

Reading json from assets + ngIf

Responses(1)

Recent threads