在JavaScript對象中循環嵌套數組

Question

我遇到了問題，需要通過嵌套在object.I'm數組中的文本循環來填充'p'標記，我試圖實現將數組中的文本顯示爲'p'基於'標題'條件的標籤。例如，如果'title == Home'顯示主頁的文本內容。如果它是'title == Projects'，那麼在三個不同的'p'標籤中顯示文本。任何幫助將不勝感激。

我有三個帶有'p'標籤的html頁面。

//home.html 
<p id="t1"></p> 

//about.html 
<p id="t1"></p> 

//projects.html 
<p id="t1"></p> 
<p id="t2"></p> 
<p id="t3"></p> 

// Object with nested array 
myObj = { 
    "pages": [ 
     { "title":"Home", "text":[ "some text"] }, 
     { "title":"About", "text":[ "some text" ] }, 
     { "title":"Project", "text":[ "some text 1", "some text 2", "some text 3"] } 
    ] 
} 

// looping though array in object 
for (let i = 0; i < myObj.pages.length; i++) { 
     let pageTitle += myObj.pages[i]; 

      for (let j = 0; j < myObj.pages[i]; j++) {     
      let pageText += myObj.pages[i][j].text; 
     } 
} 

// display the content for the specific page title 
    if(pageTitle == "Home"){ 
     document.getElementById("t1").innerHTML = dispaly text here 
    } 
if(pageTitle == "About"){ 
     document.getElementById("t1").innerHTML = dispaly text here 
    } 
if(pageTitle == "Project"){ 
     document.getElementById("t1").innerHTML = dispaly text 1 here 
     document.getElementById("t2").innerHTML = dispaly text 2 here 
     document.getElementById("t3").innerHTML = dispaly text 3 here 
    } 

Answer 1

如果你可以只改變你的對象的結構（由@Richardson的建議），有一個更好的方式來做到這一點。

myObj = { 
    pages: { 
     Home: { 
      text: ["some text"] 
     }, 
     About: { 
      text: ["some text"] 
     }, 
     Project: { 
      text: ["some text 1", "some text 2", "some text 3"] 
     } 
    } 
} 
//var pageTitle = document.title; // uncomment this 
var pageTitle = "Project"; // comment this 
var pageTextArray = myObj.pages[pageTitle].text; 

pageTextArray.forEach(function(v, i){ 
    document.getElementById("t"+(i+1)).innerHTML = v; 
}); 

Answer 2

編輯：讓回答不太可怕。對於那個很抱歉。

您可以嘗試從循環中填充顯示數組，然後將其用於innerHTML調用。

喜歡的東西：

const pageTitle = 'Home'; 
let displayArray = []; 
for (let i = 0; i < myObj.pages.length; i++) { 
     if(myObj.page[i].title === pageTitle) { 

      for (let j = 0; j < myObj.pages[i].text.length; j++) {     
      displayArray.push(myObj.pages[i].text[j]); 
     } 
} 
document.getElementById("t1").innerHTML = displayArray.join(); 

OLD ANSWER 您需要創建一個到你的對象像document.getElementById("t1").innerHTML = myObj.pages[0].text[0]參考。然而，這並不是很有活力，並且可能並不比手工編寫html更好。你需要研究的是循環。作爲首發嘗試這個article。

Answer 3

這對您目前的設置來說是微不足道的，而且如果您可以對myObj進行微小更改，那麼它就會變得微不足道。

---

當前設置：

myObj = { 
 
    "pages": [ 
 
     { "title":"Home", "text":[ "some text"] }, 
 
     { "title":"About", "text":[ "some text" ] }, 
 
     { "title":"Project", "text":[ "some text 1", "some text 2", "some text 3"] } 
 
    ] 
 
} 
 

 
var pageTitle = "Home"; // or "About" or "Project" 
 

 
var page = myObj.pages.find(function(p){ return p.title == pageTitle;}) 
 
console.log(page.text) 
 

 
document.getElementById("t1").innerHTML = page.text[0]

<p id="t1"></p>

如果更改myObj一個對象常量網頁標題的關鍵這就變得更容易。

myObj = { 
 
    "pages": { 
 
     "Home": { "text":[ "some text"] }, 
 
     "About": { "text":[ "some text" ] }, 
 
     "Project":{ "text":[ "some text 1", "some text 2", "some text 3"] } 
 
    } 
 
} 
 

 
var pageTitle = "Home"; // or "About" or "Project" 
 

 
var page = myObj.pages[pageTitle]; 
 
console.log(page.text) 
 

 
document.getElementById("t1").innerHTML = page.text[0];

<p id="t1"></p>

Answer 4

你爲什麼不考慮改變這樣

{ 
    "pages": { 
    "home": { 
     "text": [ 
     "some text" 
     ] 
    }, 
    "aboutus": { 
     "text": [ 
     "some text" 
     ] 
    }, 
    "project": { 
     "text": [ 
     "some text" 
     ] 
    } 
    } 
} 

你的JSON如果更改上面的格式不通過JSON需要循環。

Answer 5

您可以簡單地檢查頁面標題並使用嵌套forEach一次性設置innerHTML。

這裏是一個例子。

const pageTitle = "Project"; 
 

 
const myObj = { 
 
    "pages": [ 
 
    { "title":"Home", "text":[ "some text"] }, 
 
    { "title":"About", "text":[ "some text" ] }, 
 
    { "title":"Project", "text":[ "some text 1", "some text 2", "some text 3"] } 
 
    ] 
 
} 
 

 
myObj.pages.forEach(item => { 
 
    if (item.title === pageTitle) { 
 
    item.text.forEach((text, idx) => { 
 
     document.getElementById("t"+(idx+1).toString()).innerHTML = text 
 
    }) 
 
    } 
 
})

<!--home.html--> 
 
<p id="t1"></p> 
 

 
<!--about.html--> 
 
<p id="t1"></p> 
 

 
<!--projects.html--> 
 
<p id="t1"></p> 
 
<p id="t2"></p> 
 
<p id="t3"></p>