javascript - JS对象中的嵌套循环

Question

我正在重构一些我必须尝试定期更改页面内容的代码。我正在循环一个原始的 JSON 对象，以按页面 ID 创建与页面相关的内容子数组。目前，通过执行 console.log，我拥有正确的对象和结构。

问题是，我正在尝试使用我的设置间隔函数循环 page_ids，然后在其中我需要循环内容数组以正确填充 html。我想我的页面周围的 setInterval 循环是正确的，但我不确定，而且我知道我没有正确地在其中循环内容。

对于下面的例子，它应该在页面加载时在左侧dev中显示“left 93”，在右侧div中显示“right 93”，然后在间隔之后将变为pageID 94并在页面中显示“Page 94”分区

如何在 setInterval 中更改此循环结构？

fiddle :https://jsfiddle.net/nr37tL9j/6/

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>"
	}
]; 

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;
        }

    }

    
    

    counter += 1; 
    if (counter === pages_array.length){
        counter = 0; 
    }
    
        console.log(currentJSONobject.content);


}, 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

我删除了之前的解决方案，因为问题是一系列语法错误。工作代码在片段中。

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>"
  }
];

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