Convert multiline div text to table with Jquery - html

Question

I have a comma separated value list with several lines, and want to create a table with four columns using jquery. I have created a jquery function, but I am unable to reproduce the
$(function(){
$('div').prepend('<table><thead><tr><th>Author</th><th>Title</th><th>Year</th><th>Status</th></tr></thead><tbody>');
$('div').html(function(){
var text = $(this).text();
var array = text.split(',');
var array2 = array[0].split('-');
var html = '<tr><td>'+ array2[0] + '</td><td>'+ array2[1] + '</td><td>' + array[1] + '</td><td>' + array[2] + '</td></tr>';
$(this).html(html);
})
$('div').append('</tbody></table>');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
author - book,2010,good
author2 - book2,2011,good
author3 - book3,2011,bad
author4 - book4,2012,average
author5 - book5,2009,bad
author6 - book6,2008,good
</div>
The expected output:
<table><thead><tr><th>Author</th><th>Title</th><th>Year</th><th>Status</th></tr></thead>
<tbody>
<tr><td>author</td><td>book</td><td>2010</td><td>good</td></tr>
<tr><td>author2</td><td>book2</td><td>2011</td><td>good</td></tr>
<tr><td>author3</td><td>book3</td><td>2011</td><td>bad</td></tr>
<tr><td>author4</td><td>book4</td><td>2012</td><td>average</td></tr>
<tr><td>author5</td><td>book5</td><td>2009</td><td>bad</td></tr>
<tr><td>author6</td><td>book6</td><td>2008</td><td>good</td></tr>
</tbody>
</table>
The Jquery code doesn't work as I expect, I am stuck with this.
Thank you!

Answer 1

Break this down into smaller tasks by first getting the data processed and then once you have that figured out build the html from there.
You are missing a key step in splitting the line breaks to get your initial rows strings using text.split('\n').
Once you get those rows then map each row to split the other characters to get a sub array of strings for each row. Since none of this processing requires using elements you can do it in a sandbox until you get to where you can take string input and log a final array to console.
Once you have a data array then build the table rows. Note in your append() process you can't append closing tags as you would in a code editor. When you append html into the dom it creates full elements so include all closing tags in that html string
Working example:
const $div = $('#myDiv')
// include the closing tags in the html string
const $table = $('<table><thead><tr><th>Author</th><th>Title</th><th>Year</th><th>Status</th></tr></thead><tbody></tbody></table>');
let txt = $div.text().trim();// trim to remove whitespace at each end
// split line breaks for rows array
let rows = txt.split('\n').map(s => {
// split the two parts
const [author, content] = s.split(' - ');
// return final sub array
return [author, ...content.split(',')]
});
// inspect your work so far
console.log('rows array',JSON.stringify(rows))
// now that dat works, insert into table
rows.forEach(row =>{
var $row = $('<tr>');
row.forEach(s=> $row.append($('<td>',{text:s})));
$table.find('tbody').append($row)
})
// finally insert the table
$('div').html($table)
td, th{ border: 1px solid #ccc}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myDiv">
author - book,2010,good
author2 - book2,2011,good
author3 - book3,2011,bad
author4 - book4,2012,average
author5 - book5,2009,bad
author6 - book6,2008,good
</div>