Создание функции генератора динамического тега привязки с использованием цикла и массива

Question

Я пытаюсь написать функцию, которая читает в 16 объектах (которые содержит х количество ссылок) и генерирует теги привязки, которые динамически включают эти ссылки.Эти объекты называются linksPage0, linksPage1, linksPage2 и т. Д.

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

На данный момент я жестко закодировал один объект, чтобы получить некоторый прогресс, и до сих пор это работает ОК:

 var linksPage0 = [
    {"name":"img1", "src":"https://via.placeholder.com/300x300/fdf/000?text=page1"},
    {"name":"img2", "src":"https://via.placeholder.com/300x300/fdf/000?text=page2"},
    {"name":"img3", "src":"https://via.placeholder.com/300x300/fdf/000?text=page3"},
    {"name":"img4", "src":"https://via.placeholder.com/300x300/fdf/000?text=page4"},
    {"name":"img5", "src":"https://via.placeholder.com/300x300/fdf/000?text=page5"},
    {"name":"img8", "src":"https://via.placeholder.com/300x300/fdf/000?text=page8"},
    {"name":"img9", "src":"https://via.placeholder.com/300x300/fdf/000?text=page9"},
    {"name":"img10", "src":"https://via.placeholder.com/300x300/fdf/000?text=page10"},
  ];

  var linksPage1 = [
    {"name":"img1", "src":"https://via.placeholder.com/300x300/fdf/000?text=page1"},
    {"name":"img2", "src":"https://via.placeholder.com/300x300/fdf/000?text=page2"},
    {"name":"img3", "src":"https://via.placeholder.com/300x300/fdf/000?text=page3"},
    {"name":"img4", "src":"https://via.placeholder.com/300x300/fdf/000?text=page4"},
    {"name":"img5", "src":"https://via.placeholder.com/300x300/fdf/000?text=page5"},
    {"name":"img6", "src":"https://via.placeholder.com/300x300/fdf/000?text=page6"},
    {"name":"img7", "src":"https://via.placeholder.com/300x300/fdf/000?text=page7"},
    {"name":"img8", "src":"https://via.placeholder.com/300x300/fdf/000?text=page8"},
    {"name":"img9", "src":"https://via.placeholder.com/300x300/fdf/000?text=page9"},
    {"name":"img10", "src":"https://via.placeholder.com/300x300/fdf/000?text=page10"},
  ];

  var linksPage2 = [
    {"name":"img1", "src":"https://via.placeholder.com/300x300/fdf/000?text=page1"},
    {"name":"img2", "src":"https://via.placeholder.com/300x300/fdf/000?text=page2"},
    {"name":"img3", "src":"https://via.placeholder.com/300x300/fdf/000?text=page3"},
    {"name":"img4", "src":"https://via.placeholder.com/300x300/fdf/000?text=page4"},
    {"name":"img5", "src":"https://via.placeholder.com/300x300/fdf/000?text=page5"},
    {"name":"img6", "src":"https://via.placeholder.com/300x300/fdf/000?text=page6"},
    {"name":"img7", "src":"https://via.placeholder.com/300x300/fdf/000?text=page7"},
    {"name":"img8", "src":"https://via.placeholder.com/300x300/fdf/000?text=page8"},
  ];

var productsCount = [linksPage0.length, linksPage1.length, linksPage2.length];

     var imageContainer = document.getElementsByClassName("card");

      for(var i = 0; i < imageContainer.length; i++){
      imageContainer[i].id  = "pageContainer"+i;
      }

      function generateProductAnchors(){
        var pageContainers = document.getElementById("pageContainer"+i);
        var anchor = document.createElement("a");
        anchor.setAttribute('id', 'product'+i);
        pageContainers[i].appendChild(anchor);
        console.log(cont);
      }

    for(i = 0; i < linksPage0.length; i++){
      generateProductAnchors(i);
    }

Моя проблемаТеперь сделаем оператор цикла динамическим, чтобы он мог читать все объекты ссылок (linksPage0.length, linksPage1.length, linksPage2.length), которые будут подсчитывать количество элементов в объекте, генерировать правильное количество якорей и добавлять их вimageContainers.

