從Angular的JSON對象獲取子數據

Question

我是角度和雲功能的新手。 我創建了一個雲功能來從Firebase提取數據。 它在郵遞員中正確響應。

格式如下：

{
    "products": {
        "-L7bnFARTPRbuYbPXnVw": {
            "createdAt": "Thu Mar 15 2018 09:26:09 GMT+0530 (India Standard Time)",
            "image": "https://firebasestorage.googleapis.com/v0/b/sign-up-angular.appspot.com/o/images%2Fbackground1.jpg?alt=media&token=fe96aeab-4f6f-4338-ad08-c3e0da1d610b",
            "likes": 1,
            "pname": "asdf",
            "price": "123"
        },
        "-L7bnJBfADM_PFVnKo4N": {
            "createdAt": "Thu Mar 15 2018 09:26:25 GMT+0530 (India Standard Time)",
            "image": "https://firebasestorage.googleapis.com/v0/b/sign-up-angular.appspot.com/o/images%2Fbackground1.jpg?alt=media&token=fe96aeab-4f6f-4338-ad08-c3e0da1d610b",
            "likes": 0,
            "pname": "asdf",
            "price": "123"
        }
    }
}

我想檢索數據並以角度顯示。

角度ts和html文件如下：

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { ProductService } from '../product.service';
import { Observable } from 'rxjs/Observable';
import { Product } from '../product';

@Component({
  selector: 'app-data',
  templateUrl: './data.component.html',
  styleUrls: ['./data.component.css'],
  providers: [ProductService]
})
export class DataComponent implements OnInit {
  products:Product[];
  constructor(private productService: ProductService) { }

  ngOnInit() {
    this.productService.readProducts()
      .subscribe(products =>{
        this.products = products['records']
        console.log(products);
        //On console data are showing properly.
      });
  }
}

HTML：

 <div class="row">
  <div class="col-md-12">

      <!-- HTML table for our list of product records -->
      <table class='table table-hover table-responsive table-bordered'>

          <tr>
              <th>Product</th>
              <th>Price</th>
              <th>Like</th>
              <th>Image</th>
          </tr>

          <!-- Use *ngFor directive to loop throught our list of products. -->
          <tr *ngFor="let product of products">
              <td>{{product.pname}}</td>
              <td>{{product.products.pname}}</td>
              <td>{{product.price}}</td>
              <td>{{product.likes}}</td>
              <td>{{product.image}}</td> 

          </tr>
      </table>
  </div>
</div>

但是它沒有顯示任何數據。

因此，請幫助在表格中顯示數據。 提前致謝。

Answer 1

感謝大家 。 我解決了如下問題，

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { ProductService } from '../product.service';
import { Observable } from 'rxjs/Observable';

@Component({
  selector: 'app-data',
  templateUrl: './data.component.html',
  styleUrls: ['./data.component.css'],
  providers: [ProductService]
})
export class DataComponent implements OnInit {
  products: any={};
  items: any=[];

  constructor(private productService: ProductService) { }

  ngOnInit() {
    this.productService.readProducts()
      .subscribe(products =>{
        this.products = products['products']

        console.log((Object.values(this.products)));
        this.items = Object.values(this.products);

        console.log("Item data:"+this.items);

      });


  }

}

Answer 2

將行從：

this.products = products['records']

至

this.products = products['products']

因為響應格式是關鍵products 。

Answer 3

您的數據不是數組，因此不可迭代。 一個對象只能通過其字段來遍歷。 您可以改用Object.keys創建一個陰影數組，然后遍歷它。 即：

productNames: string[];
products: Product

ngOnOnit() {
    // Code to get the products and stuff
    this.productNames = Object.keys(this.products);
}

然后在HTML中

<tr *ngFor="let productName of productNames">
    <td>{{products[productName]}}</td>
</tr>

Answer 4

問題來自產品是對象而不是數組的事實。

要使用* ngFor遍歷您的產品，建議將您的產品轉換為數組。

一種簡單的方法是使用Object.keys（）獲取產品ID並構造數組，如下所示：

ngOnInit () {
   this.productService.readProducts().subscribe(products => {
      const productIds = Object.keys(products['records']);
      this.products = productIds.map(productId => {
         const product = products['records'][productId];
         product.id = productId;

         return product;
      });
   });
}

我想您仍然需要跟蹤您的產品ID，因此在示例中，我先將其添加到產品對象，然后再將其添加到產品數組中。

希望能有所幫助

Answer 5

有一個很好的庫可以用來處理JSON文檔，它很小，很容易學習，並且只有一個函數要記住（jmespath.search（obj，filter））。

您可以在其網站上了解更多信息-http : //jmespath.org/或http://ashishuideveloper.in/2017/12/manipulate-json-document-easily-jmespath/