更改JSON格式以具有隐藏/显示的正确密钥

Question

我觉得我已经快到了[em> ，但我不确定如何更改它并正确循环JSON

当前，通过下面的代码段，我正在一个接一个地访问JSON的每个元素，但是我想对其进行更改，以使其可以通过JSON的pageID进行访问。您可以在下面的JSON中看到4个元素，但是我想将它们视为两个（按pageID分组），因此我仍将对待每个元素的不同panel_type_id和内容。

下面的代码片段将加载Left 93，然后加载Right 93，然后使用Left new和Right New进行重复。

我想做的是，使它在加载时同时显示Left 93和Right 93（均分配给pageID 93），然后在间隔几秒钟后，同时显示Left New和Right New。可以将其视为倒计时后的幻灯片更改。在这种情况下，有两张幻灯片（pageID 93和pageID 94，每个都有2个内容元素）。我希望我有一个不错的网站或应用程序示例，但我想到的是排行榜风格的应用程序，其中有5张幻灯片分配给显示器，倒计时计时器结束时将转到下一张幻灯片，依此类推。它正在获取数据，并将其全部显示在控制台中，但我只需要重构JSON格式或此处的循环即可。

该如何解决此问题？

let obj = [{
    "pageID": "93",
    "page_type_id": "2",
    "display_id": "2",
    "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": "75",
    "background_img": "images\/bg_rainbow.svg",
    "panel_id": "87",
    "panel_type_id": "2",
    "cont_id": "141",
    "contID": "141",
    "content": "\r\n\r\n\r\n<\/head>\r\n\r\nLeft New<\/p>\r\n<\/body>\r\n<\/html>"
  },
 {
    "pageID": "94",
    "page_type_id": "2",
    "display_id": "2",
    "slide_order": null,
    "duration": "75",
    "background_img": "images\/bg_rainbow.svg",
    "panel_id": "88",
    "panel_type_id": "3",
    "cont_id": "140",
    "contID": "140",
    "content": "\r\n\r\n\r\n<\/head>\r\n\r\nRight New<\/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');



setInterval(() => {
  const currentJSONobject = obj[counter];

  if (currentJSONobject.page_type_id == 1) {

    leftColumn.style.display = "none";
    rightColumn.style.display = "none";
    

    if (currentJSONobject.panel_type_id == 1) {

      fullContent.innerHTML = currentJSONobject.content;
    }

    //If half page    
  } else 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;
    }
  }

  $('#middle').css('background-image', 'url(' + currentJSONobject.background_img + ')');

  counter += 1;
  if (counter === obj.length) {
    counter = 0;
  }

}, 2500)
//console.log(obj);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row middle">
  <!-- Full Page Divs -->
  <div class="col-lg-12" id="fullColumn">
    <div class="fullContent" id="fullContent" style="height: 100%; ">
    </div>
  </div>
  <!-- End Full Page Divs -->

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