Convert array to table in javascript?

Question

Currently, I'm working on converting an array with structure like this:

[
    { begin_row: 0, end_row: 1, begin_col: 0, end_col: 0, text: 'No' },
    { begin_row: 0, end_row: 1, begin_col: 1, end_col: 1, text: 'Name' },
    { begin_row: 0, end_row: 0, begin_col: 2, end_col: 3, text: 'Phone' },
    { begin_row: 1, end_row: 1, begin_col: 2, end_col: 2, text: 'Work' },
    { begin_row: 1, end_row: 1, begin_col: 3, end_col: 3, text: 'Home' },
    
    { begin_row: 2, end_row: 3, begin_col: 0, end_col: 0, text: '1' },
    { begin_row: 2, end_row: 3, begin_col: 1, end_col: 1, text: 'Name 1' },
    { begin_row: 2, end_row: 2, begin_col: 2, end_col: 2, text: 'Work 1' },
    { begin_row: 3, end_row: 3, begin_col: 2, end_col: 2, text: 'Work 2' },
    { begin_row: 2, end_row: 3, begin_col: 3, end_col: 3, text: 'Home 1' },
    
    { begin_row: 4, end_row: 5, begin_col: 0, end_col: 0, text: '2' },
    { begin_row: 4, end_row: 5, begin_col: 1, end_col: 1, text: 'Name 2' },
    { begin_row: 4, end_row: 5, begin_col: 2, end_col: 2, text: 'Work 3' },
    { begin_row: 4, end_row: 4, begin_col: 3, end_col: 3, text: 'Home 2' },
    { begin_row: 5, end_row: 5, begin_col: 3, end_col: 3, text: 'Home 3' },
    
    { begin_row: 6, end_row: 6, begin_col: 0, end_col: 0, text: '3' },
    { begin_row: 6, end_row: 6, begin_col: 1, end_col: 1, text: 'Name 3' },
    { begin_row: 6, end_row: 6, begin_col: 2, end_col: 1, text: 'Work 4' },
]

into a HTML table using javascript, like this

Normally, it's an easy task if there is no colspan and rowspan, but I'm having trouble because of those two.

Please help me, thanks!

Answer 1

you can do something like this

const toHtml = data => {
  const tableRows = data.reduce((res, item) => {

    const html = `<td rowspan="${item.end_row - item.begin_row + 1}" colspan="${item.end_col - item.begin_col + 1}">${item.text}</td>`

    if (item.begin_row !== res.row) {
      return {
        row: item.begin_row,
        current: [html],
        result: [...res.result, `<tr>${res.current.join('')}</tr>`]
      }
    }
    return {
      ...res,
      current: [...res.current, html]
    }
  }, {
    row: -1,
    current: [],
    result: []
  })

  return [...tableRows.result, `<tr>${tableRows.current.join('')}</tr>`].join('')

}


const data = [{
    begin_row: 0,
    end_row: 1,
    begin_col: 0,
    end_col: 0,
    text: 'No'
  },
  {
    begin_row: 0,
    end_row: 1,
    begin_col: 1,
    end_col: 1,
    text: 'Name'
  },
  {
    begin_row: 0,
    end_row: 0,
    begin_col: 2,
    end_col: 3,
    text: 'Phone'
  },
  {
    begin_row: 1,
    end_row: 1,
    begin_col: 2,
    end_col: 2,
    text: 'Work'
  },
  {
    begin_row: 1,
    end_row: 1,
    begin_col: 3,
    end_col: 3,
    text: 'Home'
  },

  {
    begin_row: 2,
    end_row: 3,
    begin_col: 0,
    end_col: 0,
    text: '1'
  },
  {
    begin_row: 2,
    end_row: 3,
    begin_col: 1,
    end_col: 1,
    text: 'Name 1'
  },
  {
    begin_row: 2,
    end_row: 2,
    begin_col: 2,
    end_col: 2,
    text: 'Work 1'
  },
  {
    begin_row: 3,
    end_row: 3,
    begin_col: 2,
    end_col: 2,
    text: 'Work 2'
  },
  {
    begin_row: 2,
    end_row: 3,
    begin_col: 3,
    end_col: 3,
    text: 'Home 1'
  },

  {
    begin_row: 4,
    end_row: 5,
    begin_col: 0,
    end_col: 0,
    text: '2'
  },
  {
    begin_row: 4,
    end_row: 5,
    begin_col: 1,
    end_col: 1,
    text: 'Name 2'
  },
  {
    begin_row: 4,
    end_row: 5,
    begin_col: 2,
    end_col: 2,
    text: 'Work 3'
  },
  {
    begin_row: 4,
    end_row: 4,
    begin_col: 3,
    end_col: 3,
    text: 'Home 2'
  },
  {
    begin_row: 5,
    end_row: 5,
    begin_col: 3,
    end_col: 3,
    text: 'Home 3'
  },

  {
    begin_row: 6,
    end_row: 6,
    begin_col: 0,
    end_col: 0,
    text: '3'
  },
  {
    begin_row: 6,
    end_row: 6,
    begin_col: 1,
    end_col: 1,
    text: 'Name 3'
  },
  {
    begin_row: 6,
    end_row: 6,
    begin_col: 2,
    end_col: 1,
    text: 'Work 4'
  },
]




document.getElementById('table').innerHTML = toHtml(data)

#table td {
  border: 1px solid black;
}

td {}

<table id="table">

</table>