How to merge multiple json data in a single object in javascript

Question

Tried to merge multiple json output in a single object using javascript but i do not know how to do it. I have one service.this service producing json data(like below the json format) on each api call.Finally i want to merge all json data in a single object.

product.component.ts:

public mergeAllproducts;

ngOnInit(){

this.mergeJson('collectionone');
this.mergeJson('collectiontwo');
this.mergeJson('collectionthree');

console.log(this.mergeAllproducts); //All json data in a single object

}

product.service.ts:

mergeJson(collection){ 
    this.userService.getTableData(collection).subscribe(
      res => { 
        //res is json data format
       this.mergeAllproducts.push(res); 
      },
      err => {
        console.log(err); 
      }
    ); 
  }

}

Sample collection in a database is like below the json format.

[{ 
  "pid": 1,
  "product_name": "Mixed",
  "product_weight": "1kg",

},{

  "pid": 2,
  "product_name": "Sweet",
  "product_weight": "1kg",

},{

  "pid": 3,
  "product_name": "Fruit",
  "product_weight": "500kg",

}]

Can you explain more ? like wat is the output you expect.. the in put you hve shown.. but wat does each api call receive ? etc.. — Panther
– Panther, Commented May 10, 2020 at 12:12
@Panther: Yes.On each api call getting one json data..finally i want to merge in a single object — Kavitha K
– Kavitha K, Commented May 10, 2020 at 12:33
You need to explain more. But i can take a guess. Try to declare the mergeAllproducts as an empty array. In the api call, try to use this this.mergeAllproducts = [...this.mergeAllProducts, ...res] instead of this.mergeAllproducts.push(res); At the end of all the 3 calls, you would have one array with all objects inside it — Panther
– Panther, Commented May 10, 2020 at 12:51
@Panther: I am getting this error on that line : error TS2488: Type 'Object' must have a '[Symbol.iterator]()' method that returns an iterator. — Kavitha K
– Kavitha K, Commented May 10, 2020 at 13:00

Gowri Pranith Kumar · Accepted Answer · 2020-05-10 13:20:55Z

1

you can use the spread operator to merge the three collections like below

mergeJson(collection){ 
    this.userService.getTableData(collection).subscribe(
      res => { 
        var collection = JSON.parse(res);
       this.mergeAllproducts = [...this.mergeAllproducts , ...collection]; 
      },
      err => {
        console.log(err); 
      }
    ); 
  }

}

[...Collection1,...Collection2,...Collection3]

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax

edited May 10, 2020 at 13:20

answered May 10, 2020 at 12:14

Gowri Pranith Kumar

1,6852 gold badges12 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Kavitha K Over a year ago

Please understand my question..I am getting json data on each api call

springuper Over a year ago

@KavithaK your question isn't clear. If you just ask how to merge multiple json, this answer is good and maybe you could take a look at lodash.com/docs/#merge as well to merge data recursively. But looks like you have more context about the service/consumer etc you didn't explain clearly.

Kavitha K Over a year ago

@springuper: Can you check now..I have edited my question

Gowri Pranith Kumar Over a year ago

@KavithaK . If you are getting Json data , use JSON.parse to parse the json into javascript collections . After parsing , use the spread operator to merge as specified above

Gowri Pranith Kumar Over a year ago

@KavithaK Updated it . please check

Collectives™ on Stack Overflow

How to merge multiple json data in a single object in javascript

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related