尝试通过json文件检索唯一数据

我正在寻求帮助，我正在尝试从我用于学生项目的api中获取json文件的一些数据(我是api方面的初学者(。

我刚开始这个项目，他们让我在主页上获取所有json文件数据，以及与相关的所有信息

这些是我为API 提取的数据

它工作得很好，当用户点击其中一个项目时，它会显示相同的信息，但只显示被点击的项目的信息，这就是我被卡住的地方。

当我点击一个项目时，他们每个人都有一个与显示自己id的链接相关的id：

小代码通过一个循环来获取所有项目id

因此，我为产品页面创建了另一个js文件，在那里我只能用Javascript Vanilla实现它们，这就是我尝试过的：

// API REQUEST
const connection = fetch ('http://localhost:3000/api/products')
/* *********CONNECION*********** */
connection.then((response) => {

if(response.ok){
return response.json();
}
else{
console.log('Connection failed');
}

})
/* ********END DE CONNEXION*********** */

.then((jsonArray) => {
function JsDemo(myData){

// TARGETING ON HTML SELECTORS
const imgOfTheActualProduct = document.querySelector(".item__img > img");
const titleOfTheActualProduct = document.querySelector(".item__content__titlePrice > #title");
const priceOfTheActualProduct = document.querySelector(" .item__content__titlePrice #price");
const colorOfTheActualProduct = document.querySelector("#colors");
const descriptionOfTheActualProduct = document.querySelector('.item__content__description #description');
// Loop to get json elements
for(let i = 0 ; i < myData.length; i++){

imgOfTheActualProduct.src=`${myData[i].imageUrl}`;
titleOfTheActualProduct.innerHTML=`${myData[i].name}`;
priceOfTheActualProduct.innerHTML=`${myData[i].price}`;
descriptionOfTheActualProduct.innerHTML=`${myData[i].description}`
// colorOfTheActualProduct.innerHTML=`${myData[i].colors}`;


}


}
JsDemo(jsonArray);
})

上面的代码可以工作(只使用api，不在这里：(，但它只显示json文件的最后一个数据，当我在主页上选择所有项目时，我会检索到相同的东西。。。

只是想了解一下我所说的JSON部分的内容：

[
{
"colors": ["Blue", "White", "Black"],
"_id": "107fb5b75607497b96722bda5b504926",
"name": "Kanap Sinopé",
"price": 1849,
"imageUrl": "http://localhost:3000/images/kanap01.jpeg",
"description": "Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
"altTxt": "Photo d'un canapé bleu, deux places"
},
{
"colors": ["Black/Yellow", "Black/Red"],
"_id": "415b7cacb65d43b2b5c1ff70f3393ad1",
"name": "Kanap Cyllène",
"price": 4499,
"imageUrl": "http://localhost:3000/images/kanap02.jpeg",
"description": "Morbi nec erat aliquam, sagittis urna non, laoreet justo. Etiam sit amet interdum diam, at accumsan lectus.",
"altTxt": "Photo d'un canapé jaune et noir, quattre places"
},
{
"colors": ["Green", "Red", "Orange"],
"_id": "055743915a544fde83cfdfc904935ee7",
"name": "Kanap Calycé",
"price": 3199,
"imageUrl": "http://localhost:3000/images/kanap03.jpeg",
"description": "Pellentesque fermentum arcu venenatis ex sagittis accumsan. Vivamus lacinia fermentum tortor.Mauris imperdiet tellus ante.",
"altTxt": "Photo d'un canapé d'angle, vert, trois places"
},
{
"colors": ["Pink", "White"],
"_id": "a557292fe5814ea2b15c6ef4bd73ed83",
"name": "Kanap Autonoé",
"price": 1499,
"imageUrl": "http://localhost:3000/images/kanap04.jpeg",
"description": "Donec mattis nisl tortor, nec blandit sapien fermentum at. Proin hendrerit efficitur fringilla. Lorem ipsum dolor sit amet.",
"altTxt": "Photo d'un canapé rose, une à deux place"
},
{
"colors": ["Grey", "Purple", "Blue"],
"_id": "8906dfda133f4c20a9d0e34f18adcf06",
"name": "Kanap Eurydomé",
"price": 2249,
"imageUrl": "http://localhost:3000/images/kanap05.jpeg",
"description": "Ut laoreet vulputate neque in commodo. Suspendisse maximus quis erat in sagittis. Donec hendrerit purus at congue aliquam.",
"altTxt": "Photo d'un canapé gris, trois places"
},
{
"colors": ["Grey", "Navy"],
"_id": "77711f0e466b4ddf953f677d30b0efc9",
"name": "Kanap Hélicé",
"price": 999,
"imageUrl": "http://localhost:3000/images/kanap06.jpeg",
"description": "Curabitur vel augue sit amet arcu aliquet interdum. Integer vel quam mi. Morbi nec vehicula mi, sit amet vestibulum.",
"altTxt": "Photo d'un canapé gris, deux places"
},
{
"colors": ["Red", "Silver"],
"_id": "034707184e8e4eefb46400b5a3774b5f",
"name": "Kanap Thyoné",
"price": 1999,
"imageUrl": "http://localhost:3000/images/kanap07.jpeg",
"description": "EMauris imperdiet tellus ante, sit amet pretium turpis molestie eu. Vestibulum et egestas eros. Vestibulum non lacus orci.",
"altTxt": "Photo d'un canapé rouge, deux places"
},
{
"colors": ["Pink", "Brown", "Yellow", "White"],
"_id": "a6ec5b49bd164d7fbe10f37b6363f9fb",
"name": "Kanap orthosie",
"price": 3999,
"imageUrl": "http://localhost:3000/images/kanap08.jpeg",
"description": "Mauris molestie laoreet finibus. Aenean scelerisque convallis lacus at dapibus. Morbi imperdiet enim metus rhoncus.",
"altTxt": "Photo d'un canapé rose, trois places"
}
]

老实说，我不知道该怎么办。我不是在寻找解决方案，只是一个暗示。

我在mdn上查找了URL搜索参数，但我真的不明白它在这里有什么用处，因为我已经知道每个Id都被正确链接了(或者我错了？！(

抱歉有点长。

感谢阅读！

所以在这里，我在循环中移动了查询选择器

for(let i = 0; i < myData.length; i++){

const imgOfTheActualProduct = document.querySelector(".item__img > img");
const titleOfTheActualProduct = document.querySelector(".item__content__titlePrice > #title");
const priceOfTheActualProduct = document.querySelector(" .item__content__titlePrice #price");
// const colorOfTheActualProduct = document.querySelector("#colors");
const descriptionOfTheActualProduct = document.querySelector('.item__content__description #description');
imgOfTheActualProduct.src=`${myData[i].imageUrl}`;
titleOfTheActualProduct.innerHTML=`${myData[i].name}`;
priceOfTheActualProduct.innerHTML=`${myData[i].price}`;
descriptionOfTheActualProduct.innerHTML=`${myData[i].description}`
// colorOfTheActualProduct.innerHTML=`${myData[i].colors}`;
}

<div class="item__img">
<img src="../images/logo.png" alt="Photographie d'un canapé"> 
</div>
<div class="item__content">
<div class="item__content__titlePrice">
<h1 id="title"><!-- Nom du produit --></h1>
<p>Prix : <span id="price"><!-- 42 --></span>€</p>
</div>
<div class="item__content__description">
<p class="item__content__description__title">Description :</p>
<p id="description"><!-- Dis enim malesuada risus sapien gravida nulla nisl arcu. --></p>
</div>

编辑：

所以我已经完成了你写的内容，这次正好相反，这是当你点击每个链接时显示的第一个图像，控制台会返回给我：

控制台错误

我试着看看我是否写错了，当我删除控制台中显示的变量时，imgOfTheActualProduct下面的每个变量都显示了相同的错误。

如果我可以修改html，我真的会，但我没有权利这样做，我所要做的就是只使用Javascript Vanilla构建项目的其余部分。

我想知道我是否可以用URLsearchparamaters做我需要的事情，我会对它做一些研究