代码之家 › 专栏 › 技术社区 › Geoff_S

嵌套JSON编码数组上的循环

json html jquery javascript

Geoff_S · 技术社区 · 6 年前

我已经重构了代码,以便在控制台中看到我需要的东西:初始“page ID”级别的数组和每个页面ID的嵌套“content”数组。但是我正在尝试如何循环和访问每个页面ID的内容,以便显示与之关联的所有内容元素。

在下面的代码片段/示例中,计数器会像我期望的那样移动到每个对象元素,按pageID循环(使用控制台在fiddle中看到这一点)。

这很好,但重点是在正确的div中显示对象数组的“content”字段中的值。我将某些内容放入div的逻辑是可行的,但由于对象数组嵌套在循环中,我无法确定如何实际访问该数组中的内容值。

所以对于这个片段,当console显示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 -->

1 回复 | 直到 6 年前

theblindprophet 6 年前

在reduce之后创建的对象如下所示:

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

但你想把 innerHTML currentJSONobject.content 这是一个数组。

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

对此:

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

content 内部属性 内容

jsfiddle