How can I join two objects in Angular?

Question

how to join to object in angular 2?

object response 1

0:Object
1:Object
2:Object
3:Object

object response 2

0:Object
1:Object
2:Object
3:Object

myComponent component

resultdata :any=Array;

 fooddrinks_data_func(Defaultparams){

    return this.CitiesService.getresult(Defaultparams).subscribe(data => {                
         this.resultdata = this.resultdata.join(data.categorylistvalues);

    });  
}

I get this error.

error_handler.js:59 ORIGINAL STACKTRACE: ErrorHandler.handleError @ error_handler.js:59 next @ application_ref.js:348 schedulerFn @ async.js:93 SafeSubscriber.__tryOrUnsub @ Subscriber.js:234 SafeSubscriber.next @ Subscriber.js:183 Subscriber._next @ Subscriber.js:125 Subscriber.next @ Subscriber.js:89 Subject.next @ Subject.js:55 EventEmitter.emit @ async.js:79 NgZone.triggerError @ ng_zone.js:333 onHandleError @ ng_zone.js:294 webpackJsonp.1416.ZoneDelegate.handleError @ zone.js:338 webpackJsonp.1416.Zone.runTask @ zone.js:169 ZoneTask.invoke @ zone.js:420 error_handler.js:60 TypeError: _this.resultdata.join is not a function

the Final result should be like this.

this.resultdata

0:Object
1:Object
2:Object
3:Object
4:Object
5:Object
6:Object
7:Object

Maybe you can clarify what exactly you want/expect as a result? — alex kucksdorf, Apr 28 '17 at 11:15
This data structure is an Array http://stackoverflow.com/a/3633390/1165289. You can verify if you're trying a console.log((response instanceof Array)===true) — Bernhard, Apr 28 '17 at 11:20

Mike Bovenlander · Answer 1 · 2018-05-04T09:42:15.350

20

I think you are looking for object.assign()?

The Object.assign() method is used to copy the values of all enumerable own properties from one or more source objects to a target object. It will return the target object.

var obj1 = { a: 1 };
var obj2 = { b: 2 };

var merged = Object.assign(obj1, obj2);

console.log(merged); // { a: 1, b: 2 }

edited May 04 '18 at 09:42

answered Apr 28 '17 at 11:11

Mike Bovenlander

5,236
5
28
47

1

You answer is outputting `{a: 1, b: 2}`, not `{a: 1}` as you suggest in the comment after the console log – Fredrik Lundin Apr 28 '17 at 11:15
3

Just for a matter of completeness, Object.assign takes the first parameter as the target: this means that obj1 and merged will have the same value. For avoiding this kind of situations, it's always a better practice to set the Object.assign first parameter as {} so no object is modified and the returned value of the method will be just stored in a new variable (merged, in the case of @Mike example). var merged = Object.assign({}, obj1, obj2); – Andrea Alhena Apr 28 '17 at 11:28
@Mike, after update with you code. the output like that. https://i.stack.imgur.com/7t20c.png – Vel Apr 28 '17 at 11:34
4

It's also worth noting that TypeScript 2.1 supports the experimental [object spread syntax](https://github.com/tc39/proposal-object-rest-spread), which is functionally the same as the code that @AndrewReborn suggested. `let merged = { ...obj1, ...obj2 };` – Joe Clay Apr 28 '17 at 11:34

Bernhard · Answer 2 · 2017-04-28T11:24:39.100

0

Object.assign is not fully supported in all browsers. And the snippet shows commands which are used with Arrays. (.join is a member of Array).

Even the resultdata was instantiated as an Array...

So here an example how it works if the responses are arrays as well (and those look like arrays)

resultdata :any=[];

fooddrinks_data_func(Defaultparams){
  return this.CitiesService.getresult(Defaultparams).subscribe(data => {                
     // And here concat is better choice 
     this.resultdata = this.resultdata.concat(data.categorylistvalues);
  });  
}

edited Apr 28 '17 at 11:24

answered Apr 28 '17 at 11:17

Bernhard

4,855
5
39
70

I replaced to resultdata :any={}; – Vel Apr 28 '17 at 11:23

score 0 · Answer 3 · edited Dec 09 '21 at 06:03

0

@Mike answer works good.

var obj1 = { a: 1 };
var obj2 = { b: 2 };

var merged = Object.assign(obj1, obj2);

console.log(merged); // { a: 1, b: 2 }

but after Object.assign obj1 also becomes same as merged

console.log(obj1);  // { a: 1, b: 2 }

You can use lodash to use one liner solution

var obj1 = {a :1};
var obj2 = { b: 2};

_.merge(obj1, obj2);

Result will be ---->

{
 "a": 1,
 "b": 2
}

In addition of that you will lose key if your both object have same key name.

edited Dec 09 '21 at 06:03

Vel

9,027
6
34
66

answered Apr 28 '17 at 12:33

Gourav Sahare

11
3

My two json keys are same. It will not merge? – Vel Apr 28 '17 at 12:36
I post my two json object in question part – Vel Apr 28 '17 at 12:37
If key on two object are same then it will merge and most latest one will only be there – Gourav Sahare Apr 28 '17 at 12:46
how to fix this?. I want to merge two object? – Vel Apr 28 '17 at 12:51

score 0 · Answer 4 · answered Aug 11 '17 at 13:57

When reading your code two details called me attention:

result data wasn't typed as Array
there were no map() after the getResult method call, that I am assuming is a remote call.

So this is my suggestion of code change

resultdata :Array<any> = [];

 fooddrinks_data_func(Defaultparams){

    return this.CitiesService.getresult(Defaultparams)
    .map((response) => response.json())
    .subscribe(data => {                
         this.resultdata = this.resultdata.join(data.categorylistvalues);

    });  
}

How can I join two objects in Angular?

4 Answers4