How to modularize code while creating HTML elements in JavaScript?-CodePudding

I am writing a piece of code to basically call in the top money earner and the top five money earners in a given data set. While writing the code, I realized that there were a couple of spots where I was rewriting the code, basically copying and pasting it. While that works, I wanted to throw the duplicate portion of the code and call it from a function. However, that is not working and I don't exactly know why. Here is the code that is duplicated:

for (let i = 0; i < len; i  ) {
    html  =
      '<li >'  
      '<h2>'  
      topSalaries[i][8]  
      '</h2>'  
      '<h3>'  
      topSalaries[i][11]  
      '</h3>';
  }

  container.innerHTML = '<ul id = "topSalaries">'   html   '</ul>';

Here is the function I made to be called. However, when I call it, it's not working as expected, where the information shows up on the webpage. I'm using VS Code and am running this on live server so when I save, the webpage automatically updates.

function createHtmlElements(len, html) {
  for (i = 0; i < len; i  ) {
    html  =
      '<li >'   
      '<h2>'   
      topFiveSalaries[i][8]   
      '</h2>'   
      '<h3>'   
      topFiveSalaries[i][11]  
      '</h3>'  
      '</li>';
  }

  return html
}

function getTopSalaries(boston, container) {
  const people = boston.data;
  const len = 5; // only want top five
  let topFiveSalaries = sortPeople(people).slice(0,len);

  // create the list elements
  html = createHtmlElements(len, html);
  container.innerHTML = '<ul id = topSalaries">'   html   '</ul>';
}

CodePudding user response：

For one thing topFiveSalaries is going to be undefined in the function createHtmlElements you've created, you must pass it to the function

CodePudding user response：

Ok. So, Thanks Dave for the help. It looks like I also was missing a piece in that I needed to pass the array into the function as well. This is what I wrote and how I called it.

function getTopSalaries(boston, container) {
  const people = boston.data;
  const len = 5; // only want top five
  var topFiveSalaries = sortPeople(people).slice(0,len);
  let html = '';

  // create the list elements
  html = createHtmlElements(len, html, topFiveSalaries);
  container.innerHTML = '<ul id = topSalaries">'   html   '</ul>';
}

function getTopEarner(boston, container){
  const people = boston.data;
  const len = 1;
  let highEarner = sortPeople(people).slice(0,len);
  var html = '';

  // create the list elements
  createHtmlElements(len, html, highEarner);
  container.innerHTML = '<ul id = topSalaries">'   html   '</ul>';
}

// sort people by income in descending order
function sortPeople(people) {
    people.sort(function(a, b) {
      return b[11] - a[11];
    })

  return people
}

function createHtmlElements(len, html, array) {
  for (i = 0; i < len; i  ) {
    html  =
      '<li >'   
      '<h2>'   
      array[i][8]   
      '</h2>'   
      '<h3>'   
      array[i][11]  
      '</h3>'  
      '</li>';
  }

  return html
}