連想配列の表示で名前がかぶったら次に日付を見て一番新しいものを表示するプログラムを作りたい

Question

前提・実現したいこと

配列の氏名と日付の出力をしたいのですが、名前、日付が登録されている連想配列（これは連想配列で会ってますか？）を出力する際に名前がかぶっていた場合に一番新しい日付の配列のみを表示したいと考えています（少し文章がおかしいかもしれないですがすみません）。

HTMLでこのように表示したいです。
配列↓
array(7)[
0: {name: "田中", date: "2020-08-27"}
1: {name: "田中", date: "2020-08-07"}
2: {name: "坂下", date: "2020-08-19"}
3: {name: "坂下", date: "2020-07-30"}
4: {name: "吉田", date: "2020-07-31"}
5: {name: "山田", date: "2020-07-29"}
6: {name: "山本", date: "2020-07-29"}
]

列1	列2
田中	2020-08-27
田中	2020-08-07
坂下	2020-08-19
坂下	2020-07-30
吉田	2020-07-31
山田	2020-07-29
山本	2020-07-29

↓

列1	列2
田中	2020-08-27
坂下	2020-08-19
吉田	2020-07-31
山田	2020-07-29
山本	2020-07-29

該当のソースコード

		for (i = 0; i < array.length; i++) {
						if (array[i] != array[i+1]) {
							document.getElementById(x).value = array[i]["name"];
							document.getElementById(x).textContent = "【" + array[i]["name"] + "】　最終更新日【" + array[i]["date"] + "】";
							x+=1;
						} else {
							if (array[i]["name"] == array[i+1]["name"]) {
								document.getElementById(i).textContent = "【" + array[i]["name"] + "】　最終更新日【" + array[i]["date"] + "】";
							} else {
								date = array[i]["date"];
								while (0) {
									x = i - 1;
									if (array[i]["name"] == array[x]["name"]) {
										var date1 = Date.parse(array[i]["date"]);
										var date2 = Date.parse(array[x]["date"]);
										if (date2 < date1) {
											date = date1
										}
									} else {
										document.getElementById(i).value = array[i]["name"];
										document.getElementById(i).textContent = "【" + array[i]["name"] + "】　最終更新日【" + date + "】";
										break;
									}
									i++

								}
							}
						}
					}

試したこと

配列のループとIDへの挿入ループの考え方が分からず頭がパンクしてしまいどうやって書けばいいのかわからなくなってしまいました。

多次元の配列をあまり扱ったことがなくボロボロのコードだとは思いますが修正、一気に変えても構いません、ご指摘お願いします。

Answer 1

効率がいいとは言い難いですがnameで絞った上でreduceを使う方法はどうでしょうか？

const array = [
    {name: "田中", date: "2020-08-27"}, 
    {name: "田中", date: "2020-08-07"}, 
    {name: "坂下", date: "2020-08-19"},  
    {name: "坂下", date: "2020-07-30"},  
    {name: "吉田", date: "2020-07-31"},
    {name: "山田", date: "2020-07-29"},
    {name: "山本", date: "2020-07-29"}
];
// 名前の配列を取得
let nameArray = array.map((obj) => obj.name);
// 名前の重複を削除
nameArray = Array.from(new Set(nameArray));

// 処理結果格納用の配列
let result = [];

// 名前の配列をループ
nameArray.map((currentName) => {
  // 対象の名前のデータのみを抽出
  const filterdArray = array.filter((obj) => obj.name === currentName);
  // reduceで最も新しい日付を取得
  const latestDate = filterdArray.length > 1? filterdArray.reduce((a,b) => a.date > b.date? a.date : b.date) : filterdArray[0].date;
  // resultに格納
  result.push({name : currentName, date : latestDate});
});

console.log(result);

Comments

[nekoniki]

既に解決済みでしたか。
失礼しました。

Answer 2

そういう時は、sortメソッドと、filterメソッド、findIndexメソッドをうまく使うといけるかと。

const arr = [
  {name: "田中", date: "2020-08-27"},
  {name: "田中", date: "2020-08-07"},
  {name: "坂下", date: "2020-08-19"},
  {name: "坂下", date: "2020-07-30"},
  {name: "吉田", date: "2020-07-31"},
  {name: "山田", date: "2020-07-29"},
  {name: "山本", date: "2020-07-29"}
];

const newArr = arr.sort((a, b) => {
  if ( (new Date(a.date)) > (new Date(b.date)) ) {
    return -1;
  } else if ((new Date(a.date)) < (new Date(b.date))) {
    return 1;
  } else {
    return 0;
  }
}).filter((v1, i1, a1) => 
  a1.findIndex(v2 => v1.name == v2.name) == i1
);

console.log(newArr);

まず、sortによって、日付の大きい順に並べ替えます。
そして、filterと、findIndexによって、同じ添字の同じ値を持つオブジェクトを丸めます。

他にも、reduceメソッドとかでもやれるかと思います。

そして、もっとスマートな方法があるかも。

Comments

[wakaranchin]

一生懸命for文で回していた自分がバカでした。。。
こんな便利なものがあるのですね！もっと勉強します！！

[miyabi_pudding]

いや、forで回す考え方は基本で、その考え方をすることは第一歩なのですごく大事ですよ。
その上で、配列処理には便利なメソッドがあるんだーってことを覚えればよいかと。