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
– alex kucksdorf, Commented Apr 28, 2017 at 11:15
This data structure is an Array stackoverflow.com/a/3633390/1165289. You can verify if you're trying a console.log((response instanceof Array)===true) — Bernie
– Bernie, Commented Apr 28, 2017 at 11:20

Mike Bovenlander · Accepted Answer · 2018-05-04 09:42:15Z

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 4, 2018 at 9:42

answered Apr 28, 2017 at 11:11

Mike Bovenlander

5,4665 gold badges32 silver badges47 bronze badges

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

4 Comments

Fredrik Lundin Grande Over a year ago

You answer is outputting {a: 1, b: 2}, not {a: 1} as you suggest in the comment after the console log

Andrea Alhena Over a year ago

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

Vel Over a year ago

@Mike, after update with you code. the output like that. i.sstatic.net/7t20c.png

Joe Clay Over a year ago

It's also worth noting that TypeScript 2.1 supports the experimental object spread syntax, which is functionally the same as the code that @AndrewReborn suggested. let merged = { ...obj1, ...obj2 };

Bernie · Accepted Answer · 2017-04-28 11:24:39Z

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, 2017 at 11:24

answered Apr 28, 2017 at 11:17

Bernie

5,0855 gold badges43 silver badges73 bronze badges

1 Comment

Vel Over a year ago

I replaced to resultdata :any={};

hamilton.lima · Accepted Answer · 2017-08-11 13:57:45Z

0

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

    });  
}

answered Aug 11, 2017 at 13:57

hamilton.lima

1,91818 silver badges29 bronze badges

Comments

Vel · Accepted Answer · 2021-12-09 06:03:18Z

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 9, 2021 at 6:03

Vel

9,4286 gold badges42 silver badges71 bronze badges

answered Apr 28, 2017 at 12:33

Gourav Sahare

113 bronze badges

4 Comments

Vel Over a year ago

My two json keys are same. It will not merge?

Vel Over a year ago

I post my two json object in question part

Gourav Sahare Over a year ago

If key on two object are same then it will merge and most latest one will only be there

Vel Over a year ago

how to fix this?. I want to merge two object?

Collectives™ on Stack Overflow

How can I join two objects in Angular?

4 Answers 4

4 Comments

1 Comment

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

1 Comment

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related