Angular 5 - JSON to “scope” binding to *NgFor

Question

I want to bind the data that i get from my JSON request to the *NgFor to be able to read it out, This is how the data looks like that i get in:

{Id: null, Code: "9348892084", HasInfo: true, Info: Array(26)}
HasInfo:true
Info:
Array(26)
0:{ProductId: 32631, Name: "JNOOS", Image: "http://sd-m-mg", …}
1:{ProductId: 32969, Name: "SWIFT", Image: "http://sd-33087.jpg",…}
2:{ProductId: 32570, Name: "GABIX", Image: "http://sd-c7273.jpg", …}
3:{ProductId: 32473, Name: "MISMA", Image: "http://sd-mt8-8343e4d95.jpg", …}

I was working with AngularJS before and there i made the request as such:

$scope.getAll{

    $http({
        method: 'Get',
        url: "http://URL/" + Code
        })
        .success(function (data) {
           $scope.All = data.Info;
        })

No i am moving to Angular5 and i would like to get the same array of information bind to the :

<div *ngFor="let x of info">
    {{ x.Name }}
</div>

How would i adjust the below to get the same as above?

export class AppComponent {

  readonly ROOT_URL = 'http://url/content/'
  constructor(private http: HttpClient) {}

ngOnInit() {
  this.getData()
}

getData() {
  this.http.get(this.ROOT_URL + 'Getscope')
    .subscribe(
      data => {
        var test = data;   
        // var info = data.Info = not valid!;  
        // var test can't be approached by *ngFor
        console.log(test);
        console.log(test.info);

        //$scope.info = data.Info;
        //this.info = data;
      }, error => {
        console.error("HTTP FAILURE ERROR!!!");
      }
    )
 };
}

Also the json output has an array inside an object, do i say this correct?

Answer 1

From your code you are using info in html but not assigning to any class variable ,

Take a public variable public info; and assign data using this.info = data.Info

Component:

export class AppComponent {

  readonly ROOT_URL = 'http://url/content/'
  public info;
  constructor(private http: HttpClient) {}

ngOnInit() {
  this.getData()
}

getData() {
  this.http.get(this.ROOT_URL + 'Getscope')
    .subscribe(
      data => {
        this.info = data['Info']; // here is the change
      }, error => {
        console.error("HTTP FAILURE ERROR!!!");
      }
    )
 };
}

Your HTML can be same:

<div *ngFor="let x of info">
    {{ x.Name }}
</div>

Answer 2

The simplest solution would be to use an async pipe. This way you do not need to subscribe to the stream returned by http.get .

app.component.ts

import { Observable } from 'rxjs/Observable';
import { map } from 'rxjs/operators';

export class AppComponent {
  readonly url = 'http://url/content/'

  constructor(private http: HttpClient) {}

  info$: Observable<any[]>;

  ngOnInit() {
    this.info$ = this.http.get(this.url + 'Getscope')
      .pipe(map(resp => resp.Info));
  }

}

app.component.html

<div *ngFor="let x of info$ | async">
    {{ x.Name }}
</div>