How can Angular be taught to parse an object wrapped in JavaScript JSON format?

Question

How can Angular be taught to parse an object wrapped in JavaScript JSON format?

Having trouble accessing data from a JSON object called "Devices" returned from a web API using Angular 2 observables.

Here is the data structure shown in the console: https://i.sstatic.net/QrhjZ.png

When using a .json file without the 'Devices' wrapper, everything works fine...

If I fetch a .json file directly, it displays well

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

However, with this observable code, I am unsure how to incorporate the '.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);
}

json angular typescript observable

Answer 1

Answer №1

It seems like you are facing a CROS issue. To resolve this, add the following entry to the 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 the above solution doesn't work, kindly provide me with the console log for further assistance.

Answer 2

It seems like you are facing a CROS issue. To resolve this, add the following entry to the 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 the above solution doesn't work, kindly provide me with the console log for further assistance.

How can Angular be taught to parse an object wrapped in JavaScript JSON format?

Answer №1

Similar questions

"Utilizing MongoDB to update a collection document with a JSON object imported by a client within the Meteor

Using a package manager with Deno: Best practices and tips

Utilizing mapped types in a proxy solution

Can a specific type be created for a nested object that has varying levels of depth?

Infinite cycle occurs in Angular2 when adding a component

Progression from Angular2-rc1 to Angular2-rc2 encounters TypeScript error: anticipating ',' (TS1005)

Enhancing asynchronous operations with TypeScript and ExpressJs using Async/Await

Can anyone provide guidance on incorporating jQuery typing into an angular2 seed project?

Tips for showing various tooltip text when iterating through a list?

Struggling to make the transition from JavaScript to TypeScript in Ionic 2

Accessing a particular level within a JSON object in Node.js

Is a CSV Import a Better Fit for My Data Compared to a JSON Import?

Building with React js allows developers to generate downloadable files from JSON data received from an API response

Creating a new column in an SQL query by converting a set of results from another table into an array

I possess a JSON object retrieved from Drafter, and my sole interest lies in extracting the schema from it

Can the output type of a function be dynamically determined by using the function parameter name as the property in an interface?

Issues with displaying results from a local JSON file using Angular 4 services seem to be

What could be the reason behind the malfunction of nativescript-phone on Android during plugin build?

Convert JSON properties using NewtonSoft JsonConverter to rename a property to the value of another property

Discovering the worth of a variable outside of a subscription or Promise within Ionic 3