Sign in
Log inSign up

Reading json from assets + ngIf

Marvin Dick's photo
Marvin Dick
·May 18, 2018

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?

3