我正在尋求幫助，我正在嘗試從我用于學生專案的 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);
})The code above work(only with the api not here :) ) but it's showing only the last data of the json file and I retrieve the same thing when I'm selecting all of the item on homepage...
Just to get an idea of what I'm talking about for the JSON part :
[
{
"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"
}
]To be honest I don't know what to I'm not looking for the solution just an hint.
I looked for URL search parameters on mdn but I don't really understand on what it's could be useful here because I already know that each Id is correctly linked ( Or maybe I'm wrong ?!)
Sorry its little long.
Thanks for reading !
So here I moved the query selector within the loop
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>Edit :
So I've done what you wrote and it's the opposite this time it's the first image that is displayed when you click on each link and the console return me that :
Console Error
我嘗試查看我是否寫錯了，當我洗掉變數時，控制臺中顯示的 imgOfTheActualProduct 下面每個變數顯示的錯誤相同。
如果我可以修改 html 我真的會但我無權這樣做，我所要做的就是僅使用 Javascript Vanilla 構建專案的其余部分。
我想知道是否可以使用 URLsearchparamaters 做我需要的事情，我將對其進行一些研究
uj5u.com熱心網友回復：
JsDemo 函式僅在回圈外呼叫一次查詢選擇器邏輯。然后回圈遍歷陣列并覆寫每次迭代中的所有屬性。因此，在回圈結束時，陣列的最后一個元素將用于填充值。如果您的目標是填充每張卡片，則可以在回圈中移動查詢選擇器邏輯。為此，您必須使用索引，即 i 變數。
Html 沒有標記卡片索引的屬性。如果要保持相同的 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];
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/426140.html
標籤：javascript 数组 json dom 得到