用角度連接兩個json文件的最佳方法是什么？

Question

我有一個包含產品列表的json文件。

[{"id":76,
  "name":"A",
  "description":"abc",
  "price":199,
  "imageUrl":"image.jpg",
  "productCategory":[{
    "categoryId":5,
    "category":null
   },{
    "categoryId":6,
    "category":null
   }
]}

然后，我有了第二個json文件，其中包含如下所示的類別列表：

[{"id":5,"name":"red"},
{"id":6,"name”:"blue"}]

在Angular中加入這兩個json文件類別的最佳方法是什么？ 這是我要實現的目標：

[{"id":76,
  "name":"A",
  "description":"abc",
  "price":199,
  "imageUrl":"image.jpg",
  "productCategory":[{
    "categoryId":5,
    "category":red
   },{
    "categoryId":6,
    "category":blue
   }
]}

Answer 1

您可以按照以下要求使用過濾器功能

let products = [{
      "id": 76,
      "name": "A",
      "description": "abc",
      "price": 199,
      "imageUrl": "image.jpg",
      "productCategory": [{
        "categoryId": 2,
        "category": null
      }, {
        "categoryId": 1,
        "category": null
      }]
    }, {
      "id": 77,
      "name": "B",
      "description": "abcd",
      "price": 1997,
      "imageUrl": "image.jpg",
      "productCategory": [{
        "categoryId": 5,
        "category": null
      }, {
        "categoryId": 6,
        "category": null
      }]
    },
    {
      "id": 78,
      "name": "C",
      "description": "abcde",
      "price": 1993,
      "imageUrl": "image.jpg",
      "productCategory": [{
        "categoryId": 4,
        "category": null
      }, {
        "categoryId": 6,
        "category": null
      }]
    }];


    let category = [{ "id": 5, "name": "red" }, { "id": 6, "name": "blue" }]

    let result = products.filter(p => {
      var exist = p.productCategory.filter(pc => category.find(c => c.id == pc.categoryId))[0];

      return exist;
    });

    console.log(result);

 let products = [{ "id": 76, "name": "A", "description": "abc", "price": 199, "imageUrl": "image.jpg", "productCategory": [{ "categoryId": 2, "category": null }, { "categoryId": 1, "category": null }] }, { "id": 77, "name": "B", "description": "abcd", "price": 1997, "imageUrl": "image.jpg", "productCategory": [{ "categoryId": 5, "category": null }, { "categoryId": 6, "category": null }] }, { "id": 78, "name": "C", "description": "abcde", "price": 1993, "imageUrl": "image.jpg", "productCategory": [{ "categoryId": 4, "category": null }, { "categoryId": 6, "category": null }] }]; let category = [{ "id": 5, "name": "red" }, { "id": 6, "name": "blue" }] let result = products.filter(p => { var exist = p.productCategory.filter(pc => category.find(c => c.id == pc.categoryId))[0]; return exist; }); console.log(result); 

Answer 2

我使用服務來檢索數據進行了堆棧閃電 。 是的，方法是使用switchMap和map。 SwitchMap接收一個數組，並且必須返回一個可觀察的對象。 使用map，我們轉換接收到的數據並返回轉換后的數據

this.dataService.getCategories().pipe(
         //first get the categories, the categories is in the
         //variable cats
         switchMap((cats:any[])=>{
           return this.dataService.getProducts().pipe(map((res:any[])=>{
               res.forEach(p=>{ //with each product
                 p.productCategory.forEach(c=>{ //with each productCategory in product
                   //equals a propertie "category" to the propertie "name" of the cats
                   c.category=cats.find(x=>x.id==c.categoryId).name 
                 })
               })
               return res
           }))
     })).subscribe(res=>{
       console.log(res)
     })

如果只有獨特的產品，我們可以制造

this.dataService.getCategories().pipe(
         switchMap((cats:any[])=>{
           return this.dataService.getUniqProduct(2).pipe(map((res:any)=>{
                 res.productCategory.forEach(c=>{
                   c.category=cats.find(x=>x.id==c.categoryId).name
                 })
               return res
           }))
     })).subscribe(res=>{
       console.log(res)
     })

我們可以改善我們的dataService“緩存”類別

  getCategories() {
    if (this.categories)
      return of(this.categories);

    return http.get(......).pipe(tap(res=>{
       this.categories=res;
    }))
  }

注意：在stackbit中，我使用“ of”模擬對http.get（...）的調用