Доступ к вложенному / внутреннему циклу объектного цикла json

Я, наконец, реорганизовал свой код, чтобы консоль печатала правильные массивы, но я не могу понять, как получить доступ к вложенным значениям, чтобы значение «содержимого» печаталось в блоках HTML.

В приведенном ниже фрагменте / примере счетчик перемещается к каждому элементу объекта, как я ожидал, циклически по идентификатору страницы (используйте консоль, чтобы увидеть это в скрипте).

Это работает нормально, но суть этого в том, чтобы показать значение в поле «content» массива объектов в правильных DIV. Моя логика для помещения определенного содержимого в блоки div работает, но я не могу понять, как на самом деле получить доступ к значениям содержимого в массиве объектов теперь, когда он вложен в цикл.

Итак, для этого фрагмента, когда консоль показывает массив объектов для pageID 93, в div должны отображаться соответственно «Left 93» и «Right 93». Когда консоль переходит на pageID 94, в одном из блоков div должно отображаться «Page 94» и так далее. Консоль увеличивается правильно, и моя логика для div верна, но любое руководство о том, как получить доступ к внутреннему массиву Content, очень важно.

Если вам нужна рабочий пример: 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 -->

Каждый раз, когда вы добавляете что-то в DOM, это не может быть только закрывающий тег. Добавление такой вещи в DOM потенциально может сделать ее недействительной, поэтому вы всегда можете добавлять только полные (открывающие + закрывающие) теги.

connexo 10.08.2018 15:58

Что ты конкретно имеешь ввиду? Весь мой HTML имеет открывающие и закрывающие теги

Whisou138 10.08.2018 16:00

Верно, но в вашем JSON есть "content": "\r\n\r\n\r\n<\/head>\r\n\r\nRight 93<\/p>\r\n<\/body>\r\n<\/html>", содержащий только закрывающие теги, и вы, похоже, пытаетесь добавить это в свой DOM

ADyson 10.08.2018 16:06

О, я вижу, что вы, мужчины. У меня должны быть открывающиеся html-теги, они есть в моей базе данных. но это ничтожное содержание

Whisou138 10.08.2018 16:15

Но я все еще мог показать это в домике раньше, не меняя этого вообще. Единственный рефакторинг, который я сделал, - это создать объектный массив содержимого в массиве pageID, и я пытаюсь понять, как я могу использовать этот вложенный массив.

Whisou138 10.08.2018 16:20

@connexo Спасибо, что вы указали на это. Я пробовал использовать отдельную скрипку, чтобы печатать контент один за другим, и это сработало, но я буду иметь это в виду. Прямо сейчас просто пытаюсь выяснить, как получить доступ к массиву 'content' по активному 'pageID'

Whisou138 10.08.2018 17:01
0
6
62
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я не уверен, что понимаю ваши потребности, но, насколько я понимаю, вот что вы хотите сделать:

const oj = [{
    "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's say you want to access pageID 93 and you have that in a variable
let pId = "93";
// first filter your original array down to the entries matching pId
console.log(oj.filter(
    i => i.pageID === pId
  )
  // then map the resulting array to only contain the content
  .map(i => i.content))

Думаю, я понимаю, но как это применимо к моему текущему коду? Сохранение цикла, чтобы счетчик перемещался от каждого идентификатора страницы к другому, а затем получал этот контент?

Whisou138 10.08.2018 17:36

Я все же вижу, где это работает, но можно ли это применить к тому, что я уже делаю?

Whisou138 10.08.2018 17:51

Другие вопросы по теме