Wrapping an object around javascript json format, how to get angular to parse it

Question

When my json is coming from web api as wrapped in an object called "Devices" I cannot seem to get at the data with Angular 2 observable

This is a pic of the data in console

When I use a .json file without the Devices object wrapped it works fine...

If I call up a .json file then it works to display

private _productUrl = 'api/devices/devices.json';

But with this observable code i do not see where to add in .Devices

private _productUrl = 'http://localhost:42822/api/device';

constructor(private _http: Http) { }

getProducts(): Observable<IDevice[]> {//Observable<IProduct[]> {
return this._http.get(this._productUrl)
    .map((response: Response) => <IDevice[]>response.json())
    .do(data => console.log("All: " + JSON.stringify(data)))
    .catch(this.handleError);
}

You need to do JSON.Parse(data) first if you get json data from API. — Rafi Ud Daula Refat, Aug 24 '16 at 02:07
@RafiUdDaulaRefat Hey, so where do I do this at? "data" above is just a lambda, i can change to blah and it is the same... — , Aug 24 '16 at 02:11
Are your api is responding with a Data object ??? If so you need to parse it to JSON first. If you want to access direct JSON file you can follow this http://stackoverflow.com/questions/7346563/loading-local-json-file — Rafi Ud Daula Refat, Aug 24 '16 at 02:17
No, code works with using .json file without the Devices name wrapped around it , but that is how the data is coming back from calling Web Api, I can handle it in Angular 1 with result.data.Device, but with this code above I am not seeing how to do it — , Aug 24 '16 at 02:23
basically this code is wrapped around json, but it is still valid json as i even tried in JSONLint.com `{"Devices": [{ ..... }] }` — , Aug 24 '16 at 02:24

John Siu · Answer 1 · 2016-08-31T08:34:55.240

You may have CROS issue. On server side, add following entry in response header for api/device:

Access-Control-Allow-Origin: *

@Component({
    selector: 'json-com',
    template: `
        <h2><a [href]="titleUrl">{{title}}</a></h2>
        <div *ngFor="let d of devices">
            DeviceId:{{d.DeviceId}} DeviceStatus:{{d.DeviceStatus}}
        </div>`
})
export class JsonCom implements OnInit {
    title = 'stackoverflow.com/q/39113330/1810391';
    titleUrl = 'http://stackoverflow.com/q/39113330/1810391';

    private _productUrl = 'http://localhost:42822/api/device';

    devices: IDevice[] = [];

    constructor(private _http: Http) { }

    ngOnInit() {
    this.getProducts().subscribe(
            d => {
                console.log('getProducts():' + JSON.stringify(d));
                this.devices = d.Devices;
            },
            e => console.log('error: ' + JSON.stringify(e)));
    }

    getProducts() {
    return this._http.get(this._productUrl)
            .do(d => console.log('_http.get():' + JSON.stringify(d)))
            .map(r => r.json())
    }
}

If this does not work, please give me the console log.

sorry, i subscribe to it in the nginit method... this not only does not work to help with Device issue, but a nasty side effect is duplication of output to console log in browser which tells me something is not right — , Aug 24 '16 at 07:04
@JeremyMiller ok, updated. I think I understand what you looking for now. — John Siu, Aug 24 '16 at 07:49

Wrapping an object around javascript json format, how to get angular to parse it

1 Answers1