访问json对象循环的嵌套/内部循环

Question

I've finally refactored my code so that the console prints the correct arrays, but I can't figure out how to access the nested values so that the 'content' value prints in the HTML divs.

In the snippet/example below, the counter moves to each object element like I expect, cycling by pageID (use the console to see this in the fiddle).

That works fine but the point of this is to show the value in the 'content' field of the object array in the correct DIVs. My logic to put certain content into the divs works, but I can't figure out how to actually access the content values in the object array now that it's nested in the loop.

So for this snippet, when console shows the object array for pageID 93, the divs should respectively show 'Left 93' and 'Right 93'. When the console moves on to pageID 94, one of the divs should show 'Page 94' and so on. The console increments correctly, and my logic for the divs is correct, but any guidance on how to access the internal 'Content' array is much much apprecaited

If you need 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 --> 

Answer 1

I'm not sure if I get your needs, but as I understand it here's what you want to do:

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