如何在 Angular 中连接两个对象？答案

【问题标题】：How can I join two objects in Angular?如何在 Angular 中连接两个对象？
【发布时间】：2017-09-26 11:31:27
【问题描述】：

如何加入角度 2 中的对象？

对象响应 1

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

对象响应 2

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

myComponent 组件

resultdata :any=Array;

 fooddrinks_data_func(Defaultparams){

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

    });  
}

我收到此错误。

error_handler.js:59 原始堆栈跟踪：ErrorHandler.handleError @ error_handler.js:59 下一个 @ 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 不是函数

最终的结果应该是这样的。

this.resultdata

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

【问题讨论】：

这两个例子是对象还是包含对象的数组？
@Bernhard 两个示例对象。
也许您可以澄清一下您想要/期望的结果是什么？
@alexkucksdorf，我更新了问题部分
这个数据结构是一个数组stackoverflow.com/a/3633390/1165289。您可以验证您是否正在尝试使用 console.log((response instanceof Array)===true)

标签： json angular object

【解决方案1】：

我想你在找object.assign()？

Object.assign() 方法用于将所有可枚举自身属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。

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

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

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

【讨论】：

您的回答是输出{a: 1, b: 2}，而不是您在控制台日志后的评论中建议的{a: 1}
为了完整起见，Object.assign 将第一个参数作为目标：这意味着 obj1 和 merge 将具有相同的值。为了避免这种情况，最好将 Object.assign 第一个参数设置为 {}，这样就不会修改任何对象，并且方法的返回值只会存储在新变量中（合并，在@Mike 示例）。 var merge = Object.assign({}, obj1, obj2);
@Mike，用你的代码更新后。这样的输出。 i.stack.imgur.com/7t20c.png
另外值得注意的是，TypeScript 2.1 支持实验性的object spread syntax，它在功能上与@AndrewReborn 建议的代码相同。 let merged = { ...obj1, ...obj2 };

【解决方案2】：

Object.assign 并非在所有浏览器中都得到完全支持。 sn-p 显示与数组一起使用的命令。（.join 是 Array 的成员）。

甚至resultdata 也被实例化为一个数组...

这里有一个例子，如果响应也是数组（并且看起来像数组），它是如何工作的

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

【讨论】：

我替换为 resultdata :any={};

【解决方案3】：

阅读您的代码时，有两个细节引起了我的注意：

结果数据未键入为数组
getResult 方法调用后没有 map()，我假设是远程调用。

所以这是我对代码更改的建议

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

    });  
}

【讨论】：

【解决方案4】：

@Mike 回答效果很好。

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

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

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

但是在 Object.assign 之后 obj1 也变得和合并一样

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

你可以使用 lodash 来使用一个班轮解决方案

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

_.merge(obj1, obj2);

结果将是---->

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

此外，如果您的两个对象具有相同的密钥名称，您将丢失密钥。

【讨论】：

我的两个 json 键是一样的。不会合并？
我在有问题的部分发布了我的两个 json 对象
如果两个对象上的键相同，那么它将合并并且最新的一个只会在那里
如何解决这个问题？我想合并两个对象？