围绕javascript json格式包装一个对象，如何获取角度来解析它

Posted 2023-03-13

【中文标题】围绕javascript json格式包装一个对象，如何获取角度来解析它

【英文标题】：Wrapping an object around javascript json format, how to get angular to parse it

【发布时间】：2016-12-30 23:59:51

【问题描述】：

当我的 json 来自 web api 并包装在一个名为“设备”的对象中时，我似乎无法使用 Angular 2 observable 获取数据

这是控制台中的数据图片

当我使用没有包装设备对象的 .json 文件时，它工作正常......

如果我调用一个 .json 文件，那么它可以显示

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

但是有了这个可观察的代码，我看不到在哪里添加 .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);

【问题讨论】：

从API获取json数据需要先做JSON.Parse(data)。

@RafiUdDaulaRefat 嘿，我在哪里做呢？上面的“数据”只是一个lambda，我可以改成blah，它是一样的......

您的 api 是否以 Data 对象响应？如果是这样，您需要先将其解析为 JSON。如果你想直接访问 JSON 文件，你可以关注这个***.com/questions/7346563/loading-local-json-file

不，代码适用于使用 .json 文件而没有包裹设备名称的文件，但这就是数据从调用 Web Api 中返回的方式，我可以在 Angular 1 中使用 result.data 处理它.Device，但使用上面的代码，我不知道该怎么做

基本上这段代码是用 json 包裹的，但它仍然是有效的 json，因为我什至在 JSONLint.com "Devices": [ ..... ] 中尝试过

【参考方案1】：

您可能有 CROS 问题。在服务器端，在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 = '***.com/q/39113330/1810391';
    titleUrl = 'http://***.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())
    

如果这不起作用，请给我控制台日志。

【讨论】：

对不起，我在 nginit 方法中订阅它...这不仅不能帮助解决设备问题，而且一个讨厌的副作用是输出重复到控制台登录浏览器告诉我有什么不对的

@JeremyMiller 好的，已更新。我想我明白你现在在寻找什么。

@JeremyMiller 已更新。