Display data from json array using angular4

Question

I am new to angular so please help me. I have an api returning an array of objects containing name, place id.

I need to display this in different cards on my html page, the cards being a widget.

in the parent component under the ngOnInit() section how do I access this json data and loop through the array in order to display it on my page as different cards?

Thank you in advance.

import { Component, OnInit } from '@angular/core';
import {HttpClient} from '@angular/common/http';
import { Observable } from 'rxjs/observable';

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

  showSplash = true
 //public events: any = [];
  events = [];

  constructor(private http : HttpClient) { }

  ngOnInit() {
     this.showSplash = true
     this.http.get("/events").subscribe(data => {
     console.log("EVENTS ARE: ", data);
     this.events = data;
     console.log(this.events)
     })
   }

  ngAfterViewInit(){
    setTimeout(() => {
     this.showSplash = false
  }, 3000);
  }

 }

Answer 1

This will get you the events you want.

import { Component, OnInit, OnDestroy } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Subscription } from 'rxjs';

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

  showSplash = true
  events = [];
  subscription: Subscription;

  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.subscription = this.http.get("/events").subscribe(data => {
      this.events = data;
      this.showSplash = false;
    });
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }

}

You will have to implement a Child Component( EventComponent probably with the selector app-event ) that will accept an event object as an @Input property. Then in your HomePageComponent Template, you can loop through the events like this:

<div *ngFor="let event of events">
  <app-event [event]="event"></app-event>
</div>

Alternatively :

You can use the async pipe in your HomePageComponent 's Template to avoid manually unsubscribing from the Observable Subscription. Your HomePageComponent Class code will change to:

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

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

  events$;

  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.events$ = this.http.get("/events");
  }

}

And then in HomePageComponent's Template:

<div *ngFor="let event of events$ | async">
  <app-event [event]="event"></app-event>
</div>

Here's how your EventComponent would look like in this case:

import { Component, Input, OnChanges } from '@angular/core';

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

  @Input() event;

  ngOnChanges() {
    this.events$ = this.http.get("/events");
  }

}