配列から条件を満たす要素を取得する find
<form action="">
<input type="text" id="id">
</form>
<p id="result"></p>const dataList = [{
id: 123,
name: "色は匂へど"
}, {
id: 6698,
name: "散りぬるを"
}, {
id: 1234,
name: "我が世誰ぞ"
}, ];
const id = document.querySelector("#id");
const result = document.querySelector("#result");
id.addEventListener("keyup", (e) => {
const inputId = Number(e.target.value);
findUser(inputId);
});
function findUser(inputId) {
const targetData = dataList.find((data) => data.id === inputId);
// find()メソッドの値が存在しないときの処理
if (targetData === undefined) {
result.textContent = "該当者なし";
return;
}
result.textContent = targetData.name;
}配列.find(コールバック関数)
コールバック関数に合格する最初の要素を返す
戻り値:要素
配列.findIndex(テスト関数)
コールバック関数に合格する最初の要素のインデックスを返す
戻り値:数値