連想配列で2つのキーの値が重複しているものを削除し、新しく連想配列を作りたい。

Question

閲覧ありがとうございます。
下記についてご教授いただけますと幸いです。

実現したいこと

連想配列で2つのキーの値が重複しているものを削除し、新しく連想配列を作成したい。

例（連想配列の重複削除前　太郎と10が1つ重複）

const dataList=
[
  {name: '太郎', age: '10'},
  {name: '花子', age: '12'},
  {name: '壮大', age: '10'},
  {name: '頼子', age: '13'}, 
  {name: '太郎', age: '10'}
]

例（連想配列の重複削除後：重複していた太郎の要素を1つ削除）

const result =
[
  {name: '太郎', age: '10'},
  {name: '花子', age: '12'},
  {name: '壮大', age: '10'},
  {name: '頼子', age: '13'}
]

発生している問題・エラーメッセージ

重複しているデータが削除されずに新しく作成した連想配列の中に残っている。

該当のソースコード

    const result = dataList.filter(function(item){

      var duplicateCheck = [];

      if(duplicateCheck.indexOf(item["name"]) === -1 && duplicateCheck.indexOf(item["age"]) === -1) {
        duplicateCheck.push(item["name"]);
        return item;
      }
    });
    console.log(result);

Comments

[退会済みユーザー]

filter()の中でreturnするのは、残すならtrue、除去するならfalse、って点に気をつけるとわかるのではないかな。return item;しちゃダメ。

[nagano0141cafe]

ご指摘ありがとうございます。

Answer 1

どこまでを重複とみなすか次第ですね

const dataList=
[
  {name: '太郎', age: '10'},
  {name: '花子', age: '12'},
  {name: '壮大', age: '10'},
  {name: '頼子', age: '13'}, 
  {name: '太郎', age: '10'},
  {name: '花子', age: '13'},
  {age: '10', name: '壮大'},
];
const res1=[...new Set(dataList.map(JSON.stringify))].map(JSON.parse);
console.log(res1);
const res2=[...new Set(dataList.map(x=>JSON.stringify(Object.entries(x).sort((x,y)=>x[0]>y[0]?-1:1))))].map(x=>Object.fromEntries(JSON.parse(x)));
console.log(res2);

Comments

[usekay]

単純に新しい連想配列を作りそこに重複を消したい連想配列を入れてけばいい気もしますけどね。
値を結合したものがキー、値は連想配列そのもの。

[nagano0141cafe]

お礼が遅くなって申し訳ございません。回答ありがとうございます。

Answer 2

filterとfindIndexを使って以下のようにするとresultが得られます。

const result = dataList.filter(
  ({ name, age }, i) => i === dataList.findIndex(e => e.name === name && e.age === age)
);

👉 https://codepen.io/su507/pen/QWmyEwo?editors=0012

追記1

質問にあるコードの修正案を挙げます。
以下、修正の要点です。

• まず配列duplicateCheck はfilter の外側で宣言されている必要があります。
• また、duplicateCheck.indexOfメソッドで重複チェックできるようにするために、duplicateCheckの要素としては、'太郎10' のようなname の値と ageの値を連結した文字列にします。
• filterに渡すコールバックの中で上記のような形式の文字列を変数keyとして作り、その文字列が duplicateCheckになければpushする、という仕組みで重複チェックを実装します。
• filterに渡すコールバックは trueか falseを返すようにします。

const duplicateCheck = [];

const result = dataList.filter(function(item) {
  const key = `${item.name}${item.age}`;
  if(duplicateCheck.indexOf(key) === -1) {
    duplicateCheck.push(key);
    return true;
  }
  return false;
});

👉 https://codepen.io/su507/pen/rNdxLoy?editors=0012

追記2

ライブラリを使うコード例です。

上記の追記1のコードでも使った name の値とageの値を連結した文字列を重複チェックのためのキーとして利用し、かつ配列やオブジェクトの操作で便利なlodashのuniqByを使うと、以下のように書けます。

const result = _.uniqBy(dataList, e => `${e.name}${e.age}`);

👉 https://codepen.io/su507/pen/GRxojOg?editors=0012

Comments

[nagano0141cafe]

お礼が遅くなって申し訳ございません。
回答ありがとうございます。
追記1の修正行ったうえで回答のソースを参考に実装を進めたところ、要望の形で実装することができました。
複数のソースのご提示もしていただき、大変参考になりました。
ありがとうございます。