angular nodejs HTTP clients

Issue

I am trying to show event data from mongoDB in angular view but it only shows it on on the browser console but it shows nothing on the website i've used nodejs for the backend and it's working and angular for the frontend and no error is displayed on the console i tried everything i found on youtube but no use, i hope that you help me and thanks

**this is my html.ts**

        <div *ngFor="let event of events">
          <p> Event name:{{event.name}} </p>
          <p> Event description:{{event.description}} </p>
          <p> Event place:{{event.place}} </p>
          <p> Event quantity:{{event.quantity}} </p>
          <p> Event date:{{event.date}} </p>
        
        </div>

 **   comp.ts:**

        import {Component, Input, OnInit} from '@angular/core';
        import {HttpClient} from '@angular/common/http';
        import {ProductService} from '../services/product.service';
        import {Router} from '@angular/router';
        import {Event} from '../models/event';
        
        
        
        @Component({
          selector: 'app-home',
          templateUrl: './home.component.html',
          styleUrls: ['./home.component.scss']
        })
        export class HomeComponent implements OnInit {
            events: Event[] ;
        
          constructor(public  productService: ProductService, private httpclient: HttpClient) {
        
          }
        
          ngOnInit(): void {
        
        this.getalltask();
          }
        
          getalltask(): void {
            this.productService.getAllProducts().subscribe(res => {
              this.events = [res];
              console.log(this.events);
            });
          }
        }

**Service class**

        import { Injectable } from '@angular/core';
        import {HttpClient} from '@angular/common/http';
        import {Router} from '@angular/router';
        import {environment} from '../../environments/environment';
        import {Observable} from 'rxjs';
        import 'rxjs/add/operator/map';
        import 'rxjs/add/operator/toPromise';
        
        // import {ProductModelServer,serverResponse} from '../models/product.model';
        import { Event } from '../models/event';
        
        @Injectable({
          providedIn: 'root'
        })
        export class ProductService {
        //  events: Event[];
         private SERVER_URL = environment.SERVER_URL;
          constructor(private http: HttpClient) { }
        
          /* this is to fetch all products from the backend server /
        
          getAllProducts(): Observable<Event[]> {
            return  this.http.get<Event[]>('http://localhost:8080/allEvents%27);
        
          }
        
          / GET SINGEL PRODUCT FROM SERVER /
        
          /getSingleProduct(id: number): Observable<ProductModelServer>{
            return this.http.get<ProductModelServer>(this.SERVER_URL + '/products' + id);
        
          }
          /* GET PRODUCTS FROM ONE CATEGORY */
        
          // getProductsFromCategory(catName: string) : Observable<ProductModelServer[]>  {
            // return this.http.get<ProductModelServer[]>(this.SERVER_URL + '/products/category/' + catName );
        // }
        
        
        }

**DTO class**

        export class Event{
          constructor( public name: string,
                       public description: string,
                       public quantity: number,
        
                       public date: Date,
        
                       public place: string,
                       public image: string) {
          }

        }

Solution

I'm not sure why you'd wrap the incoming object from the API in an array when in fact the data you require is already an array contained in the events property of the object.

getalltask(): void {
  this.productService.getAllProducts().subscribe(res => {
    this.events = res['events'];       // <-- get `events` property here
  });
}

Option 2: async pipe

If the data from the API isn't required in the controller, you could use Angular async pipe in the template along with RxJS pluck operator to avoid a subscription in the controller.

Service

import 'rxjs/add/operator/pluck';

getAllProducts(): Observable<Event[]> {
  return this.http
    .get<Event[]>('http://localhost:8080/allEvents%27')
    .pluck('events');                     // <-- pluck `events` here
}

Component

import { Observable } from 'rxjs/Observable';

export class HomeComponent implements OnInit {
  events$: Observable<Event[]>;

  constructor(public productService: ProductService, private httpclient: HttpClient) { }

  ngOnInit(): void {
    this.events$ = this.productService.getAllProducts();
  }
}

Template

<ng-container *ngIf="(events$ | async) as events"
  <div *ngFor="let event of events">
    Event name:{{event.name}}
    Event description:{{event.description}}
    Event place:{{event.place}}
    Event quantity:{{event.quantity}}
    Event date:{{event.date}}
  </div>
</ng-container>

Answered By - ruth