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

Answer 1

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 }

Answer 2

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

Answer 3

@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.

Answer 4

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

    });  
}