如何组合这些功能而不重复？

Question

As all the 3 product functions has the same product list how can i combine these multiple functions into one so that i can avoid repeating myself here.

How to combine these three functions into one as all the functions has the product list only the currency are different? Could someone please suggest me. Thanks

 function ProductDataRenderer() { } ProductDataRenderer.prototype.render = function () { var nzd = '<table class="table table-striped">' +' <thead>' +' <tr><td colspan="3">Products (NZD)</td></tr>' +' <tr>' +' <td>Name</td>' +' <td>Price</td>' +' <td>Type</td>' +' </tr>' +' </thead>' + ' <tbody>'; var n = ProductDataConsolidator.get(); for (var i = 0; i < n.length; i++) { nzd += '<tr>' + '<td>' + n[i].name +'</td>' + '<td>' + n[i].price + '</td>' + '<td>' + n[i].type + '</td>' + '</tr>'; } nzd += '</tbody></table>'; document.getElementById("nzdProducts").innerHTML = nzd; var usd = '<table class="table table-striped">' + ' <thead>' + ' <tr><td colspan="3">Products (USD)</td></tr>' + ' <tr>' + ' <td>Name</td>' + ' <td>Price</td>' + ' <td>Type</td>' + ' </tr>' + ' </thead>' + ' <tbody>'; var u = ProductDataConsolidator.getInUSDollars(); for (var i = 0; i < u.length; i++) { usd += '<tr>' + '<td>' + u[i].name + '</td>' + '<td>' + u[i].price + '</td>' + '<td>' + u[i].type + '</td>' + '</tr>'; } usd += '</tbody></table>'; document.getElementById("usdProducts").innerHTML = usd; var euro = '<table class="table table-striped">' + ' <thead>' + ' <tr><td colspan="3">Products (Euro)</td></tr>' + ' <tr>' + ' <td>Name</td>' + ' <td>Price</td>' + ' <td>Type</td>' + ' </tr>' + ' </thead>' + ' <tbody>'; var e = ProductDataConsolidator.getInEuros(); for (var i = 0; i < e.length; i++) { euro += '<tr>' + '<td>' + e[i].name + '</td>' + '<td>' + e[i].price + '</td>' + '<td>' + e[i].type + '</td>' + '</tr>'; } euro += '</tbody></table>'; document.getElementById("euProducts").innerHTML = euro; }

Answer 1

Hey this one should do the trick

const renderTable = ({ items, title, containerId }) => {
  let tableTemplate =
    '<table class="table table-striped">' +
    '  <thead>' +
    `      <tr><td colspan="3">${title}</td></tr>` +
    '      <tr>' +
    '          <td>Name</td>' +
    '          <td>Price</td>' +
    '          <td>Type</td>' +
    '      </tr>' +
    '  </thead>' +
    ' <tbody>'

  for (let i = 0; i < items.length; i++) {
    tableTemplate +=
      '<tr>' +
      `<td>${items[i].name}</td>` +
      `<td>${items[i].price}</td>` +
      `<td>${items[i].type}</td>` +
      `</tr>`
  }

  tableTemplate += '</tbody></table>'
  document.getElementById(containerId).innerHTML = tableTemplate
}

renderTable({
  items: ProductDataConsolidator.get(),
  title: 'Products (NZD)',
  containerId: 'nzdProducts'
})
renderTable({
  items: ProductDataConsolidator.getInUSDollars(),
  title: 'Products (USD)',
  containerId: 'usdProducts'
})
renderTable({
  items: ProductDataConsolidator.getInEuros(),
  title: 'Products (Euro)',
  containerId: 'euProducts'
})