Разделить данные, если их больше 2 в javascript

Question

Я получаю приведенные ниже данные

╔════╦══════════════╦
║ id ║ group_concat ║
╠════╬══════════════╬
║  2 ║ a            ║
║  3 ║ a,a          ║
║  4 ║ a,a,a        ║
╚════╩══════════════╩

в моей интерфейсной таблице, я хотел бы отобразить, как показано ниже

╔════╦══════════════╦
║ id ║ group_concat ║
╠════╬══════════════╬
║  2 ║ a            ║
║  3 ║ a            ║
║    ║ a            ║
║  4 ║ a            ║
║    ║ a            ║
║    ║ a            ║
╚════╩══════════════╩

, вот что я попробовал. но не кажется правильным

var fields = data.split(',');
console.log(fields[0]);
return data;

какие-либо предложения? заранее спасибо

Answer 1

Если вам нужна фактическая таблица html, вы можете сделать что-то вроде этого:

// sample data
const data = [
  'a', 'b,b', 'c,c,c'
];

// get the <table> element
const table = document.querySelector('table');

// convert each item in data to an array, e.g.
// data = [ ['a'], ['b', 'b'], ['c','c','c']  ]
const asArrays = data.map(item => item.split(','));

// convenience function for appending the values to the table
const appendRow = (value, index) => {
  const tr = document.createElement('tr');
  tr.innerHTML = `<td>${index}</td><td>${value}</td>`
  table.appendChild(tr);
}

// map over the array of arrays
asArrays.forEach(
  (items, index) => ( // index is of the outer array
    items.forEach( // iterate over the inner array
      // omit the outer index unless it's the first item for that index
      (x, i) => appendRow(x, i === 0 ? index : '')
    )
  )
);
  

<table></table>