用角度连接两个json文件的最佳方法是什么？

Question

I have a json file which contains the list of products.

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

I then have a second json file with a list of categories which look like so:

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

What is the best way to join the categories of this two json files in Angular? This is what I aim to achieve:

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

Answer 1

You can use filter function for your requirement as below

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

I make a stackblitz that use a service to retreive the data. Yes, the way is using switchMap and map. SwitchMap receive an array and must return an observable. with map, we transform the data received and return the data transformed

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)
     })

If only has an unique product we can make

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)
     })

We can improve our dataService "cached" the categories

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

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

NOTE:In the stackbit I simulate the call to an http.get(...) using "of"