尝试通过 json 文件检索唯一数据
Trying to retrieve unique data through a json file
我正在寻求帮助我正在尝试从我用于学生项目的 api 中获取 json 文件的一些数据（我在 API东西）。
我正处于项目的开始阶段，他们要求我获取主页上的所有 json 文件数据以及与 :
相关的所有信息
Those are the data that I extract for the API
它工作正常，当用户点击其中一项时，它会显示相同的信息，但只显示被点击的信息，这就是我卡住的地方。
当我点击一个项目时，他们每个人都有一个与 link 相关的 ID，显示他们自己的 ID :
The small code use through a loop to get all items 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 都是正确的 linked（或者也许我错了吗？！）
抱歉有点长。
感谢阅读！
所以我在循环中移动了查询选择器
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>
编辑：
所以我已经完成了您所写的操作，这次恰恰相反，它是您单击每个 link 和控制台 return 时显示的第一张图片，我认为：
Console Error
我试着看看我是否写错了，当我删除控制台中显示的变量时，imgOfTheActualProduct 下面的每个变量都显示相同的错误。
如果我可以修改 html 我真的会，但我无权这样做，我所要做的就是只用 Javascript Vanilla 构建项目的其余部分。
我想知道我是否可以用 URLsearchparamaters 做我需要的事情，我会做一些研究
JsDemo 函数的查询选择器逻辑仅在循环外调用一次。然后循环遍历数组并在每次迭代中覆盖所有属性。因此，在循环结束时，数组的最后一个元素将用于填充值。
如果您的目标是填充每张卡片，则可以在循环内移动查询选择器逻辑。为此，您必须使用索引，即 i 变量。
Html 没有标记要保持不变的 card.If 的索引的属性 html，您可以使用 document.querySelectorAll()我喜欢下面的索引。
const imgOfTheActualProduct = document.querySelectorAll(".item__img > img")[i];
const titleOfTheActualProduct = document.querySelectorAll(".item__content__titlePrice > #title")[i];
const priceOfTheActualProduct = document.querySelectorAll(" .item__content__titlePrice #price")[i];
// const colorOfTheActualProduct = document.querySelectorAll("#colors")[i];
const descriptionOfTheActualProduct = document.querySelectorAll('.item__content__description #description')[i];
我正在寻求帮助我正在尝试从我用于学生项目的 api 中获取 json 文件的一些数据（我在 API东西）。
我正处于项目的开始阶段，他们要求我获取主页上的所有 json 文件数据以及与 :
相关的所有信息Those are the data that I extract for the API
它工作正常，当用户点击其中一项时，它会显示相同的信息，但只显示被点击的信息，这就是我卡住的地方。
当我点击一个项目时，他们每个人都有一个与 link 相关的 ID，显示他们自己的 ID :
The small code use through a loop to get all items 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 都是正确的 linked（或者也许我错了吗？！）
抱歉有点长。
感谢阅读！
所以我在循环中移动了查询选择器
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>
编辑：
所以我已经完成了您所写的操作，这次恰恰相反，它是您单击每个 link 和控制台 return 时显示的第一张图片，我认为：
Console Error
我试着看看我是否写错了，当我删除控制台中显示的变量时，imgOfTheActualProduct 下面的每个变量都显示相同的错误。
如果我可以修改 html 我真的会，但我无权这样做，我所要做的就是只用 Javascript Vanilla 构建项目的其余部分。
我想知道我是否可以用 URLsearchparamaters 做我需要的事情，我会做一些研究
JsDemo 函数的查询选择器逻辑仅在循环外调用一次。然后循环遍历数组并在每次迭代中覆盖所有属性。因此，在循环结束时，数组的最后一个元素将用于填充值。 如果您的目标是填充每张卡片，则可以在循环内移动查询选择器逻辑。为此，您必须使用索引，即 i 变量。
Html 没有标记要保持不变的 card.If 的索引的属性 html，您可以使用 document.querySelectorAll()我喜欢下面的索引。
const imgOfTheActualProduct = document.querySelectorAll(".item__img > img")[i];
const titleOfTheActualProduct = document.querySelectorAll(".item__content__titlePrice > #title")[i];
const priceOfTheActualProduct = document.querySelectorAll(" .item__content__titlePrice #price")[i];
// const colorOfTheActualProduct = document.querySelectorAll("#colors")[i];
const descriptionOfTheActualProduct = document.querySelectorAll('.item__content__description #description')[i];