How can I get data from component angular and print it out into html?

Question

How can I get data from component angular and print it out into html? I'm trying to get an pokemon name in my html from my component

Here's my app.components.ts:

import { Component, OnInit } from "@angular/core";
import { HttpService } from "./http.service";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"],
})
export class AppComponent {
  title = "pokemon";
  tasks = [];
  task = "";
  constructor(private _httpService: HttpService) {}

  ngOnInit() {
    this.getTasksFromService();
  }

  getTasksFromService() {
    let observable = this._httpService.getPokemon();
    observable.subscribe((data) => {
      this.tasks = data["data"];
      console.log(data);
      return data;
    });
  }
}

Here is my HTML:

<div *ngFor="let task of tasks; let idx = index">
  <p>{{task.name}}</p>
</div>


<router-outlet></router-outlet>

Here's my http.service.ts:

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

@Injectable({
  providedIn: "root",
})
export class HttpService {
  constructor(private _http: HttpClient) {
    this.getPokemon();
  }

  getPokemon() {
    let pokemon = this._http.get("https://pokeapi.co/api/v2/pokemon/1/");
    return pokemon;
  }
}

Thank you!

Answer 1

According to the API you are calling

update your ts as

getTasksFromService() {
    let observable = this._httpService.getPokemon();
    observable.subscribe((data) => {
      this.tasks = data;
    });
  }

in your html

<div>
  <p>{{task.name}}</p>
</div>

you should see bulbasaur as output

you need *ngFor when you have list of pokemons, but the API you posted( https://pokeapi.co/api/v2/pokemon/1/ ) contains details of single pokemon fow which the above code works.

Answer 2

Please see the updated changes:

componen.ts:

import { Component, OnInit } from "@angular/core";
import { HttpService } from "./http.service";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"],
})
export class AppComponent {
  title = "pokemon";
  tasks: any; // Make this as type of any
  task = "";
  constructor(private _httpService: HttpService) {}

  ngOnInit() {
    this.getTasksFromService();
  }

  getTasksFromService() {
    this._httpService.getPokemon.subscribe(data => { // You can directly subscribe to this service, instead of creating an object and then subscribing to it.
      this.tasks = data;
      console.log(data);
    });
  }
}

service.ts:

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

@Injectable({
  providedIn: "root",
})
export class HttpService {
  constructor(private _http: HttpClient) { }

  getPokemon() {
    return this._http.get("https://pokeapi.co/api/v2/pokemon/1/"); // You can directly return the observable.
  }
}

As the API is returning only one information, so you don't need *ngFor inhtml page.

html:

<p>{{task.name}}</p>

I hope this should work for you.

Note: I have also mentioned the changes as per the coding standards.

Answer 3

modify your getTasksFromService as

 getTasksFromService() {
    let observable = this._httpService.getPokemon();
    observable.subscribe((data) => {
      this.tasks = data["abilities"]; //because response data consist of array of ability in 'abilities'
      console.log(data);
      return data;
    });
  }

and your html as

<div *ngFor="let task of tasks; let idx = index">
  <p>{{task.ability.name}}</p> 
</div>


<router-outlet></router-outlet>

i hope this solution works with your problem.