Seeking assistance with a task I've been working on since morning.
Progress so far:
- Managed to bind the list to the UI while retrieving it from Firebase.
- Successfully connected to "https://jsonplaceholder.typicode.com" and bound the list to the UI.
Where help is required:
However, struggling to bind the list from .NET Core API to Angular 6.
Note:-
- The API is operational as confirmed through postman and swagger testing.
- Able to make the API call and receive responses from .NET Core API but unable to map or bind it to my angular variable declared as "any". Seems like there's an issue fetching data from the response.
Attempted multiple examples without success. Below is the code implemented in the angular 6 project:
##ToDoService.ts file code
import { Injectable, Inject } from '@angular/core';
import {environment } from "../../environments/environment"
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';
@Injectable()
export class ToDoService {
myAppUrl: string = environment.url;
constructor(private _http: HttpClient) {
}
getToDoList() {
return this.GetMethod();
}
GetMethod() : Observable<any> {
console.log("called");
var headers = new HttpHeaders();
headers.append('Content-Type', 'application/json');
headers.append('Access-Control-Allow-Origin', '*');
headers.append('Access-Control-Allow-Methods', '*');
headers.append('Access-Control-Allow-Headers', '*');
console.log('calling viju method');
console.log(headers);
var result = this._http.get(this.myAppUrl,{headers:headers})
.map((response: Response) => response.json());
return result;
}
}
##ToDoComponent.ts file code
import { Component } from '@angular/core';
import { ToDoService } from './service/to-do.service'
import { FormBuilder, FormGroup, FormControl } from '@angular/forms';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'ToDo';
ToDolist : any[];
ToDoForm : FormGroup;
constructor(private _fb : FormBuilder, private _service : ToDoService ){
this.ToDoForm = this._fb.group({
ToDoId: 0,
Content: new FormControl(),
Status: new FormControl(),
});
this.getToDoList();
}
getToDoList(){
// debugger;
this._service.getToDoList()
.subscribe(res=> this.ToDolist = res);
debugger;
console.log(this.ToDolist);
}
}
Please refer to the error screenshot below.