javascript - 访问 json 对象循环的嵌套/内循环
问题描述
我终于重构了我的代码,以便控制台打印正确的数组,但我不知道如何访问嵌套值,以便在 HTML div 中打印“内容”值。
在下面的片段/示例中,计数器像我期望的那样移动到每个对象元素,按 pageID 循环(使用控制台在小提琴中查看)。
这很好用,但重点是在正确的 DIV 中显示对象数组的“内容”字段中的值。我将某些内容放入 div 的逻辑是可行的,但我无法弄清楚如何实际访问对象数组中的内容值,因为它嵌套在循环中。
因此,对于这个片段,当控制台显示 pageID 93 的对象数组时,div 应分别显示“左 93”和“右 93”。当控制台移至 pageID 94 时,其中一个 div 应显示“第 94 页”,依此类推。控制台正确递增,我对 div 的逻辑是正确的,但是任何关于如何访问内部“内容”数组的指导都非常受欢迎
如果你需要小提琴: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 -->
解决方案
我不确定我是否满足您的需求,但据我了解,这就是您想要做的:
const oj = [{
"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's say you want to access pageID 93 and you have that in a variable
let pId = "93";
// first filter your original array down to the entries matching pId
console.log(oj.filter(
i => i.pageID === pId
)
// then map the resulting array to only contain the content
.map(i => i.content))
推荐阅读
- angular - 一起使用禁用的 ngModel 和 ngModelChanged 绑定会引发 ExpressionChangedAfterItHasBeenCheckedError
- angularjs - Yeoman 角度生成器和引导模板
- apache - 即使没有设置用户和密码也无法登录Tomcat 8.5.24 Manager
- javascript - ECMAScript:关于作业和作业队列的一些问题
- asp.net-mvc - ASP.Net MVC 使用 Donut 缓存和 Donut Hole 缓存
- python - 使用 FigureCanvasTkAgg 在 python 中的同一图表上绘制多个图像
- jenkins - 在 Jenkins Pipeline 中,为什么一次需要两个凭据?
- python - 将 python 字符串转换为 sklearn 分类器对象
- angular - Angular CLI 的问题
- python - PyOpenCL 内核参数