What method is most effective for combining two JSON files in Angular?

Question

What method is most effective for combining two JSON files in Angular?

My data includes a json file with a product list that looks like this:

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

In addition, I have another json file containing categories as follows:

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

I'm seeking the optimal approach to merge the category information from these two json files using Angular. Our end goal is to achieve the following result:

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

javascript json angular typescript

Answer 1

Answer №1

I created a StackBlitz example that utilizes a service to fetch data. The method involves using switchMap and map. SwitchMap takes an array as input and must return an observable. Within the map function, we modify the received data before returning it.

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

If there is only one unique product, we can simplify it to:

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 enhance our dataService by implementing category caching:

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

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

NOTE: In the StackBlitz example, I simulate the HTTP call using "of"

Answer 2

I created a StackBlitz example that utilizes a service to fetch data. The method involves using switchMap and map. SwitchMap takes an array as input and must return an observable. Within the map function, we modify the received data before returning it.

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

If there is only one unique product, we can simplify it to:

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 enhance our dataService by implementing category caching:

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

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

NOTE: In the StackBlitz example, I simulate the HTTP call using "of"

Answer 3

Answer №2

To fulfill your requirement, you can utilize the filter function as shown 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 4

To fulfill your requirement, you can utilize the filter function as shown 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);

What method is most effective for combining two JSON files in Angular?

Answer №1

Answer №2

Similar questions

Error Message: Unable to access properties of an undefined object while interacting with an API in a React application

The function error is currently in a waiting state as it already includes an

The LinkedIn API encountered an error when attempting to retrieve historical follower data, resulting in a HTTP

Encountered an error while handling a promise: Unable to access null properties (specifically, 'useState')

Gradle synchronization in IntelliJ causing missing folders in WAR Artifact

Encoding a multidimensional associative array into JSON using PHP

A method for highlighting duplicate rows in a DataTable by formatting them with the same color

Error: Missing root tag after converting XML to JSON and saving it to disk

Activate jQuery after a vanilla JavaScript function has been executed

Is Aurelia-Fetch reliant on whatwg-fetch as a dependency in its codebase?

The connection between the type of request and the corresponding response in an Ajax function

Adding a div beside an input element - step by step guide

The switch/case function I implemented is functioning correctly, however, an error is being displayed in the console stating "Cannot read property 'name' of null"

How jQuery manipulates the DOM during a drag-and-drop operation

How can we efficiently determine if any of the keys in an array of objects contains a value that is present in another array of arrays object?

Incorporating multiple true statements into an IF ELSE structure can enhance the decision-making

Conceal the div element if the value exceeds 0

Struggling with getting my Vue-CLI app deployed on Heroku

Utilizing Vue CLI's sourcemaps to pinpoint the styling within a Vue component file

How to extract Network Content displayed in Chrome using file_get_contents in PHP