title: How do you make an http get request that returns a json array which will be used to fill an ngfor directive?
body: <p>I want to make an http get request that returns a json array of data that is to be used in an <code>ngFor</code> loop. I am not sure the best way to do this. <code>this.list</code> is the list to be looped through in the <code>ngFor</code> 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.</p>
  
  <p>The component with the <code>ngFor</code> directive.</p>
  
  <pre><code>constructor(private router:Router, private rec:RecommendationsService ){}
        ngOnInit(){
          this.rec.getRecommendations().subscribe(
            data=&gt;{
              this.x = JSON.stringify(data);
              alert(this.x);
              this.list = this.x;
            }
          );
        }
  </code></pre>
  
  <p>The get request is located in a service</p>
  
  <pre><code>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 =&gt; res.json);
    }
  }
  </code></pre>
  
  <p>This is the ngfor that needs the data.</p>
  
  <pre><code> &lt;div *ngFor="let item of list, let i = index" data-toggle="modal" data-target="#recModal"&gt;
                  &lt;div class="row rowTopBuffer rowDiv" (click)="toModal(item.name, item.description, item.recLocLat, item.recLocLong, item.picturePath)"&gt;
                      &lt;div class="col-sm-12 col-md-4 titleDiv" &gt;
                          &lt;img class="recommendationImages img-responsive img-rounded" src={{item.picturePath}}&gt;
                      &lt;/div&gt;
                      &lt;div class="col-sm-12 col-md-6 descDiv"&gt;
  
                      &lt;p class="itemTitle"&gt;{{item.name}}&lt;/p&gt;
                      &lt;p id="{{desc+i}}"&gt;{{item.description}}&lt;/p&gt;
  
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>Right now EXCEPTION: [object Object] is thrown in the console when running this code.</p>