Comparing array values in javascript

Question

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

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;

}

original_json has two objects with the same pageID. "pageID": "93". — Danny Fardy Jhonston Bermúdez
– Danny Fardy Jhonston Bermúdez, Commented Aug 14, 2018 at 17:29
Right, so the way I restructured it, I would have an array for that pageID of 93 containing two content elements assigned to that page. — Geoff_S
– Geoff_S, Commented Aug 14, 2018 at 17:32
So I'm trying to say "If the top level array for pages has pageID, get all c ontent elements with that pageID, but I only need the page_type_id of the top page element, and the panel_type_id of each nested/content element, if that makes sense — Geoff_S
– Geoff_S, Commented Aug 14, 2018 at 17:33
The fiddle isn't showing any output. Can you please check? May be CSS is missing. — Ketan Yekale
– Ketan Yekale, Commented Aug 14, 2018 at 17:34

Tyler Dahle · Accepted Answer · 2018-08-14 20:09:59Z

2

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

edited Aug 14, 2018 at 20:09

answered Aug 14, 2018 at 19:34

Tyler Dahle

8991 gold badge13 silver badges40 bronze badges

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

12 Comments

Geoff_S Over a year ago

Shouldn't that use [i] instead of [0] though? That example should be showing left 93 and right 93 simultaneously but only shows Left 93 now

Geoff_S Over a year ago

Basically, if there are multiple elements per pageID, I will want them all shown but I'm just using the logic to decide their DIV, that's all

Geoff_S Over a year ago

So when page 93 is active it should show Left 93 and Right 93, when page 94 is active it should only show Full Page, page 95 should only show Full Page 2 and 96 should only show Full Page 3

Tyler Dahle Over a year ago

Is it now more like what you are after? To only display one set of content at a time, I just cleared out the contents at each interval.

Geoff_S Over a year ago

Almost, but I still can't figure out the page 93 element. It shows left 93 twice instead of left and right. So it needs to iterate the content

|

Collectives™ on Stack Overflow

Comparing array values in javascript

1 Answer 1

12 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

12 Comments

Your Answer

Sign up or log in

Post as a guest

Related