JSON Objekt zu Angular 2 Vorlage

Ich benutze Angular 2, um eine Karte mit Unternehmen in meiner Umgebung zu rendern. Ich bin in der Lage, erfolgreich von der Yelp-API zu profitieren, aber ich habe Probleme, sie in meine Vorlage zu implementieren. Muss ich das Objekt in ein Array konvertieren oder gibt es einen Workaround?JSON Objekt zu Angular 2 Vorlage

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()); 
    } 

}

Meine Vorlagendatei

<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>

Ich erhalte eine Fehlermeldung auf diese Weise.

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

mehr Fehler:

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}

Quelle

2016-12-15 Lewis

versuchen lassen Marker Marker; – deek

@deek leider das hat nicht funktioniert :( – Lewis

was ist der Fehler? Können Sie console.log die Antwort in .map. Marker.business könnte einfach der falsche Weg sein. – deek

Basierend auf commment:

Antwort von Yahoo: array of Object {Unternehmen: Array [50], gesamt: 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; 

}

jetzt Code hier ändern.

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

Quelle

2016-12-16 00:08:45 deek

aktualisiert Ich erhalte eine Fehlermeldung: verursacht durch: Kann die Eigenschaft 'business' von undefined nicht lesen – Lewis

markers => {console.log (markers.business); this.markers = markers;} ; machen Sie das ändern und sagen Sie mir, was Sie sehen – deek

Ich bekomme eine Reihe von Objekten: Array [50 – Lewis

JSON Objekt zu Angular 2 Vorlage

Antwort

Verwandte Themen