Nested loop within JS object

Question

I'm refactoring some code that I have to try and change out page content on an interval. I'm looping an original JSON object to create a sub array of content pertaining to pages by page ID. Currently, by doing a console.log, I have the correct object and structure.

The issue is, I'm trying to loop the page_ids with my set interval function, then within that I need to loop the content array in order to populate the html correctly. I think I have the setInterval loop around pages correct but I'm not sure, and I know I don't have the content looped within it properly.

For the below example, it should display "left 93" in the left dev and "right 93" in the right div on page load, and then after the interval would change to pageID 94 and show "Page 94" in the div.

How can I alter this loop structure within the setInterval?

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

UPDATE:

Steven Spungin · Accepted Answer · 2018-08-08 16:17:14Z

1

I removed the previous solution as the issue was a series of syntax errors. Working code is in the snippet.

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

edited Aug 8, 2018 at 16:17

answered Aug 8, 2018 at 15:29

Steven Spungin

29.5k7 gold badges97 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

16 Comments

Whisou138 Over a year ago

That doesn't seem to quite get it yet, at this fiddle jsfiddle.net/nr37tL9j/21. Assuming too that there may sometimes be 3 or 4 content rows for each page

Whisou138 Over a year ago

I'm trying to dump the content of each in the console, without worrying so much about the HTML and it seems like it's failing at a certain point with the extra counter

Steven Spungin Over a year ago

Notice the names are now currentJSONobjectL and currentJSONobjectR. I'll have a look at your fiddle.

Whisou138 Over a year ago

Ok thank you! I did change out the names but I think after it's h it all 3 elements, it fails on pageID

Steven Spungin Over a year ago

forget that. was on my end.

|

Collectives™ on Stack Overflow

Nested loop within JS object

1 Answer 1

16 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

16 Comments

Your Answer

Sign up or log in

Post as a guest

Related