Question

我有问题填充'p'标签，文本循环遍历object中的嵌套数组。我试图实现根据'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
    }

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

对于您当前的设置，这是微不足道的，如果您可以对func moveGuy() { let action = SKAction.move(to: points[i], duration: 2) action.timingMode = .easeInEaseOut guy.run(action) } //UPDATE override func update(_ currentTime: CFTimeInterval) { if(mouseIsDown) { moveGuy() } }进行轻微更改，则会超级微不足道。

当前设置：

＆＃13;

myObj

＆＃13;

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]

＆＃13;

如果您将<p id="t1"></p>更改为以网页标题为关键字的对象文字，则会变得更加容易。

＆＃13;

myObj

＆＃13;

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];

＆＃13;

Answer 3

为什么不考虑像这样更改你的JSON

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

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

Answer 4

您只需检查页面标题，然后使用嵌套的innerHTML一次性设置forEach。

这是一个例子。

＆＃13;

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

＆＃13;

<!--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>

＆＃13;

Answer 5

编辑：让答案变得不那么糟糕。对不起。

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

老答案您需要创建对象document.getElementById("t1").innerHTML = myObj.pages[0].text[0]的引用。然而，这不是非常动态，也可能不仅仅是手工编写html。你需要研究的是循环。试试这个article作为首发。

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

5 个答案: