将输入元素的值属性与对象数组交叉引用

Question

我有一些JSON数据，它是数组中的一系列对象，通过PHPjson_encode()和javascriptfetch()API获取并输出。从本质上讲，它是输出特定的图像板数据，在多个板上可以有相同的图像，显然，还有多个图像板。这一切都如预期的那样。

该数据的一个例子是：

[
{board_id: 428, board_name: 'tree board', image_id: 269}
{board_id: 428, board_name: 'tree board', image_id: 292}
{board_id: 426, board_name: 'Urban and City', image_id: 269}
{board_id: 426, board_name: 'Urban and City', image_id: 292}
{board_id: 426, board_name: 'Urban and City', image_id: 410}
{board_id: 365, board_name: 'random stuff', image_id: 269}
{board_id: 365, board_name: 'random stuff', image_id: 292}
]

上下文

在JavaScriptfetch()API的then()方法中，基于上述数据创建一些按钮元素并将其附加到父包装器，其中每个board_id值仅创建一个元素。它只为每个board_id创建一个按钮，因为每个板名只需要显示一次。

// data fetched from the database with PHP and JS fetch()
const data=[{board_id:428,board_name:"tree board",image_id:269},{board_id:428,board_name:"tree board",image_id:292},{board_id:426,board_name:"Urban and City",image_id:269},{board_id:426,board_name:"Urban and City",image_id:292},{board_id:426,board_name:"Urban and City",image_id:410},{board_id:365,board_name:"random stuff",image_id:269},{board_id:365,board_name:"random stuff",image_id:292}];
// code that sits inside the .then() method of the fetch()
const wrapper = document.querySelector('.wrapper');
const ids = [];
const buttons = [];
for (const { board_id, board_name } of data) {
if (!ids.includes(board_id)) {
ids.push(board_id);
buttons.push(`<button value=${board_id}>${board_name}</button>`);
}
}
wrapper.innerHTML = buttons.join('');

这产生了这个HTML(让我们称之为"组件A">)：

<div class="wrapper">
<button value="428">tree board</button>
<button value="426">Urban and City</button>
<button value="365">random stuff</button>
</div>

有一个单独的组件通过页面加载循环输出到页面上，该组件保存单个图像和相关细节。

图像表单的简化HTML(让我们称之为"组件B">)

<form method="post">
<img src="path/to/image.jpg">
<input value="269" type="hidden" class="image-id">
<p class="add-to-board">Add To Image Board</p>
</form>

当您单击此表单中的"添加到图像板"元素时，它会打开板组件(组件A)，并启动fetch()，输出板按钮列表。

注意：因为此JSON数据只提取一次，所以.click()事件会从"添加到图像板"<p>元素传递到页面顶部的一个单独表单/按钮，以使其更具性能，而不必运行可能大量的图像组件等。

上面显示的图像组件/表单包含一个隐藏的输入元素，该元素在其value属性中保持image_id值。

然后，您可以选择要将所选图像添加到的特定板(从"组件A"中)。

所有这些都可以。

问题

在使用JSON数据的fetch()的then()方法中，我试图检查来自图像组件(组件B)的所选图像的image_id是否已分配给JSON对象数组中的board_id，如果已分配，则在"组件a"中的相关按钮(例如class="allocated"

尽管只有一个板组件显示板列表(组件A)，但图像组件(组件B)有多个实例。

下面是一些伪代码，用于从图像组件中获取image_id(我不知道如何将其与异步then()方法结合使用，或者在其中使用？)：

let addToBoard = document.querySelectorAll('.add-to-board')
addToBoard.forEach((i) => {
i.addEventListener('click', (e) => {
e.target.closest('form).querySelector('.image-id').value
})
})

问题摘要

我如何交叉引用图像组件(组件B)的image_id值，以检查JSON对象数组中的等效值，如果存在，则在组件a中的相关HTML按钮上输出类属性。

非常感谢任何帮助。

Answer 1

使用find在数组中查找，如果找到条目，则使用该条目获取board_id，并使用属性选择器搜索要添加类的按钮。

请注意，在使用find的查找中，您必须将value属性转换为数字，因为由于HTML规范，属性只能是字符串，而在数据源中它是数字。

const board = data.find(board => board.image_id === parseInt(e.target.closest('form').querySelector('.image-id').value))
if (board) {
document.querySelector(`.wrapper button[value="${board.board_id}"]`).classList.add("your-class-to-add");
}