Clash Royale CLAN TAG#URR8PPP

display the data in my li tag, I am getting the data in my console

https://gist.github.com/niniyzni/2773b28246ae629dd83b8d6aa5e57185
https://gist.github.com/niniyzni/00ed267c0cd3b97e78fd90791e54ec51

myFunc()
console.log("function called");

// this.navItems = this.http.get("../res/data.json");
// console.log("this.navItems--->", this.navItems);

this.http
.get(
"https://cors-anywhere.herokuapp.com/http://services.groupkt.com/state/get/USA/all"
)
.subscribe(data =>
console.log("data-------->", data);

let result = data;
);



<div *ngFor="let r of result">
<p>r.id</p>

</div>

<ul>
<li *ngFor="let r of result">
<input type="text" name="food-name" [(ngModel)]="r.id">
</li>
</ul>


result

subscribe

let result = data

this.result = data

result

4 Answers
4

result is declared and defined in myFunc. So can yo try setting a global variable instead

myFunc

export class AppComponent
title = "Angular Coding Exercise 6";

constructor(private appService: AppService, private http: Http)

navItems: any;
result: any;
myFunc()
console.log("function called");

// this.navItems = this.http.get("../res/data.json");
// console.log("this.navItems--->", this.navItems);

this.http
.get(
"https://cors-anywhere.herokuapp.com/http://services.groupkt.com/state/get/USA/all"
)
.subscribe(data =>
console.log("data-------->", data);

this.result = data;
);






You can try to do it like this (using async pipe and mapping your result):

async

import share, map, tap from 'rxjs/operators';
import Observable from 'rxjs';

...

result$: Observable<Array<any>>;
...
myFunc()
console.log("function called");

const url = 'https://cors-anywhere.herokuapp.com/http://services.groupkt.com/state/get/USA/all';
this.result$ = this.http.get(url).pipe(
tap(_ => console.log('CHECK IF RESPONSE IS SHARED')),
map(resp => resp.RestResponse.result),
share()
);



your HTML:

<div *ngFor="let r of result$ | async">
<p>r.id</p>
</div>

<ul>
<li *ngFor="let r of result$ | async">
<input type="text" name="food-name" [(ngModel)]="r.id">
</li>
</ul>


STACKBLITZ

myFunc()
------> result : any
console.log("function called");
this.http
.get(
"https://cors-anywhere.herokuapp.com/http://services.groupkt.com/state/get/USA/all"
)
.subscribe(data =>
console.log("data-------->", data);
-----> this.result = data;
);



Change let result = data; to this.result = data;

let result = data;

this.result = data;

myFunc()
console.log("function called");

this.http
.get(
"..." // url
)
.subscribe(data =>
console.log("data--->", data);
this.result = data;
);



let declares a block scope local variable to access to property of your class ues this so this.result how you can access to the result that you declared and used at the template with ngFor.

this

this.result

result

ngFor

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.