我正在嘗試創建一種代碼結構，人們將根據他們選擇的選項列出產品，但我一度陷入困境。
我正在從 json 檔案中提取資料，但我正在嘗試提供如下條件。我想從具有相同 etiket 值的陣列中提取標題、價格和其他資訊并將它們列印到檔案中。
我的 Json 資料：
[
{
"id": 1,
"title": "Zincir Tasar?ml? El ?antas?",
"price": "49.90",
"upPrice": "69.90",
"currency": "₺",
"images": "./images/yeni.jpg",
"etiket": {
"cinsiyet": "kadin",
"yas": "yas16-20",
"konsept": "yilbasi"
}
},
{
"id": 2,
"title": "Tüylü K?sa Kol ?anta",
"price": "74.50",
"upPrice": "99.90",
"currency": "₺",
"images": "./images/yeni1.jpg",
"etiket": {
"cinsiyet": "kadin",
"yas": "yas20-30",
"konsept": "yilbasi"
}
},
{
"id": 3,
"title": "Zincir Detayl? Kemer Tokal? ?anta",
"price": "89.90",
"upPrice": "99.90",
"currency": "₺",
"images": "./images/yeni3.jpg",
"etiket": {
"cinsiyet": "erkek",
"yas": "yas16-20",
"konsept": "yilbasi"
}
},
{
"id": 4,
"title": "Zincirli Uzun Kol Deri ?anta",
"price": "69.90",
"upPrice": "89.90",
"currency": "₺",
"images": "./images/yeni4.jpg",
"etiket": {
"cinsiyet": "erkek",
"yas": "yas20-30",
"konsept": "yilbasi"
}
},
{
"id": 5,
"title": "Zincir Tasar?ml? El ?antas?",
"price": "49.90",
"upPrice": "69.90",
"currency": "₺",
"images": "./images/yeni5.jpg",
"etiket": {
"cinsiyet": "erkek",
"yas": "yas30-40",
"konsept": "yilbasi"
}
},
{
"id": 6,
"title": "Zincirli Deri Desenli ?anta",
"price": "109.90",
"upPrice": "129.90",
"currency": "₺",
"images": "./images/yeni6.jpg",
"etiket": {
"cinsiyet": "erkek",
"yas": "yas45ustu",
"konsept": "yilbasi"
}
},
{
"id": 7,
"title": "K?sa Kollu Deri ?anta",
"price": "199.90",
"upPrice": "269.90",
"currency": "₺",
"images": "./images/yeni7.jpg",
"etiket": {
"cinsiyet": "kadin",
"yas": "yas30-45",
"konsept": "yilbasi"
}
},
{
"id": 8,
"title": "Kahverengi Deri Desenli K?sa Kol ?anta",
"price": "349.90",
"upPrice": "369.90",
"currency": "₺",
"images": "./images/yeni8.jpg",
"etiket": {
"cinsiyet": "kadin",
"yas": "yas45ustu",
"konsept": "yilbasi"
}
}]
我舉個例子。我想用innerHTML將相同“yilbasi”值、“yas16-20”值和“kadin”值的標題繪制到頁面上。
但我不知道如何提取具有相同值的資料。我一直無法創建它的結構。如果可能的話，我想用純 javascript 來做。
uj5u.com熱心網友回復：
解決方案：我在@tromgy的指導下很快找到了解決方案。我會盡量在下面為那些有同樣問題的人提到它。
Js kodlar?m：
const productData = [
{
"id": 1,
"title": "Zincir Tasar?ml? El ?antas?",
"price": "49.90",
"upPrice": "69.90",
"currency": "₺",
"images": "./images/yeni.jpg",
"etiket": {
"cinsiyet": "kadin",
"yas": "yas16-20",
"konsept": "yilbasi"
}
},
{
"id": 2,
"title": "Tüylü K?sa Kol ?anta",
"price": "74.50",
"upPrice": "99.90",
"currency": "₺",
"images": "./images/yeni1.jpg",
"etiket": {
"cinsiyet": "kadin",
"yas": "yas16-20",
"konsept": "yilbasi"
}
},
{
"id": 3,
"title": "Zincir Detayl? Kemer Tokal? ?anta",
"price": "89.90",
"upPrice": "99.90",
"currency": "₺",
"images": "./images/yeni3.jpg",
"etiket": {
"cinsiyet": "erkek",
"yas": "yas16-20",
"konsept": "yilbasi"
}
},
{
"id": 4,
"title": "Zincirli Uzun Kol Deri ?anta",
"price": "69.90",
"upPrice": "89.90",
"currency": "₺",
"images": "./images/yeni4.jpg",
"etiket": {
"cinsiyet": "erkek",
"yas": "yas16-20",
"konsept": "yilbasi"
}
},
{
"id": 5,
"title": "Zincir Tasar?ml? El ?antas?",
"price": "49.90",
"upPrice": "69.90",
"currency": "₺",
"images": "./images/yeni5.jpg",
"etiket": {
"cinsiyet": "erkek",
"yas": "yas45ustu",
"konsept": "yilbasi"
}
},
{
"id": 6,
"title": "Zincirli Deri Desenli ?anta",
"price": "109.90",
"upPrice": "129.90",
"currency": "₺",
"images": "./images/yeni6.jpg",
"etiket": {
"cinsiyet": "erkek",
"yas": "yas45ustu",
"konsept": "yilbasi"
}
},
{
"id": 7,
"title": "K?sa Kollu Deri ?anta",
"price": "199.90",
"upPrice": "269.90",
"currency": "₺",
"images": "./images/yeni7.jpg",
"etiket": {
"cinsiyet": "kadin",
"yas": "yas30-45",
"konsept": "yilbasi"
}
},
{
"id": 8,
"title": "Kahverengi Deri Desenli K?sa Kol ?anta",
"price": "349.90",
"upPrice": "369.90",
"currency": "₺",
"images": "./images/yeni8.jpg",
"etiket": {
"cinsiyet": "kadin",
"yas": "yas45ustu",
"konsept": "yilbasi"
}
}
]
let demo = document.getElementById("demo");
const titles = productData.reduce((acc, prdct) =>
prdct.etiket.cinsiyet =="kadin"
&& prdct.etiket.yas =="yas16-20"
&& prdct.etiket.konsept=="yilbasi" ? acc prdct.title "</br>" : acc, "");
demo.innerHTML = titles;
<div id=demo></div>
結果就是這樣，正如我想要的那樣。
uj5u.com熱心網友回復：
如果我理解您的問題，您將迭代陣列，并為每個物件檢索您關心的值。
因為您說的是“純 javascript”，所以我將使用傳統的回圈而不是像includesandfind和 and 之類的陣列方法forEach，但您可以使用任一方法來實作。
回圈中的幼稚方法是再次回圈，檢查重復項。
for (let i = 0; i > array.length; i ) {
for (let j = 0; j < array.length; j ) {
if (i === j) {
// skip when we are going to compare an element with itself
continue;
}
if (
array[i].etiket.cinsiyet === array[j].etiket.cinsiyet
&& array[i].etiket.yas === array[j].etiket.yas
&& array[i].etiket.konsept === array[j].etiket.konsept
) {
// you have found two array elements that share 'etiket' values, they are the elements at 'i' and 'j'. do whatever you want.
}
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/386158.html
標籤：javascript json 目的
上一篇：如何對新的JS功能提出建議？
下一篇：我可以在物件中放置多個值嗎？