我希望你一切都好！我正在用純 JavaScript 開發一個抽認卡網路應用程式（概念 定義），以學習我目前正在學習的學位的理論元素，準確地說是網路應用程式開發。
我想為 6 個主題創建抽認卡，每個主題包含 5 個單元。由于我仍然無法創建后端系統，我已經看到我可以從一個可用作資料庫的 JSON 檔案（或多個）中提取資料。我為每個單元中的抽認卡創建了一個按鈕，我的想法是每次單擊按鈕文本時都逐個獲取按鈕文本中的物件屬性。例如：
[
{
"subject": "Database",
"concept": "Relational data model",
"definition": "An abstract model used to organize and manage the data..."
},
{
"subject": "Database",
"concept": "Information system",
"definition": "An integrated set of components for collecting, storing..."
}
]
第一次點擊按鈕應該顯示“關系資料模型”，第二次點擊“用于組織和管理資料的抽象模型...”，第三次點擊“資訊系統”，第四次點擊“集成用于收集、存盤……”等的一組組件。
我創建了這個函式，它按我想要的方式作業，但僅適用于陣列，而不適用于物件陣列中的屬性：
var clicks = 0;
var button = document.querySelector("#myButton");
var buttonText = [
"Start",
"Concept 1",
"Definition 1",
"Concept 2",
"Definition 2",
"Concept 3",
"Definition 3",
"And so on...",
];
function showContent() {
clicks = 1;
button.innerHTML = buttonText[clicks];
}
button.addEventListener("click", showContent);
我已經嘗試了幾個回圈和 .forEach 函式，但它只會一次顯示概念和定義，而不是一次顯示一個。我嘗試了不同的方法，但我基本上不知道如何遍歷物件內部的屬性，然后每次單擊時轉到下一個物件屬性。也許我的方法完全錯誤，否則可以這樣做嗎？
一旦我設法解決了這一步，我將對其進行調整/添加必要的代碼以從 JSON 檔案中獲取資訊（我已經嘗試過，但遇到了同樣的問題，它只顯示了第一個概念）。
非常感謝您的時間和幫助！
uj5u.com熱心網友回復：
var clicks = 0;
var button = document.querySelector("#myButton");
var json = `[
{
"subject": "Database",
"concept": "Relational data model",
"definition": "An abstract model used to organize and manage the data..."
},
{
"subject": "Database",
"concept": "Information system",
"definition": "An integrated set of components for collecting, storing..."
}
]`;
var arr = JSON.parse(json);
console.log(arr)
const buttonText = arr.reduce((acc,cur)=>{
for (let key in cur){
console.log(typeof key)
console.log(cur[key])
if(key!="subject"){acc.push(cur[key])}
}
return acc
},[]);
function showContent() {
clicks = 1;
button.innerHTML = buttonText[clicks];
}
button.addEventListener("click", showContent);
uj5u.com熱心網友回復：
您可以將當前點擊次數設定為一個變數，并使用該變數來計算哪些專案是當前專案以及您需要列印哪些屬性。
注意：您可以使用 Object.entries 檢索鍵和值，并可能將兩者都顯示給用戶
const cards = [
{
"subject": "Database",
"concept": "Relational data model",
"definition": "An abstract model used to organize and manage the data..."
},
{
"subject": "Database",
"concept": "Information system",
"definition": "An integrated set of components for collecting, storing..."
}
]
const button = document.getElementById("my-button")
let nbButtonClick = 0
button.addEventListener('click', () => {
const nbItemsPerCard = Object.keys(cards[0]).length
const currentCardIndex = Math.floor(nbButtonClick / nbItemsPerCard)
if (currentCardIndex >= cards.length) console.log("No card to print")
else {
console.log(Object.values(cards[currentCardIndex])[nbButtonClick % nbItemsPerCard])
nbButtonClick
}
})<button id="my-button">Click me</button>在這里我列印了所有卡片資訊，但如果您只想顯示卡片的某些屬性，您可以映射您的專案并僅檢索您要列印的屬性！
例子 ：
顯示代碼片段
const cards = [
{
"subject": "Database",
"concept": "Relational data model",
"definition": "An abstract model used to organize and manage the data..."
},
{
"subject": "Database",
"concept": "Information system",
"definition": "An integrated set of components for collecting, storing..."
}
]
const mappedCatds = cards.map(card => ({concept: card.concept,definition: card.definition }))
const button = document.getElementById("my-button")
let nbButtonClick = 0
button.addEventListener('click', () => {
const nbItemsPerCard = Object.keys(mappedCatds[0]).length
const currentCardIndex = Math.floor(nbButtonClick / nbItemsPerCard)
if (currentCardIndex >= cards.length) console.log("No card to print")
else {
console.log(Object.values(mappedCatds[currentCardIndex])[nbButtonClick % nbItemsPerCard])
nbButtonClick
}
})<button id="my-button">Click me</button>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/520875.html
上一篇：是否可以在類的引數中呼叫變數？