CODEWITHSUNDEEP
javascripthtmlangulartypescript
Bhrungarajni
Bhrungarajni

Reputation: 2535

How to fetch the name from consoled output to HTML page using Angular2

I have a select option, in which the names of companies must be displayed in drop-down. Can anyone help me to fetch the names to HTML from consoled output.

HTML:

<select class="form-control" id="exampleSelect1" name="selected" [(ngModel)]="selectedCampaign" >
          <option *ngFor="let item of CampaignData" [ngValue]="item">{{item.campaign_name}}</option>
        </select>

Typescript:

this.usersTableService.getCompanyData(this.token).subscribe(companies => {
    this.data = companies;
    this.companiesPDF = companies;
    var CampaignData = this.companiesPDF;
    console.log(JSON.stringify(companies));
  });
  }

Consoled Output:

[ {"CVR":3456789,"name":"Benz","address":"34 rue du bourbier","phoneNo":633406546,"email":"[email protected]","active":true,"accessId":null,"agreementNo":null,"id":18,"postalCodeId":null,"preSurvey":false},

{"CVR":1234567,"name":"Stefania's local","address":"Norre Alle 8","phoneNo":485698659,"email":"[email protected]","active":true,"accessId":null,"agreementNo":null,"id":20,"postalCodeId":null,"preSurvey":false},

{"CVR":2365986,"name":"Churchdesk","address":"Kobenvan 32","phoneNo":25362536,"email":"[email protected]","active":true,"accessId":null,"agreementNo":null,"id":23,"postalCodeId":null,"preSurvey":false},

{"CVR":78945665,"name":"Peergrade","address":"Titangae 11, 2200 Kobenhavn","phoneNo":8659865,"email":"[email protected]","active":true,"accessId":null,"agreementNo":null,"id":25,"postalCodeId":null,"preSurvey":false},

{"CVR":85968596,"name":"Bosch","address":"Norre Alle 7, 2500 Kobenhavn","phoneNo":78451296,"email":"[email protected]","active":true,"accessId":null,"agreementNo":null,"id":27,"postalCodeId":null,"preSurvey":false},

{"CVR":784586,"name":"Lala","address":"Kobenhavn 25S","phoneNo":78458526,"email":"[email protected]","active":true,"accessId":null,"agreementNo":null,"id":30,"postalCodeId":null,"preSurvey":false},

{"CVR":12345678,"name":"testWD","address":"Titangade 11, 2200 København","phoneNo":34567890,"email":"[email protected]","active":true,"accessId":null,"agreementNo":null,"id":37,"postalCodeId":null,"preSurvey":true}, {"CVR":12312322,"name":"Wirelocal","address":null,"phoneNo":123123123,"email":"[email protected]","active":true,"accessId":null,"agreementNo":null,"id":38,"postalCodeId":null,"preSurvey":false}, {"CVR":111,"name":"AnuShree","address":null,"phoneNo":23456,"email":"[email protected]","active":true,"accessId":null,"agreementNo":null,"id":39,"postalCodeId":null,"preSurvey":false},

{"CVR":38185470,"name":"Orbiz","address":"Lyskær 7, 1. 2730 Herlev","phoneNo":20638651,"email":"[email protected]","active":true,"accessId":null,"agreementNo":null,"id":40,"postalCodeId":null,"preSurvey":true}]

Please help.

Upvotes: 0

Views: 51

Answers (2)

Mohsen Kamrani
Mohsen Kamrani

Reputation: 7457

First of all your model should be accessible to your template, so based on your code, as you have used this.data, you can use data to render the data.

Second, you can render it like this:

<select class="form-control" id="exampleSelect1" name="selected" [(ngModel)]="selectedCampaign" >
          <option *ngFor="let item of data" [ngValue]="item">{{item.name}}</option>
        </select>

Upvotes: 2

Pardeep Jain
Pardeep Jain

Reputation: 86750

Try this

<select class="form-control" id="exampleSelect1" name="selected" [(ngModel)]="selectedCampaign" >
  <option *ngFor="let item of companiesPDF" [ngValue]="item">{{item?.name}}</option>
</select>
  • Right now you are accessing varibale named CampaignData
  • also use ? safe navigation while rendring name , it may help to avoid error while asynch data.

Upvotes: 1

Related Questions