Comparing array values in javascript

Question

I'm having a couple of (hopefully small) issues with this fiddle

http://jsfiddle.net/gq0t4j93/22/

The functionality is working but my logic has gotten messed up along the way.

I'm nesting arrays of 'content' within a main array for the 'pageID'. The issue is that for HTML rendering, i need to first look at the page_type_id of the first 'page' element and then look at the panel_type_id of the content element.

My first problem is that my forloop at line 107 seems to only access odd number pageIDs but if I remove it it will access all of them.

But the other real issue is that At line 109, I want to change

if (currentJSONobject.content.length >= 1) {
  leftContent.innerHTML = currentJSONobject.content[i].content;
}
if (currentJSONobject.content.length >= 2) {
  rightContent.innerHTML = currentJSONobject.content[i].content;
} else {
  rightContent.innerHTML = '';
}

To instead use page_type_id and panel_type_id instead of length, so:

if (currentJSONobject.page_type_id == 2) {
  fullColumn.style.display = "none";
  if (currentJSONobject.content.panel_type_id == 2) {
    leftContent.innerHTML = currentJSONobject.content[i].content;
  }
  if (currentJSONobject.content.panel_type_id == 3) {
    rightContent.innerHTML = currentJSONobject.content[i].content;
  }
}

It seems simple but I can't figure out how to actually change it that way.

Again, it's cycling correctly and showing the content but I need to be able to evolve the logic for several page and panel types, hopefully someone can see where I'm going wrong here

UPDATE:

Switching from ternary in accepted answer to if/else

for(var i = 0; i < currentJSONobject.content.length; i++){

    fullContent.innerHTML = '';
    rightContent.innerHTML = '';
    leftContent.innerHTML = '';
    topLeftContent = '';
    topRightContent = '';
    bottomLeftContent = '';
    bottomRightContent = '';

    if(currentJSONobject.content[i].page_type_id == 1){

        leftColumn.style.display = "none";
        rightColumn.style.display = "none";
        leftColumnQtr.style.display = "none";
        rightColumnQtrHalf.style.display = "none";
        rightColumnQtr.style.display = "none";
        leftColumnQtrHalf.style.display = "none";

        if(currentJSONobject.content[i].panel_type_id == 1){
            fullContent.innerHTML = currentJSONobject.content[i].content;
        }

    }else if(currentJSONobject.content[i].page_type_id == 2){

        fullColumn.style.display = "none";
        leftColumnQtr.style.display = "none";
        rightColumnQtrHalf.style.display = "none";
        rightColumnQtr.style.display = "none";
        leftColumnQtrHalf.style.display = "none";

        if(currentJSONobject.content[i].panel_type_id == 2){
            leftContent.innerHTML = currentJSONobject.content[i].content;
        } if(currentJSONobject.content[i].panel_type_id == 3){
            rightContent.innerHTML = currentJSONobject.content[i].content;
        }
    }


//   fullContent.innerHTML = '';
//   rightContent.innerHTML = '';
//   leftContent.innerHTML = '';

// fullContent.innerHTML = currentJSONobject.content[i].panel_type_id == 1 ? currentJSONobject.content[i].content : fullContent.innerHTML;

// leftContent.innerHTML = currentJSONobject.content[i].panel_type_id == 2 ? currentJSONobject.content[i].content : leftContent.innerHTML;

// rightContent.innerHTML = currentJSONobject.content[i].panel_type_id == 3 ? currentJSONobject.content[i].content : rightContent.innerHTML;

}

Answer 1

You can do something like this. You actually will want if's (which the ternary does) if you have a select amount of page types that you want to handle differently when encountered. I am unsure of how you want to display the information, like if you want to display the duplicate 93s (the for loop goes through each, but just doing the equals operator overwrites it so it only shows one at a time). Or if you want to show any right, left, or full content at the same time. If you want to show right, left, and full at the same time, you would want to replace the '' on the 'else' part of the ternary with full/left/rightContent.innerHTML to preserve their values. Or replace with normal If statements.

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": "1",
    "display_id": "2",
    "slide_order": null,
    "duration": "74",
    "background_img": "images\/bg_rainbow.svg",
    "panel_id": "87",
    "panel_type_id": "1",
    "cont_id": "139",
    "contID": "139",
    "content": "\r\n\r\n\r\n<\/head>\r\n\r\nFull Page<\/p>\r\n<\/body>\r\n<\/html>"
  },
  {
    "pageID": "95",
    "page_type_id": "1",
    "display_id": "2",
    "slide_order": null,
    "duration": "74",
    "background_img": "images\/bg_rainbow.svg",
    "panel_id": "87",
    "panel_type_id": "1",
    "cont_id": "139",
    "contID": "139",
    "content": "\r\n\r\n\r\n<\/head>\r\n\r\nFull Page 2<\/p>\r\n<\/body>\r\n<\/html>"
  },
    {
    "pageID": "96",
    "page_type_id": "1",
    "display_id": "2",
    "slide_order": null,
    "duration": "74",
    "background_img": "images\/bg_rainbow.svg",
    "panel_id": "87",
    "panel_type_id": "1",
    "cont_id": "139",
    "contID": "139",
    "content": "\r\n\r\n\r\n<\/head>\r\n\r\nFull Page 3<\/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
  fullContent.innerHTML = '';
  rightContent.innerHTML = '';
  leftContent.innerHTML = '';
  const currentJSONobject = pages_array[counter];
  for(var i = 0; i < currentJSONobject.content.length; i++){
  	fullContent.innerHTML = currentJSONobject.content[i].panel_type_id == 1 ? currentJSONobject.content[i].content : fullContent.innerHTML;
    
    leftContent.innerHTML = currentJSONobject.content[i].panel_type_id == 2 ? currentJSONobject.content[i].content : leftContent.innerHTML;
    
    rightContent.innerHTML = currentJSONobject.content[i].panel_type_id == 3 ? currentJSONobject.content[i].content : rightContent.innerHTML;
  }

  //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();">
  
  <div class="col-lg-6 fullColumn">

    <div class="fullContent" id="fullContent" style=" height: 100%; ">

    </div>
  </div>

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