Back

Technologies:

javascriptjavascript
avatar
Tolerim
25 days ago

How can an array be partitioned for use in pagination?

My current focus is on improving a project from YouTube that I have completed. Currently, 168 hourRowElement are being appended to the hourlySection. I have created the splitHours function to divide the array into smaller groups that will be used in a pagination system. I want to combine these two operations into one. How can I go about doing this?


function renderWeather({ hourly }) {
  const CHUNK_SIZE = 6;
  const hourChunks = splitHours(hourly, CHUNK_SIZE);
  renderHourlyWeather(hourChunks.flat());
}

const HOUR_FORMATTER = new Intl.DateTimeFormat(undefined, { hour: "numeric" })
const hourlySection = document.querySelector("[data-hour-section]");
const hourRowTemplate = document.getElementById("hour-row-template");

function renderHourlyWeather(hourly) {
  hourlySection.innerHTML = "";
  hourly.forEach(hour => {
    const hourRowElement = hourRowTemplate.content.cloneNode(true);
    setValue("day", DAY_FORMATTER.format(hour.timestamp), { parent: hourRowElement});
    setValue("time",HOUR_FORMATTER.format(hour.timestamp) , { parent: hourRowElement});
    hourRowElement.querySelector("[data-icon]").src = getIconUrl(hour.iconCode);
    setValue("temp", hour.temp, { parent: hourRowElement });
    setValue("precip-percent", hour.chanceOfPrecip, { parent: hourRowElement });
    setValue("fl-temp", hour.feelsLike, { parent: hourRowElement });
    setValue("wind", hour.windSpeed, { parent: hourRowElement});
    setValue("precip-amount", hour.precipAmount, { parent: hourRowElement });
    setValue("humidity", hour.humidity, { parent: hourRowElement });
    setValue("dew-point", hour.dewPoint, { parent: hourRowElement });
    hourlySection.append(hourRowElement);
  });
}

function splitHours(hourArray, chunkSize) {
  const results = [];
  let index = 0;
  while (index < hourArray.length) {
    results.push(hourArray.slice(index, index + chunkSize));
    index += chunkSize;
  }
  return results;
}
Answers(2)
avatar
Vogi
24 days ago
Verified Answer
You can use the concat() method to combine the two operations into one. The concat() method is used to merge two or more arrays. You can use it to merge the smaller groups of the array that you get from the splitHours() function into one array and then append them to the hourlySection. Here is an example of how you can use it: 
function renderWeather({ hourly }) {
  const CHUNK_SIZE = 6;
  const hourChunks = splitHours(hourly, CHUNK_SIZE);
  const mergedHourChunks = [].concat(...hourChunks);
  renderHourlyWeather(mergedHourChunks);
}

function renderHourlyWeather(hourly) {
  hourlySection.innerHTML = "";
  hourly.forEach(hour => {
    const hourRowElement = hourRowTemplate.content.cloneNode(true);
    setValue("day", DAY_FORMATTER.format(hour.timestamp), { parent: hourRowElement});
    setValue("time",HOUR_FORMATTER.format(hour.timestamp) , { parent: hourRowElement});
    hourRowElement.querySelector("[data-icon]").src = getIconUrl(hour.iconCode);
    setValue("temp", hour.temp, { parent: hourRowElement });
    setValue("precip-percent", hour.chanceOfPrecip, { parent: hourRowElement });
    setValue("fl-temp", hour.feelsLike, { parent: hourRowElement });
    setValue("wind", hour.windSpeed, { parent: hourRowElement});
    setValue("precip-amount", hour.precipAmount, { parent: hourRowElement });
    setValue("humidity", hour.humidity, { parent: hourRowElement });
    setValue("dew-point", hour.dewPoint, { parent: hourRowElement });
    hourlySection.append(hourRowElement);
  });
}
I hope this helps! Let me know if you have any other questions.

Sources

Array.join ( ): concatenate array elements to form a string ...How to Efficiently Merge Arrays in JavaScript - Mediumjavascript - Split method and then concatenate - Stack OverflowArray.prototype.join() - JavaScript | MDN - Mozilla DeveloperJavascript: how to combine two adjacent elements of an array
avatar
Tolerim
25 days ago
One way to merge the two operations into one is to first call the splitHours function and store the resulting array in a variable. Then, you can modify the renderHourlyWeather function to render only a portion of the hourly array based on which "page" of the pagination system you are on. Here's an example implementation: 
function renderWeather({ hourly }) {
  const pageSize = 6; // adjust this to change the size of each page
  const paginatedHours = splitHours(hourly, pageSize);
  let currentPage = 0;
  
  function renderCurrentPage() {
    const start = currentPage * pageSize;
    const end = start + pageSize;
    const currentHours = paginatedHours[currentPage];
    renderHourlyWeather(currentHours);
  }
  
  renderCurrentPage();
  
  // add event listeners to handle pagination controls
  const prevPageBtn = document.getElementById("prev-page-btn");
  const nextPageBtn = document.getElementById("next-page-btn");
  
  prevPageBtn.addEventListener("click", () => {
    if (currentPage > 0) {
      currentPage--;
      renderCurrentPage();
    }
  });
  
  nextPageBtn.addEventListener("click", () => {
    if (currentPage < paginatedHours.length - 1) {
      currentPage++;
      renderCurrentPage();
    }
  });
}

function renderHourlyWeather(hourly) {
  // no changes needed
}

function splitHours(hourArray, chunkSize) {
  // no changes needed
}
In this example, the renderWeather function now calls splitHours and stores the resulting array in paginatedHours. The function also sets up an initial page using the renderCurrentPage function, which renders the first chunk of hours by calling renderHourlyWeather with the appropriate slice of the paginatedHours array. The code also adds event listeners to two pagination control buttons (prev-page-btn and next-page-btn), which call renderCurrentPage with the appropriate slice of the paginatedHours array based on which page is selected.
;