JavaScript的循環沒有完全遍歷對象

我目前正在試驗動態加載數據從一個JS對象到HTML容器通過迭代For循環。JavaScript的循環沒有完全遍歷對象

我碰到的牆似乎是因爲For循環不會遍歷整個對象，即使我設置了For循環的高門檻基於計算的內部對象的數量JS對象。

工作解決方案將所有對象加載到它們各自的html容器中。在這一點上，我並不關心在成就屬性對象中顯示對象。

這個實驗是爲了更好的理解純Javascript，所以不需要Jquery或框架建議。

數據對象：

var data = { projects: [{ 
    title: "GET BORN", 
    tags: ["Live Events", "Stage Design", "Event Promotion", "Music"], 
    date_started: "21/09/12", 
    date_finished: "Finish Date", 
    description: "Music events that explores the underground sound", 
    achievements: [{milestone:"Launched Brand", date:"datetime", details:"blah"}, {milestone:"Hosted First Night", date:"datetime", details:"moreblah"}, {milestone:"Sold Out Lakota +1000 People", date:"datetime", details:"moreblah"}], 
    position: 1 
}, { 
    title: "FAIRSTREAM", 
    tags: ["Web Application", "Trademark", "Music streaming"], 
    date_started: "10/05/16", 
    date_finished: "Finish date", 
    description: "Equal opportunity music streaming application", 
    achievements: [{milestone:"Launched Brand", date:"datetime", details:"blah"}], 
    position: 2 
}]}

視圖產生功能：

const buildProjectView = (dataSet) => { 
    const currentProjectIndex = 0 
    let dataLen = Object.keys(dataSet.projects[currentProjectIndex]).length 
    // console.log(dataLen) 

    let objKey = Object.keys(dataSet.projects[currentProjectIndex]) 
    let objValue = Object.values(dataSet.projects[currentProjectIndex]) 
    // console.log(objValue) 

    for (let i = 0; i < dataLen; i++) { 
    // console.log("count: " + i) 
    console.log(objKey[i] + ": " + objValue[i]) 

    let theTitle = document.getElementById(objKey[i]) 
    let content = document.createTextNode(objValue[i]) 
    theTitle.appendChild(content) 
    } 
} 

window.onload = buildProjectView(data)

HTML樣板：

<html> 
<head> 
  <title>Mysite Playground</title> 
</head> 
<body> 
    <div class="container"> 
    <section class="head"> 
     <h1 id="title"/> 
     <h2 id="description"/> 
     <h3 id="date_started"/> 
    </section> 
    <section class="body"> 
     <p id="position">#</p> 
     <p id="achievements"/> 
     <p id="tags"/> 
    </section> 
    </div> 
</body> 
</html>

我的編碼測試平臺，例如和一些基本樣式： https://codepen.io/wntwrk/pen/bqXYMO

感謝您的幫助提前。

來源

2017-04-11 wntwrk

'常量currentProjectIndex = 0 讓DATALEN = Object.keys（dataSet.projects [currentProjectIndex]）length' - 這僅處理與'標題對象：「GET出生了」，'在它和總是返回7。 –

這應該給你一個起點給你一些工作。你有一個數組和數組對象的數組。

請注意，只需在現有標記/樣板文件中將「推送」到DOM的內容不會對您有所幫助，那麼您需要將其克隆以允許更多實例 - 這就是我所做的。

使用提供了這樣的數據：

/*jshint esversion: 6 */ 
var data = { 
    projects: [{ 
    title: "GET BORN", 
    tags: ["Live Events", "Stage Design", "Event Promotion", "Music"], 
    date_started: "21/09/12", 
    date_finished: "Finish Date", 
    description: "Music events that explores the underground sound", 
    achievements: [{ 
     milestone: "Launched Brand", 
     date: "datetime", 
     details: "blah" 
    }, { 
     milestone: "Hosted First Night", 
     date: "datetime", 
     details: "moreblah" 
    }, { 
     milestone: "Sold Out Lakota +1000 People", 
     date: "datetime", 
     details: "moreblah" 
    }], 
    position: 1 
    }, { 
    title: "FAIRSTREAM", 
    tags: ["Web Application", "Trademark", "Music streaming"], 
    date_started: "10/05/16", 
    date_finished: "Finish date", 
    description: "Equal opportunity music streaming application", 
    achievements: [{ 
     milestone: "Launched Brand", 
     date: "datetime", 
     details: "blah" 
    }], 
    position: 2 
    }] 
};

我增加了一些功能，希望使其更容易理解。

// convert the "boilerplate" to a class based avoiding duplicate id's 
function idToClass(node) { 
    var child, nodes = node.childNodes; 
    for (var i = 0, len = nodes.length; i < len; i++) { 
    child = nodes[i]; 
    if (typeof child.id === 'string' && child.id !== "") { 
     child.className = child.id; 
     child.removeAttribute("id");; 
    } 
    if (child.childNodes && child.childNodes.length) { 
     idToClass(child); 
    } 
    } 
} 

let addItem = (project, aclone, name) => { 
    let el = aclone.getElementsByClassName(name); 
    if (el.length && typeof project[name] !== "object") { 
    el[0].textContent = project[name]; 
    } 
    if (el.length && typeof project[name] === "object") { 
    /// do something with objects like the "achievements" 
    } 
}; 

let addProject = (project, aclone) => { 
    var k = Object.keys(project); 
    k.forEach(function(item) { 
    addItem(project, aclone, item); 
    }); 
    return aclone; 
}; 

const buildProjectView = (dataSet) => { 
    let y = document.getElementsByClassName('container'); 
    //clone and change ids to classes 
    let aclone = y[0].cloneNode(true); 
    idToClass(aclone); 
    for (let i = 0; i < dataSet.projects.length; i++) { 
    let n = addProject(dataSet.projects[i], aclone.cloneNode(true)); 
    y[0].parentNode.appendChild(n, aclone); 
    } 
    // COULD remove the boilerplate here: 
    // y[0].removeNode(); 
}; 

window.onload = buildProjectView(data);

來源

2017-04-11 21:48:11

JavaScript的循環沒有完全遍歷對象

回答

相關問題