ejemplo fos

Ejemplo de Funciones de orden superior

by Juan Manuel Cruz

CSS

table,
thead,
tbody,
tr {
  width: 100%;
}

tr {
  display: flex;
  width: 100%;
  justify-items: space-around;
}

td,
th {
  padding: 1rem;
  flex-grow: 1;
  text-align: center;
}

JavaScript

(function() {
  let usuarios = [{
    id: 5,
    nombre: 'Usuario 5',
    correo: '[email protected]'
  }, {
    id: 2,
    nombre: 'Usuario 2',
    correo: '[email protected]'
  }, {
    id: 11,
    nombre: 'Usuario 11',
    correo: '[email protected]'
  }, {
    id: 3,
    nombre: 'Usuario 3',
    correo: '[email protected]'
  }, {
    id: 13,
    nombre: 'Usuario 13',
    correo: '[email protected]'
  }, {
    id: 7,
    nombre: 'Usuario 7',
    correo: '[email protected]'
  }, ]

  const cabeceras = ['ID', 'Nombre', 'E-Mail']

  const popularTabla = (tabla, renglones) => {
    renglones.reduce((node, child) => {
      node.insertAdjacentElement('beforeend', child)
      return node
    }, tabla)
  }

  const objtToTD = (objeto, indice) => {
    const td = document.createElement('td')
    td.innerHTML = objeto[indice] || ''
    return td
  }

  const objToTR = (objeto, orden = ['id', 'nombre', 'correo']) => {
    const tr = document.createElement('tr')
    orden.reduce((carr, indiceOrden) => {
      carr.appendChild(objtToTD(objeto, indiceOrden))
      return carr
    }, tr)
    return tr
  }

  const pruneElement = node => {
    if (!node.firstChild) return node
    node.innerHTML = ''
    if (node.firstChild)
      node.removeChild(node.firstChild)
    pruneElement(node)
  }


  const renderTabla = (datos = usuarios) => {
    const body = document.getElementsByTagName('body')[0]
    pruneElement(body)
    const table = document.createElement('table')
    const thead = document.createElement('thead')
    const tbody = document.createElement('tbody')
    const tr_head = document.createElement('tr')
    const th_head = cabeceras.map(x => {
      let y = document.createElement('th')
      y.innerHTML = x
      return y
    })

    th_head.reduce((carr, elem) => {
      carr.appendChild(elem)
      return carr
    }, tr_head)
    thead.appendChild(tr_head)

    datos.reduce((carr, elem) => {
      let tr = objToTR(elem)
     ...