Looping on nested JSON encoded array

Question

I've refactored my code so that I can see what I need in the console: An array at the initial 'pageID' level and a nested array of 'content' per page ID. But I'm trying to figure out how to loop and access the content of each pageID so that I can display all content elements associated with it.

In the snippet/example below, the counter moves to each object element like I expect, cycling by pageID (use the console to see this in the fiddle).

That works fine but the point of this is to show the value in the 'content' field of the object array in the correct DIVs. My logic to put certain content into the divs works, but I can't figure out how to actually access the content values in the object array now that it's nested in the loop.

So for this snippet, when console shows the object array for pageID 93, the divs should respectively show 'Left 93' and 'Right 93'. When the console moves on to pageID 94, one of the divs should show 'Page 94' and so on. The console increments correctly, and my logic for the divs is correct, but any guidance on how to access the internal 'Content' array is much much apprecaited

If you need fiddle: http://jsfiddle.net/gq0t4j93/4/

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>"
  },
    {
    "pageID": "96",
    "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 96<\/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 -->

the loop seems unrelated here, can you provide a code without it? — apple apple
– apple apple, Commented Aug 13, 2018 at 13:21

theblindprophet · Accepted Answer · 2018-08-13 13:30:13Z

1

The objects you create after the reduce looks like:

{
  pageID: '',
  content: [ { ..., content: '' }, { ..., content: '' } ]
}

but you are trying to set the innerHTML to currentJSONobject.content which is an array.

Change this:

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

to this:

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

therefore you are accessing the content property inside content.

jsfiddle

answered Aug 13, 2018 at 13:30

theblindprophet

7,9577 gold badges44 silver badges60 bronze badges

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

10 Comments

Geoff_S Over a year ago

Thank you, that makes sense. I think I can apply that to my other html elements as well and it looks like it should take care of the issue!

Geoff_S Over a year ago

Wait, sorry: is there not a way to map this so that if I have an unknown number of elements (as opposed to saying content[0] or [1], something like content[i])?

theblindprophet Over a year ago

Sure, just loop content. I figured you only had 2 at most because you called them left and right pages.

Geoff_S Over a year ago

Sorry I should have explained that better. For that example I do, but I'm building other templates that may have more and I'm just trying to make it dynamic as possible

Geoff_S Over a year ago

How would I loop it though, given the way I"m currently building it?

|

Collectives™ on Stack Overflow

Looping on nested JSON encoded array

1 Answer 1

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related