将 json 内容转换为对象答案

【问题标题】：transform json content to object将 json 内容转换为对象
【发布时间】：2018-06-27 17:56:33
【问题描述】：

getSpecificData(par) {
return this.afd.list('products/products', ref => ref.orderByChild('par').equalTo(par)).valueChanges();
}

在我的组件中，我有这个：

export class Product {
  name: string;
  price: string;
  quantity: string;
}

ionViewDidLoad() {
    let aux =this.readData();
    console.log('Products', aux);
}
readData() {
    return this.firebaseService.getSpecificData(this.par).subscribe(
        items => {
            this.data = items,
            console.log('Data from Firebase ', this.data)
        }
    );
}

“console.log('Data from Firebase ', this.data)” 打印数据正确，但“console.log('Products', aux);”让我不确定。

我做错了什么？

我的目标是迭代数据数组并将每个项目转换为产品类型的对象。

问候，

【问题讨论】：

How do I return the response from an asynchronous call?的可能重复

标签： json typescript ionic-framework

【解决方案1】：

您的 readData 方法不会返回实际记录。一切都是异步发生的，这就是它在 subscribe 处理程序中工作的原因（该位仅在异步任务完成时被调用。

快速时间线示例：

ionViewDidLoad()
let aux = this.readData();
readData()
return this.firebaseService.getSpecificData(this.par).subscribe(
);
console.log('Products', aux);（太快了！！！）
（对 firebase getSpecificData 的调用完成）
items => {
this.data = items, 这是this.data 接收物品的地方
console.log('Data from Firebase ', this.data)
}

【讨论】：

谢谢。我非常理解你的解释。但是，这样，我怎样才能将项目转换为对象？它也必须是异步的吗？如何实现？
是的，您必须使用异步操作，实际上您需要触发使用 subscribe 处理程序中的数据 - 您可以调用方法、引发事件或使用里面有数据。
好的。所以如果我使用订阅中的数据应该没问题，对吧？像这样 // readData() { return this.firebaseService.getSpecificData(this.par).subscribe( items => { this.data = items, this.Products.push(new Product(element[0], element[1] , element[3])), console.log('来自 Firebase 的数据', this.data) } ); }// 但它没有工作:(
@ccorreia element 数组是从哪里来的……你是想使用this.data.element[0] 还是类似的？我假设console.log 位有效？
芬顿，你让我找到了解决方案。我发现了一点，异步调用是如何工作的。我发布了解决方案。如果您有任何改进建议，请告诉我。谢谢！

【解决方案2】：

芬顿的解释是正确的。

我想出了解决办法。还不知道是否是最好的解决方案，但它工作正常。

在我的提供商中，我有以下代码：

    export class Product {
    name: string;
    price: string;
    quantity: string;
    constructor(name: string, price: string, quantity: string) {
        this.name = name;
        this.price = name;
        this.quantity = quantity;
    }
}


    getSpecificData(par) {
    return this.afd.list('products/products', ref => ref.orderByChild('par').equalTo(par)).valueChanges().map(items => {
        let results = items.map(item => {
            return new Product(
                item.name,
                item.price,
                item.quantity
            );
        })
        return results;
    });
}

我的组件有这个：

readData() {
    this.firebaseService.getSpecificData(this.stock).map(
        data => {
            this.products = data;
        }
    ).subscribe();
}

它工作正常。我正在阅读我的 html 文件中的结果。

<ion-col *ngFor=" let product of products" >
        {{product.name}}
</ion-col>

【讨论】：