我重构了代码，以便可以在控制台中看到所需的内容：初始“ pageID”级别的数组和每个页面ID的“内容”的嵌套数组。但是我试图弄清楚如何循环访问每个pageID的内容，以便显示与之关联的所有内容元素。
在下面的代码片段/示例中，计数器按我的预期移动到每个对象元素，并按pageID循环（使用控制台在小提琴中查看）。
效果很好，但是这样做的目的是在正确的DIV中显示对象数组的“ content”字段中的值。我将某些内容放入div的逻辑是可行的，但是由于嵌套在循环中，所以我不知道如何实际访问对象数组中的内容值。
因此，对于此代码段，当控制台显示pageID 93的对象数组时，div分别显示“左93”和“右93”。当控制台移至pageID 94时，div之一应显示'Page 94'，依此类推。控制台正确地增加，并且我的div逻辑是正确的，但是关于如何访问内部“ Content”数组的任何指导都非常重要
如果您需要提琴：http : //jsfiddle.net/gq0t4j93/4/
const original_json = [{
"pageID": "93",
"page_type_id": "2",
"display_id": "2",
"slide_order": null,
"duration": "74",
"background_img": "images\/bg_rainbow.svg",
"panel_id": "86",
"panel_type_id": "2",
"cont_id": "138",
"contID": "138",
"content": "\r\n\r\n\r\n<\/head>\r\n\r\nLeft 93<\/p>\r\n<\/body>\r\n<\/html>"
},
{
"pageID": "93",
"page_type_id": "2",
"display_id": "2",
"slide_order": null,
"duration": "74",
"background_img": "images\/bg_rainbow.svg",
"panel_id": "87",
"panel_type_id": "3",
"cont_id": "139",
"contID": "139",
"content": "\r\n\r\n\r\n<\/head>\r\n\r\nRight 93<\/p>\r\n<\/body>\r\n<\/html>"
},
{
"pageID": "94",
"page_type_id": "2",
"display_id": "2",
"slide_order": null,
"duration": "74",
"background_img": "images\/bg_rainbow.svg",
"panel_id": "87",
"panel_type_id": "3",
"cont_id": "139",
"contID": "139",
"content": "\r\n\r\n\r\n<\/head>\r\n\r\nPage 94<\/p>\r\n<\/body>\r\n<\/html>"
},
{
"pageID": "95",
"page_type_id": "2",
"display_id": "2",
"slide_order": null,
"duration": "74",
"background_img": "images\/bg_rainbow.svg",
"panel_id": "87",
"panel_type_id": "3",
"cont_id": "139",
"contID": "139",
"content": "\r\n\r\n\r\n<\/head>\r\n\r\nPage 95<\/p>\r\n<\/body>\r\n<\/html>"
},
{
"pageID": "96",
"page_type_id": "2",
"display_id": "2",
"slide_order": null,
"duration": "74",
"background_img": "images\/bg_rainbow.svg",
"panel_id": "87",
"panel_type_id": "3",
"cont_id": "139",
"contID": "139",
"content": "\r\n\r\n\r\n<\/head>\r\n\r\nPage 96<\/p>\r\n<\/body>\r\n<\/html>"
},
];
let counter = 0;
var fullContent = document.getElementById('fullContent');
var leftContent = document.getElementById('leftContent');
var rightContent = document.getElementById('rightContent');
var fullColumn = document.getElementById('fullColumn');
var leftColumn = document.getElementById('leftColumn');
var rightColumn = document.getElementById('rightColumn');
// loop through original json
// for each item, get page ID and see if we've already created a new Page object for it
// if we have, add the object from the original json to the "content" array of the new page object
// otherwise, create a new Page object to put in our new array
const pages_array = original_json.reduce(function(pages_array, item, index, original_json) {
const current_pageID = item.pageID;
const exisiting_page = pages_array.find(page => page.pageID === current_pageID);
if (exisiting_page === undefined) {
const new_Page = {
pageID: current_pageID,
content: [item]
}
pages_array.push(new_Page);
} else {
exisiting_page.content.push(item)
}
return pages_array;
}, []);
// Open console to see data
console.clear();
//console.log(pages_array); //this prints correct array
setInterval(() => { //here I loop through pages, but i need to loop within here over content to render html
const currentJSONobject = pages_array[counter];
if (currentJSONobject.page_type_id == 2) {
fullColumn.style.display = "none";
if (currentJSONobject.panel_type_id == 2) {
leftContent.innerHTML = currentJSONobject.content;
} else if (currentJSONobject.panel_type_id == 3) {
rightContent.innerHTML = currentJSONobject.content;
}
}
console.log(pages_array[counter])
counter += 1;
if (counter === pages_array.length) {
counter = 0;
}
}, 1500)<div class="row middle" id="middle" style="background-image: url();">
<!-- Half Page Divs -->
<div class="col-lg-6 leftColumn">
<div class="leftContent" id="leftContent" style=" height: 100%; ">
</div>
</div>
<div class="col-lg-6 rightColumn">
<div class="rightContent" id="rightContent" style=" height: 100%; ">
</div>
</div>
<!-- End Half Page Divs -->
</div>
<!-- End Row Middle -->化简后创建的对象如下所示：
{
pageID: '',
content: [ { ..., content: '' }, { ..., content: '' } ]
}
但您要设置innerHTML到currentJSONobject.content这是一个数组。
更改此：
if (currentJSONobject.page_type_id == 2) {
fullColumn.style.display = "none";
if (currentJSONobject.panel_type_id == 2) {
leftContent.innerHTML = currentJSONobject.content;
} else if (currentJSONobject.panel_type_id == 3) {
rightContent.innerHTML = currentJSONobject.content;
}
}
对此：
const currentJSONobject = pages_array[counter];
if (currentJSONobject.content.length >= 1) {
leftContent.innerHTML = currentJSONobject.content[0].content;
}
if (currentJSONobject.content.length >= 2) {
rightContent.innerHTML = currentJSONobject.content[1].content;
} else {
rightContent.innerHTML = '';
}
因此，您正在访问content内部的属性content。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句