我重构了我的代码,以便我可以在控制台中看到我需要的内容:初始“pageID”级别的数组和每个页面 ID 的嵌套“内容”数组。但我正在尝试弄清楚如何循环访问每个 pageID 的内容,以便我可以显示与其关联的所有内容元素。
在下面的代码片段/示例中,计数器像我预期的那样移动到每个对象元素,按 pageID 循环(使用控制台在 fiddle 中查看)。
这很好用,但这样做的目的是在正确的 DIV 中显示对象数组的“内容”字段中的值。我将某些内容放入 div 的逻辑是可行的,但我不知道如何实际访问对象数组中的内容值,因为它嵌套在循环中。
因此对于此代码段,当控制台显示 pageID 93 的对象数组时,div 应分别显示“Left 93”和“Right 93”。当控制台移至 pageID 94 时,其中一个 div 应显示“Page 94”等。控制台正确递增,我的 div 逻辑是正确的,但是任何关于如何访问内部“内容”数组的指导都非常受欢迎
如果你需要 fiddle :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 -->
最佳答案
在 reduce 之后创建的对象如下所示:
{
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
属性。
关于javascript - 在嵌套的 JSON 编码数组上循环,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51823303/