Будет ли это сделано с многомерным массивом?

Любая помощь будет признательна.

Answer 1

Вы правы, вам нужен двумерный массив.Чтобы сделать это, вы можете просто добавить свои массивы ссылок во внешний массив.Затем выполните цикл по внешнему массиву (один раз для группы ссылок) и во время каждого внешнего цикла запускайте внутренний цикл, который обрабатывает каждую ссылку для этой группы.

var linksPage0 = [
  {"name":"img1", "src":"https://via.placeholder.com/300x300/fdf/000?text=page1"},
  {"name":"img2", "src":"https://via.placeholder.com/300x300/fdf/000?text=page2"}
];

var linksPage1 = [
  {"name":"img3", "src":"https://via.placeholder.com/300x300/fdf/000?text=page3"},
  {"name":"img4", "src":"https://via.placeholder.com/300x300/fdf/000?text=page4"}
];

var linksPage2 = [
  {"name":"img5", "src":"https://via.placeholder.com/300x300/fdf/000?text=page5"},
  {"name":"img6", "src":"https://via.placeholder.com/300x300/fdf/000?text=page6"}
];

// Collects all links into a 2-dimensional array (and selects cards)
var linksGroups = [linksPage0, linksPage1, linksPage2];
var imageContainers = document.getElementsByClassName("card");

// Loops through outer array
for(let i = 0; i < linksGroups.length; i++){
  let links = linksGroups[i];
  // Assumes there are enough cards to hold all the linksGroups
  //  (Alternatively, you could create the card divs as you go to avoid assuming)
  let container = imageContainers[i];
  container.setAttribute("id","card" + i)

  // Loops through each inner array
  for(j = 0; j < links.length; j++){
    var anchor = document.createElement("a");
    anchor.innerHTML = links[j].name;
    anchor.setAttribute("href", links[j].src);
    container.appendChild(anchor);
    // (Adds line break for demo purposes)
    container.appendChild(document.createElement("br"));
  }
}

.card{ width: 80px; margin: 10px; padding: 5px; border: 1px solid gray}

<div class="card"></div>
<div class="card"></div>
<div class="card"></div>

Answer 2

Поскольку у вас есть n объекты, все содержащие в основном одну и ту же информацию, вы можете динамически создавать все необходимые вам элементы, просто указав количество ссылок на каждой странице.Это означает, что вы можете удалить все эти шаблоны, и вам не нужно указывать количество контейнеров заранее, потому что они тоже создаются на основе длины массива linksPerPage.

const linksPerPage = [10, 10, 8];

// A separate function that creates and returns a
// new container element.
function createContainer(index) {
  const container = document.createElement('div');
  container.classList.add('container');
  container.dataset.id = index;
  return container;
}

// We pass in the number of links on the page,
// create an anchor element for each, and push it in
// to an array of anchors for tha page.
// Finally we return the anchors array
function createAnchors(links) {
  const anchors = [];
  for (let link = 1; link <= links; link++) {
    const anchor = document.createElement('a');
    anchor.href = `https://via.placeholder.com/300x300/fdf/000?text=page${link}`;
    anchor.textContent = link;
    anchors.push(anchor);
  }
  return anchors;
}

// Pass in the array containing the number of links per page
// Iterate over the array with `map` and for each container,
// create the anchors and then append them all to the container
// Finally return the container
// You will be left with an array of containers that you can then
// append to the document body (or another element of your choosing)
function generateLinksContainers(linksPerPage) {
  return linksPerPage.map((pages, index) => {
    const container = createContainer(index);
    const anchors = createAnchors(pages);
    anchors.forEach(anchor => container.appendChild(anchor));
    return container;
  });
}

// Iterate over the generated containers and add each to the document
// body
generateLinksContainers(linksPerPage).forEach(container => {
  document.body.appendChild(container);
});

.container { padding: 0.2em }
a { padding: 0.2em; }