node.jsangulareventbrite

Issue getting events from Eventbrite API


I'm building a school project using angular js and node js as a backend, I'm trying to display the event in my front-end using Angular JS from EventBrite, After spending a few hours checking different tutorial I wrote this code

Node JS code:

router.get('/', (req, res)=>{

  axios.get(`${EventsBriteAPI}`).then(result=>{
    let relevantData = result.data.data.events
    res.status(200).json(relevantData);
    console.log(results );
  })

  .catch(error => {
    res.status(500).send(error);
  })
});

My service code:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';


@Injectable({
  providedIn: 'root'
})


export class EventsService {

  uri = 'http://localhost:4600/events';

  constructor(private httpClient: HttpClient) {}


  getAllEvents(){
    return this.httpClient.get(this.uri);
  }

}

My component code

import { Component } from '@angular/core';
import { EventsService } from './events.service';
import { Observable } from 'rxjs/internal/Observable';

@Component({
   selector: 'events',
   templateUrl: 'events.Component.html'
})
export class EventsComponent {
  title = "List of events";
  eventObservable : Observable<any[]> ;
  
  constructor(service: EventsService){


    this.eventObservable = service.getAllEvents();


    console.log(this.eventObservable);


  }


}

When I'm running my code I'm getting this error src/app/component/events/events.component.ts(21,5): error TS2322: Type 'Observable' is not assignable to type 'Observable'. The 'Object' type is assignable to very few other types. Did you mean to use the 'any' type instead? Type 'Object' is missing the following properties from type 'any[]': length, pop, push, concat, and 26 more. and It's not displaying anything in my front-end

Could you please help me with that.


Solution

  • we don't need to use Observable type variable unless you are using async pipe or for any specific requirement.

    You can do some like below,

    EventsComponent.ts

     eventObservable: any = [];
      
     constructor(private service: EventsService) {
        this.service.getAllEvents().subscribe((response: any) =>{
            this.eventObservable = response;
            console.log(this.eventObservable);
        });
     }
    

    we generally use ngOnInit() for calling an api data not in the constructor().