JSON Object to Angular 2 Template

Question

I am using Angular 2 to render a map with businesses all around my local area. I'm able to successfully grab from the Yelp API but I am having problems implementing it into my template. Do I have to convert the object into an Array or is there a workaround?

map.component.ts

import { Component } from '@angular/core';
import { OnInit } from '@angular/core';

import { Marker } from '../../models/map/marker';
import { MapService } from '../../services/map/map.service';
import {Observable} from 'rxjs/Rx';
import {Http, Response, Headers } from '@angular/http';

@Component({
    moduleId: module.id,
    selector: 'map-view',
    templateUrl: 'map.component.html',
    styleUrls: ['map.component.css'],
})

export class MapComponent {

    private markers = Object;

    constructor(mapService: MapService) {


        mapService.getMarkers()
            .subscribe(
                markers => this.markers = markers,
                error => console.error('Error: ' + error),
                () => console.log(this.markers)
            );   
    }

         marker = this.markers;

}

map.service.ts

import { Injectable } from '@angular/core';
import { Headers, Http } from '@angular/http';
import 'rxjs/add/operator/map';


@Injectable()
export class MapService {

    private headers = new Headers();
    constructor(private http: Http) { }



    getMarkers() {
        this.headers.append("Access-Control-Allow-Origin", '*');
        this.headers.append("Access-Control-Allow-Methods", 'GET, POST, PATCH, PUT, DELETE, OPTIONS');
        this.headers.append("Access-Control-Allow-Headers", 'Origin, Content-Type, X-Auth-Token');
        this.headers.append("Authorization", 'Bearer ' + 'supersweetkey');
        return this.http.get('https://api.yelp.com/v3/businesses/search?location=lol&limit=50', { headers: this.headers})
            .map(response => response.json());
    }

}

My template file

<sebm-google-map [latitude]="42.975397" [longitude]="-82.382504" [mapDraggable]="false" [zoom]="13" [scrollwheel]="false"
  [zoomControl]="false" [streetViewControl]="false">
</sebm-google-map>
<ul>
  <li *ngFor="let marker of markers">{{ marker.businesses}}</li>
</ul>

I get an error this way.

Cannot find a differ supporting object 'function Object() { [native code] }' of type 'Object'. NgFor only supports binding to Iterables such as Arrays.

More errors:

EXCEPTION: Error in http://localhost:3000/app/components/map/map.component.html:4:6 caused by: Cannot find a differ supporting object '[object Object]' of type 'Sitara Indian Cuisine'. NgFor only supports binding to Iterables such as Arrays.
ErrorHandler.handleError @ core.umd.js:3488
next @ core.umd.js:8375
schedulerFn @ core.umd.js:7490
SafeSubscriber.__tryOrUnsub @ Subscriber.ts:238
SafeSubscriber.next @ Subscriber.ts:190
Subscriber._next @ Subscriber.ts:135
Subscriber.next @ Subscriber.ts:95
Subject.next @ Subject.ts:61
EventEmitter.emit @ core.umd.js:7476
NgZone.triggerError @ core.umd.js:7837
onHandleError @ core.umd.js:7798
ZoneDelegate.handleError @ zone.js:233
Zone.runTask @ zone.js:154
ZoneTask.invoke @ zone.js:332
core.umd.js:3490 ORIGINAL EXCEPTION: Cannot find a differ supporting object '[object Object]' of type 'Sitara Indian Cuisine'. NgFor only supports binding to Iterables such as Arrays.
ErrorHandler.handleError @ core.umd.js:3490
next @ core.umd.js:8375
schedulerFn @ core.umd.js:7490
SafeSubscriber.__tryOrUnsub @ Subscriber.ts:238
SafeSubscriber.next @ Subscriber.ts:190
Subscriber._next @ Subscriber.ts:135
Subscriber.next @ Subscriber.ts:95
Subject.next @ Subject.ts:61
EventEmitter.emit @ core.umd.js:7476
NgZone.triggerError @ core.umd.js:7837
onHandleError @ core.umd.js:7798
ZoneDelegate.handleError @ zone.js:233
Zone.runTask @ zone.js:154
ZoneTask.invoke @ zone.js:332
core.umd.js:3493 ORIGINAL STACKTRACE:
ErrorHandler.handleError @ core.umd.js:3493
next @ core.umd.js:8375
schedulerFn @ core.umd.js:7490
SafeSubscriber.__tryOrUnsub @ Subscriber.ts:238
SafeSubscriber.next @ Subscriber.ts:190
Subscriber._next @ Subscriber.ts:135
Subscriber.next @ Subscriber.ts:95
Subject.next @ Subject.ts:61
EventEmitter.emit @ core.umd.js:7476
NgZone.triggerError @ core.umd.js:7837
onHandleError @ core.umd.js:7798
ZoneDelegate.handleError @ zone.js:233
Zone.runTask @ zone.js:154
ZoneTask.invoke @ zone.js:332
core.umd.js:3494 Error: Cannot find a differ supporting object '[object Object]' of type 'Sitara Indian Cuisine'. NgFor only supports binding to Iterables such as Arrays.
    at NgFor.ngOnChanges (http://localhost:3000/node_modules/@angular/common/bundles/common.umd.js:1649:31) [angular]
    at Wrapper_NgFor.ngDoCheck (/CommonModule/NgFor/wrapper.ngfactory.js:49:20) [angular]
    at CompiledTemplate.proxyViewClass.View_MapComponent0.detectChangesInternal (/AppModule/MapComponent/component.ngfactory.js:135:19) [angular]
    at CompiledTemplate.proxyViewClass.AppView.detectChanges (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:12527:18) [angular]
    at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:12674:48) [angular]
    at CompiledTemplate.proxyViewClass.View_AppComponent0.detectChangesInternal (/AppModule/AppComponent/component.ngfactory.js:181:20) [angular]
    at CompiledTemplate.proxyViewClass.AppView.detectChanges (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:12527:18) [angular]
    at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:12674:48) [angular]
    at CompiledTemplate.proxyViewClass.View_AppComponent_Host0.detectChangesInternal (/AppModule/AppComponent/host.ngfactory.js:29:19) [angular]
    at CompiledTemplate.proxyViewClass.AppView.detectChanges (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:12527:18) [angular]
    at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:12674:48) [angular]
    at ViewRef_.detectChanges (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:9775:24) [angular]
    at eval (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:8642:71) [angular]
    at Array.forEach (native) [angular]
