How do you make an http get request that returns a json array which will be used to fill an ngfor directive?

Question

I want to make an http get request that returns a json array of data that is to be used in an ngFor loop. I am not sure the best way to do this. this.list is the list to be looped through in the ngFor directive. For testing purposes, the json file is located on my local machine. I've looked through the Angular 2 documentation, as well as a udemy course for this, but can't figure it out. I suspect it is something simple.

The component with the ngFor directive.

constructor(private router:Router, private rec:RecommendationsService ){}
      ngOnInit(){
        this.rec.getRecommendations().subscribe(
          data=>{
            this.x = JSON.stringify(data);
            alert(this.x);
            this.list = this.x;
          }
        );
      }

The get request is located in a service

import 'rxjs/Rx';

@Injectable()
export class RecommendationsService{

  url="//Users/Daniel/Desktop/Reccomendations.json";

  constructor(private http:Http){};

  getRecommendations(){
    return this.http.get(this.url).map(res => res.json);
  }
}

This is the ngfor that needs the data.

 <div *ngFor="let item of list, let i = index" data-toggle="modal" data-target="#recModal">
                <div class="row rowTopBuffer rowDiv" (click)="toModal(item.name, item.description, item.recLocLat, item.recLocLong, item.picturePath)">
                    <div class="col-sm-12 col-md-4 titleDiv" >
                        <img class="recommendationImages img-responsive img-rounded" src={{item.picturePath}}>
                    </div>
                    <div class="col-sm-12 col-md-6 descDiv">

                    <p class="itemTitle">{{item.name}}</p>
                    <p id="{{desc+i}}">{{item.description}}</p>

                    </div>
                </div>
            </div>

Right now EXCEPTION: [object Object] is thrown in the console when running this code.

Answer 1

Don't stringify that object again, since you can't loop through a string :)

ngOnInit(){
    this.rec.getRecommendations().subscribe(
        data => {
            this.x = JSON.stringify(data);
            alert(this.x);
            this.list = data;
        },
        error => console.log(error),
        () => console.log("done")
    );
}

Also in your service call the 'json()' method like this:

getRecommendations(){
    return this.http.get(this.url).map(res => res.json());
}

And in your template you have a faulty ngFor usage. Use ; instead of , to seperate the index.

*ngFor="let item of list; let i = index"

Answer 2

After working a lot more with angular, Ive learned a lot and would like to add an answer to this question. You can return the interface itself, or you can return a class that implements the interface like so. Angular will take care of the deserialisation itself.

*************HTML

<div *ngFor="let employee of employees; let i = index;">
  <div>employee.Name</div>
  <div>employee.Id</div>
</div>

*************Typescript class and interface

export interface Employee{
  Id:number;
  Name:string;
}

export class ResponseEmployee implements Employee{
  Id:number;
  Name:string;
}

*************** Http service

@Injectable()
export class EmployeeHttpService {


  constructor(private http: Http) {}

  getEmployees(city:string){

    var headers = new Headers();
    headers.append("Content-Type", "application/json");

    var url = “/api/endpoint/path”;

    return this.http
      .get(url, {headers:headers})
      .toPromise()
      .then((res)=> res.json() as ResponseEmployee[]);

  }

}

**************** Component that uses employeeHttpService

@Component({
  selector: 'display-recommendations',
  templateUrl: './display-recommendations.component.html',
  styleUrls: ['./display-recommendations.component.sass']
})
export class DisplayEmployees implements OnInit {

  employees:ResponseEmployee[]=[];

  constructor(private employeeHttp:EmployeeHttpService){}

  ngOnInit() {

    this.employeeHttp.getEmployees()
      .then((data: ResponseEmployee[])=> {
        this.employees = data;
      })
      .catch((e:Error)=> this.handleError(e));
  }



}