循环遍历JavaScript对象中的嵌套数组

我在使用文本循环填充对象中嵌套数组的“p”标记时遇到问题。我正在尝试实现根据“title”条件将数组中的文本显示到“p”标记中。例如，如果“title==Home”，则显示主页的文本内容。如果是'title==Projects'，则在三个不同的'p'标记中显示文本。任何帮助都将不胜感激

我有三个带有“p”标记的html页面，ID如下

//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
    }   

//home.html

//关于.html

//projects.html



//具有嵌套数组的对象
myObj={
“页数”：[
{“title”：“Home”，“text”：[“some text”]}，
{“title”：“About”，“text”：[“some text”]}，
{“标题”：“项目”、“文本”：[“部分文本1”、“部分文本2”、“部分文本3”]}
]
}
//通过对象中的数组循环
for（设i=0；i

编辑：让答案不那么糟糕。很抱歉

您可以尝试从循环中填充显示数组，然后将其用于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();

constpagetitle='Home'；
让displayArray=[]；
for（设i=0；i

旧答案

---

您需要创建对对象的引用，例如

document.getElementById（“t1”）.innerHTML=myObj.pages[0]。text[0]

。然而，这并不是一个非常动态的过程，可能并不比手工写出html好。你需要研究的是循环。试着把它作为一个开始。

这对于你当前的设置来说是微不足道的，如果你能对

myObj

做一点小小的更改，那么这就非常微不足道了

---

当前设置：

myObj={
“页数”：[
{“title”：“Home”，“text”：[“some text”]}，
{“title”：“About”，“text”：[“some text”]}，
{“标题”：“项目”、“文本”：[“部分文本1”、“部分文本2”、“部分文本3”]}
]
}
var pageTitle=“Home”；//或“关于”或“项目”
var page=myObj.pages.find（函数（p）{return p.title==pageTitle；}）
console.log（page.text）
document.getElementById（“t1”）.innerHTML=page.text[0]

---

<代码>

<代码> >为什么不考虑像这样改变JSON

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

---

如果更改上述格式，则不需要循环使用JSON。

您只需使用嵌套的

forEach

一次性检查页面标题并设置

innerHTML

这里有一个例子

const pageTitle=“项目”；
常数myObj={
“页数”：[
{“title”：“Home”，“text”：[“some text”]}，
{“title”：“About”，“text”：[“some text”]}，
{“标题”：“项目”、“文本”：[“部分文本1”、“部分文本2”、“部分文本3”]}
]
}
myObj.pages.forEach（项=>{
如果（item.title==页面标题）{
item.text.forEach（（text，idx）=>{
document.getElementById（“t”+（idx+1.toString（））.innerHTML=text
})
}
})

如果您可以更改对象的结构（如@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;
});

---

你不可能有相同的多次id@others我相信那些“重复id”是独立的页面，但他想对这些页面使用单个脚本。@KarelG那么他将无法从不同的页面检索元素

let pageTitle+=myObj.pages[i]；

似乎有问题，因为

myObj.pages[i]

是一个objectChip-如果对象包含所有三个页面的数据，你如何知道你当前在哪个页面上？是的，我需要循环浏览它并动态显示内容。我的for循环正确吗？为什么我在5分钟前没有想到这一点！@Richardson->好像它正在工作。让我再多玩一玩。谢谢你->似乎是like它正在工作。让我做更多的实验。谢谢你。好的。只是别忘了取消注释和注释我在答案注释中显示的行。