Angular 5 - unable to print rest json data by ngFor using ngOnIt

Question

I am trying to print the simple rest consumed json data in my HTML's select's options. I've done it many times but i can't figure out what i am doing wrong here. I want to use the ngOnIt beccause i have to load my countries and states before anything on my HTML

HTML -

<b>
<div class="form-group">
<label for="country" class="cols-sm-2 control-label">Country</label>
  <div class="cols-sm-10">
   <div class="input-group" *ngIf="loc">
     <span class="input-group-addon"><i class="fa fa-globe fa" aria-hidden="true"></i></span>
     <select class="form-control" name="1" id="1" style="color:#000;">
       <option value=""selected>Select Country</option>
       <option *ngFor="let a of loc" value="{{a.CountryId}}">{{a.CountryName}}</option>
     </select>
 </div>
  </div>
</div>
</b>

My Component -

    `import { Component, OnInit, Input, Pipe, NgModule } from '@angular/core';
      import { resetFakeAsyncZone } from '@angular/core/testing';
      import{HttpClient, HttpParams, HttpHeaders} from'@angular/common/http';
      import { Http } from '@angular/http/src/http';
       import { Observable } from 'rxjs/Observable';
       import 'rxjs/add/operator/map';
      import 'rxjs/add/observable/forkjoin';
     import { forkJoin } from 'rxjs/observable/forkJoin';
     import { ReactiveFormsModule,FormsModule,FormGroup,FormControl,Validators,FormBuilder } from '@angular/forms';

     export class AppComponent implements OnInit {
      loc : any;
      constructor( private http:HttpClient) {}
        ngOnInit(){
        this.http.get('http://localhost:50749/api/TravelDetails/Get/Locations?type=json')
       .subscribe((json)=>{this.loc = json; console.log(this.loc);});
  };`

json Data consumed by api, perfectly showing in XHR as well as console results-

[
        [{
            "States": [{
                "StateId": 1,
                "Country_Id": 1,
                "StateName": "Alabama"
            }, {
                "StateId": 50,
                "Country_Id": 1,
                "StateName": "Wyoming"
            }],
            "CountryId": 1,
            "CountryName": "United States of America",
            "CountryCode": "USA"
        }, {
            "States": [{
                "StateId": 51,
                "Country_Id": 2,
                "StateName": "Alberta"
            }, {
                "StateId": 63,
                "Country_Id": 2,
                "StateName": "Yukon"
            }],
            "CountryId": 2,
            "CountryName": "Canada",
            "CountryCode": "CA"
        }]
    ]

What do you need to do, what's your question ? Please update — andrea06590, Feb 01 '18 at 12:47
Consuming a local self created rest API and json result is from my XHR results, i have a select box in which i want to render my 'CountryName' as options to select a country. — Abhishek Chokra, Feb 01 '18 at 12:51
I understood that part, but what errors you get ? Here you are requesting in a component. You must create a service and inject it as constructor of your component, i think that's what you missed. — andrea06590, Feb 01 '18 at 12:55
I know i am not using best practices, but the issue is yesterday i've implemented it, but i was using Single component single html and a messed up Json, which was bringing all my database, Today i have simplified things created diff get responses and getting country cities list in 1 response, and 1 more thing, I am using a multi-step-wizard containing many routes and components, its a SPA. But i am working inside my app controller right now not in others. — Abhishek Chokra, Feb 01 '18 at 12:59

score 0 · Answer 1 · answered Feb 01 '18 at 13:01

0

As far as I understand your problem you need the add the async pipe to your #ngFor

<option *ngFor="let a of loc | async" value="{{a.CountryId}}">{{a.CountryName}}</option>

in order to display your information on ngOnInit

https://angular.io/api/common/AsyncPipe

answered Feb 01 '18 at 13:01

tomichel

376
1
4
9

This is not working, as we do not need to use pipes. Note - i am not using Promises here. – Abhishek Chokra Feb 01 '18 at 13:10
But you are getting an observable after you subscribe to the http.get and just to make sure that your selection options are updated if your call to the api takes longer it would be best to use it in that case – tomichel Feb 01 '18 at 13:37

score 0 · Answer 2 · answered Feb 01 '18 at 13:02

0

try this and it should work

<option *ngFor="let a of loc" 
    [value]="a.CountryId" 
   ">
  {{a.CountryName}}
</option>

answered Feb 01 '18 at 13:02

haytam benizza

1

i am sure we should use "{{a.CountryId}}" in place of "a.CountryId" – Abhishek Chokra Feb 01 '18 at 13:06
Both are good that's not the problem, you can't request from a component. Create a service + an observable to return and to subscribe to in your component – andrea06590 Feb 01 '18 at 13:10

Angular 5 - unable to print rest json data by ngFor using ngOnIt

2 Answers2