I'm new to working with Angular, specifically using Angular 15. I have a Rest API response that I need to parse and display in the UI using Angular. To achieve this, I employed the use of HttpClient for making GET requests and parsing the responses.
The code snippet from app.component.ts is as follows:
import { HttpClient, HttpResponse } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent{
constructor(private http: HttpClient){}
posts: any[] = [];
loadPosts(){
this.http
.get('https://jsonplaceholder.typicode.com/todos/1')
.subscribe((posts: any[])=>{
this.posts=posts;
});
}
}
EDIT: I updated the link used for the GET request call for it to be functional.
The content of app.component.html is as shown below:
This serves as the template for app component's HTML:
<br>
<button type="button" (click)="loadPosts()" class="btn btn-primary">Get Response Body</button>
<br>
<div *ngFor="let post of posts">
<h1>{{ posts.includes }}</h1>
<p> {{ posts.keys }} </p>
</div>
<router-outlet></router-outlet>
I am trying to extract specific values like includes and keys from the API response to display on the UI. Hence, I utilized ngFor directive to iterate through the response and show only those relevant sections.
My main challenge currently is encountering this error message:
... When I make the GET request using [] In
... However, when I remove the usage of [], I encounter the following error:
... Please, any assistance or guidance would be greatly appreciated! Thank you!