title: How to populate remote JSON values in Select in angular 7?
body: <p><strong>Problem :</strong>
  Populating JSON values (which is gathered over the REST api) into Select statement?</p>
  
  <p><strong>team.component.html</strong></p>
  
  <pre><code>&lt;mat-select placeholder="Select Name" [(ngModel)]="name"&gt;
    &lt;mat-option *ngFor="let currentName of nameValuesArray" [value]='currentName.name'&gt;
      {{currentName.name}}
    &lt;/mat-option&gt;
  &lt;/mat-select&gt;
  </code></pre>
  
  <p><strong>team.component.ts</strong>   </p>
  
  <pre><code>export class UpdateTeamRosterComponent implements OnInit {
  
    nameValuesArray;
    name;
  
    constructor(private fetchData : FetchdataService) { }
  
    ngOnInit() {
      console.log('ngOnIt called');
      this.nameValuesArray = this.fetchData.getAllEmployeeNames('DCP').subscribe(data=&gt;{
        this.nameValuesArray = JSON.stringify(data);
      });
  
    }
  }
  </code></pre>
  
  <p><strong>ERROR</strong></p>
  
  <pre><code>  UpdateTeamRosterComponent.html:1 ERROR Error: Cannot find a differ supporting object '[{"name":"Ajith"},{"name":"Anand"},{"name":"Bharath"}]' of type 'string'. NgFor only supports binding to Iterables such as Arrays.
        at NgForOf.push../node_modules/@angular/common/fesm5/common.js.NgForOf.ngDoCheck (common.js:3161)
        at checkAndUpdateDirectiveInline (core.js:18623)
        at checkAndUpdateNodeInline (core.js:19884)
        at checkAndUpdateNode (core.js:19846)
        at debugCheckAndUpdateNode (core.js:20480)
        at debugCheckDirectivesFn (core.js:20440)
        at Object.eval [as updateDirectives] (UpdateTeamRosterComponent.html:2)
        at Object.debugUpdateDirectives [as updateDirectives] (core.js:20432)
        at checkAndUpdateView (core.js:19828)
        at callViewAction (core.js:20069)
  </code></pre>
  
  <p><em>Data is fetching properly from the server</em>
  <em>Problem is rendering the data on to select</em></p>