ErrorHandler.handleError @ core.umd.js:3494
next @ core.umd.js:8375
schedulerFn @ core.umd.js:7490
SafeSubscriber.__tryOrUnsub @ Subscriber.ts:238
SafeSubscriber.next @ Subscriber.ts:190
Subscriber._next @ Subscriber.ts:135
Subscriber.next @ Subscriber.ts:95
Subject.next @ Subject.ts:61
EventEmitter.emit @ core.umd.js:7476
NgZone.triggerError @ core.umd.js:7837
onHandleError @ core.umd.js:7798
ZoneDelegate.handleError @ zone.js:233
Zone.runTask @ zone.js:154
ZoneTask.invoke @ zone.js:332
core.umd.js:3497 ERROR CONTEXT:
ErrorHandler.handleError @ core.umd.js:3497
next @ core.umd.js:8375
schedulerFn @ core.umd.js:7490
SafeSubscriber.__tryOrUnsub @ Subscriber.ts:238
SafeSubscriber.next @ Subscriber.ts:190
Subscriber._next @ Subscriber.ts:135
Subscriber.next @ Subscriber.ts:95
Subject.next @ Subject.ts:61
EventEmitter.emit @ core.umd.js:7476
NgZone.triggerError @ core.umd.js:7837
onHandleError @ core.umd.js:7798
ZoneDelegate.handleError @ zone.js:233
Zone.runTask @ zone.js:154
ZoneTask.invoke @ zone.js:332
core.umd.js:3498 DebugContext {_view: C…e.proxyViewClass, _nodeIndex: 5, _tplRow: 4, _tplCol: 6}
ErrorHandler.handleError @ core.umd.js:3498
next @ core.umd.js:8375
schedulerFn @ core.umd.js:7490
SafeSubscriber.__tryOrUnsub @ Subscriber.ts:238
SafeSubscriber.next @ Subscriber.ts:190
Subscriber._next @ Subscriber.ts:135
Subscriber.next @ Subscriber.ts:95
Subject.next @ Subject.ts:61
EventEmitter.emit @ core.umd.js:7476
NgZone.triggerError @ core.umd.js:7837
onHandleError @ core.umd.js:7798
ZoneDelegate.handleError @ zone.js:233
Zone.runTask @ zone.js:154
ZoneTask.invoke @ zone.js:332
Subscriber.ts:241 Uncaught ViewWrappedError {_nativeError: Error: Error in http://localhost:3000/app/components/map/map.component.html:4:6 caused by: Cannot fi…, originalError: Error: Cannot find a differ supporting object '[object Object]' of type 'Sitara Indian Cuisine'. NgF…, context: DebugContext}

what is error? Can you console.log the response in .map. marker.business might be simply the wrong path. — deek
– deek, Commented Dec 16, 2016 at 0:04
@deek added the error above. I get a couple of errors that are like this. — Lewis Menelaws
– Lewis Menelaws, Commented Dec 16, 2016 at 0:06

deek · Accepted Answer · 2016-12-16 00:42:10Z

1

Based on commment:

response from yahoo: array of Object {businesses: Array[50], total: 242}

 private markers = [];

    constructor(mapService: MapService) {


        mapService.getMarkers()
            .subscribe(
                markers => this.markers = markers[0].businesses,
                error => console.error('Error: ' + error),
                () => console.log(this.markers)
            );   
    }

         marker = this.markers;

}

now change code here.

<li *ngFor="let testMarker of markers">{{ testMarker.name}}</li>

edited Dec 16, 2016 at 0:42

answered Dec 16, 2016 at 0:08

deek

1,1051 gold badge9 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Lewis Menelaws Over a year ago

I get an error: caused by: Cannot read property 'businesses' of undefined

deek Over a year ago

markers => { console.log(markers.business); this.markers = markers;}; make that change and tell me what you see

Lewis Menelaws Over a year ago

I get an array of Objects: Array[50

deek Over a year ago

should be fine now, see changes

Lewis Menelaws Over a year ago

I am still not getting anything. It doesn't log to my console anymore either. Let me post all of my errors in my main post.

|

Collectives™ on Stack Overflow

JSON Object to Angular 2 Template

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related