javascript 2つの連想配列で一致箇所追加

Question

以下のような連想配列が2つあり、attendanceの方に名前（name）と日付(date)が合えば、dataの配列のvehicleとstaffのdepを追加したいのですが、
staff.depでは認識されないようなので、どう記述すればいいでしょうか。
後、複数項目追加したいので、target.date==dataN.date && target.name==dataN.name の判定をした上での記述はどうすればいいでしょうか。

angularjsでの違うテーブルのリストを合体させたいという趣旨ですが、いい方法はないでしょうか。

var attendance ={
    "obj1":{"date":"2015-01-01","name":"tanaka","出勤":"09:00:00","退勤":"18:00:00"},
    "obj2":{"date":"2015-01-01","name":"kimura","出勤":"10:00:00","退勤":"20:00:00"},
    "obj3":{"date":"2015-01-02","name":"tanaka","出勤":"09:00:00","退勤":"18:00:00"},
    "obj4":{"date":"2015-01-02","name":"kimura","出勤":"10:00:00","退勤":"20:00:00"}
};
var data ={
    "data1":{"date":"2015-01-01","name":"tanaka","vehicle":"car", "staff":{"id":"01","dep":"sales"}},
    "data2":{"date":"2015-01-01","name":"kimura","vehicle":"car", "staff":{"id":"02","dep":"engineer"}},
    "data3":{"date":"2015-01-01","name":"noguchi","vehicle":"train","staff":{"id":"03","dep":"bookkeeper"}},
    "data4":{"date":"2015-01-01","name":"kikuchi","vehicle":"train", "staff":{"id":"04","dep":"engineer"}},
    "data4":{"date":"2015-01-02","name":"tanaka","vehicle":"train", "staff":{"id":"01","dep":"sales"}}
};

var attendance_and_vehicle = Object.keys(attendance).reduce( function(dict, key){
    var target = attendance[key];
    target.vehicle = (
        Object.keys(data).map(
            function(key){ return data[key] }
        ).filter(
            function(dataN){ return ( target.date==dataN.date && target.name==dataN.name ) }
        )[0] || {} 
    ).vehicle;
    target.staff.dep = (
        Object.keys(data).map(
            function(key){ return data[key] }
        ).filter(
            function(dataN){ return ( target.date==dataN.date && target.name==dataN.name ) }
        )[0] || {} 
    ).staff.dep;
    dict[key]= target;
    return dict;
},{});

Answer 1

「オブジェクトを deep merge したい」という事でしょうか。
data.data4 が重複しているのは typo とし、vehicle, staff プロパティをマージするコードを書いてみました。

'use strict';
var attendance ={
    "obj1":{"date":"2015-01-01","name":"tanaka","出勤":"09:00:00","退勤":"18:00:00"},
    "obj2":{"date":"2015-01-01","name":"kimura","出勤":"10:00:00","退勤":"20:00:00"},
    "obj3":{"date":"2015-01-02","name":"tanaka","出勤":"09:00:00","退勤":"18:00:00"},
    "obj4":{"date":"2015-01-02","name":"kimura","出勤":"10:00:00","退勤":"20:00:00"}
};

var data ={
    "data1":{"date":"2015-01-01","name":"tanaka","vehicle":"car", "staff":{"id":"01","dep":"sales"}},
    "data2":{"date":"2015-01-01","name":"kimura","vehicle":"car", "staff":{"id":"02","dep":"engineer"}},
    "data3":{"date":"2015-01-01","name":"noguchi","vehicle":"train","staff":{"id":"03","dep":"bookkeeper"}},
    "data4":{"date":"2015-01-01","name":"kikuchi","vehicle":"train", "staff":{"id":"04","dep":"engineer"}},
    "data5":{"date":"2015-01-02","name":"tanaka","vehicle":"train", "staff":{"id":"01","dep":"sales"}}
};

var attendance_and_vehicle = Object.keys(attendance).reduce(function (previous, currentProperty) {
  var currentValue = previous[currentProperty];

  for (var i = 0, keys = Object.keys(data), l = keys.length, date = currentValue.date, name = currentValue.name; i < l; ++i) {
    var value = data[keys[i]];

    if (value.date === date && value.name === name) {
      currentValue.vehicle = value.vehicle;
      currentValue.staff = value.staff;
      return previous;
    }
  }

  return previous;
}, JSON.parse(JSON.stringify(attendance)));

console.log(JSON.stringify(attendance_and_vehicle));  // {"obj1":{"date":"2015-01-01","name":"tanaka","出勤":"09:00:00","退勤":"18:00:00","vehicle":"car","staff":{"id":"01","dep":"sales"}},"obj2":{"date":"2015-01-01","name":"kimura","出勤":"10:00:00","退勤":"20:00:00","vehicle":"car","staff":{"id":"02","dep":"engineer"}},"obj3":{"date":"2015-01-02","name":"tanaka","出勤":"09:00:00","退勤":"18:00:00","vehicle":"train","staff":{"id":"01","dep":"sales"}},"obj4":{"date":"2015-01-02","name":"kimura","出勤":"10:00:00","退勤":"20:00:00"}}

変数を分けて Array#reduce を使っている事から attendance と attendance_and_vehicle で依存関係がないように書いていますが、破壊的で良いのなら attendance を直接書き換える手法がより効率的です。

Object.keys(attendance).forEach(function (key) {
  // attendance[key] を書き換える
});

Re: snakeriver さん

Comments

[snakeriver]

ありがとうございます！破壊的には記述はしないつもりです。

[think49]

初めに書いたコードは破壊的ではありません。
https://jsfiddle.net/8dt6thpg/

Answer 2

attendance[key].staffはundefinedなので、attendance[key].staff.deptはundefined.deptになり、エラーです。
あと、filter関数の戻りを取って置いて使いまわした方がいいです。

var attendance_and_vehicle = Object.keys(attendance).reduce( function(dict, key){
    var target = attendance[key];
    var injectData = Object.keys(data).map(
        function(key){ return data[key] }
    ).filter(
        function(dataN){ return ( target.date==dataN.date && target.name==dataN.name ) }
    )[0]
    if (injectData){
        target.vehicle = injectData.vehicle;
        target.staff = { dept: injectData.staff.dep };
    } else {
        target.vehicle = undefined;
        target.staff = { dept: undefined };        
    }
    dict[key]= target;
    return dict;
},{});

Comments

[snakeriver]

ありがとうございます！しかしながら、
target.staff = { dept: injectData.staff.dep };　とかで、deptがnullである場合、nullのままの処理はどうすればいいでしょうか。
エラーで
angular.min.js:107 TypeError: Cannot read property 'dept' of null
と表示されてしまうます。

[Lhankor_Mhy]

angularの中で起きているエラーのようなので何とも言えませんが、エラーメッセージを見る限りstaffがnull値になっているデータがあるようなので、まずはそこを直した方がいいのでは。