Массив Map / Foreach в div, возвращайте сводку каждые 4 - PullRequest
Новая
       8

Массив Map / Foreach в div, возвращайте сводку каждые 4

0 голосов
/ 30 апреля 2019

У меня есть массив со значениями свойств недвижимости (например, имя кондо, описание, адрес и т. Д.), И я пытаюсь создать 4-х квадратную квадратную сетку списков свойств на основе этого массива.Мне нужно иметь возможность перебирать массив и обтекать каждые 4 "элемента сетки", под 4 элементами сетки, я хотел бы иметь один div с полным диапазоном, который содержит информацию из предыдущих 4 итераций.Пример элемента массива ниже: 

[
    "Sheffield Condos",
    "1st and 9th New York",
    "Construction",
    "Empire Communities",
    "New York Architects",
    "TBD",
    "219",
    "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vel metus nec massa pulvinar elementum eu eu sapien.",
    "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vel metus nec massa pulvinar elementum eu eu sapien.",
    "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vel metus nec massa pulvinar elementum eu eu sapien.",
    "/media/communities/image1.jpg",
    "/media/communities/image2.jpg",
    "/media/communities/image3.jpg",
    "/media/communities/image4.jpg"
  ],
[
    "Sheffield Condos 2",
    "1st and 9th New York 2",
    "Construction 2",
    "Empire Communities 2",
    "New York Architects 2",
    "TBD",
    "219",
    "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vel metus nec massa pulvinar elementum eu eu sapien.",
    "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vel metus nec massa pulvinar elementum eu eu sapien.",
    "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vel metus nec massa pulvinar elementum eu eu sapien.",
    "/media/communities/image1.jpg",
    "/media/communities/image2.jpg",
    "/media/communities/image3.jpg",
    "/media/communities/image4.jpg"
  ]

etc etc

Ниже приведено изображение того, чего я пытаюсь достичь.

enter image description here

В код:

Я думал об использовании функции .map (), но, похоже, я не могу получить информацию из предыдущих 4 повторяющихся элементов в «информационное окно», как я его называю.

Надеюсь, я все правильно объяснил, я пытался найти ответ на свой конкретный вопрос, но не смог.Руководство или другой подход приветствуются.

Я попытался использовать цикл foreach для этого, но не смог получить все содержимое в переменную для вставки в элемент DOM.

Попытка с помощью.map (), Инструкции ниже: 

//Set Grouping Size
var groupSize = 4;

// Map Array (Cut out first child)
var communityBuilder = communities.slice(1, -1).map(function(content, index) {

  // map array content to html elements
  var comm = communities[commid];
  var commtitle = content[0];
  var commlocation = content[1];
  var commdesign = content[2];
  var commstatus = content[3];
  var commpartners = content[4];
  var commarch = content[5];
  var commlandarch = content[6];
  var communitcount = content[7];
  var commdesc1 = content[8];
  var commdesc2 = content[9];
  var slideimage = content[10];
  var slideimage2 = content[11];
  var commgallery = content[12];
  var commreg = content[13];


  // Create the property grid item
  return `<div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4 grid-item">
              <div class="tn-holder tnactive" commid="9">
                <div class="tn-holder-inside">
                  <div class="img-holder">
                      <img src="/media/communities/briar-towns-tn.jpg"/>
                  </div>
                  <div class="tn-title-holder">
                    <h3>${commtitle}</h3>
                    <span class="tn-city">
                      <p>${commlocation}</p>
                    </span>
                  </div>
                  </div>
              </div>
              </div>`;

}).reduce(function(r, element, index) {

  // create element groups with size 4, result looks like:
  // [[elem1, elem2, elem3, elem4], [elem4, elem5, elem6, elem7], ...]
  index % groupSize === 0 && r.push([]);
  r[r.length - 1].push(element);
  return r;

}, []).map(function(rowContent, index) {

  // surround every group with a 'row' then print the data from the previous four in bottom div .info-box
  return `
      <div class="pure-g">
        ${rowContent}
      <div class="pure-u-1 pure-u-md-1-1 pure-u-lg-1-1 info-box">
       JS MAPPED VARIABLES ABOVE WOULD BE AVAILABLE HERE FOR THE 4 PROPERTIES ITERATED IN GROUP. THE PURPOSE OF THIS WOULD BE IF ANY OF THE ABOVE GRID ITEMS ARE CLICKED, IT WILL SHOW FURTHER DETAIL OF THE PROPERTY HERE</div>
      </div>
      `;
});

Я думал, что это будет правильный подход, если я совершенно не прав, дайте мне знать.

...