Jquery: I want to add data to a simple html table column wise

Question

I have 3 JavaScript objects, each of which contain one column data (It has 8 entries). I want to add this data to a html table. I am able to retrieve the column data using nth child but not insert.

code snippet:

countNovels = {
             Ramesh: 5,
             Kumar: 10,
             Sameera: 15,
         }
countTales = {
             Ramesh: 2,
             Kumar: 6,
             Sameera: 8,
}

<table id="Summary" cellspacing="0">
                    <tr>
                        <th >Name</th>
                        <th >No. of Novels</th>
                        <th >No. of Fairytales</th>  
                        <th >Total</th>
               </tr>
                    <tbody></tbody>

                </table>

var col = "<td style=\"max-width : 40px\">" + countNovels.Ramesh + "</td><td style=\"max-width : 40px\">" + countNovels.Kumar + "</td><td style=\"max-width : 40px\">" + countNovels.Sameera + "</td>";
$('#Summary td:nth-child(1)').text(col);

This is not actual code. I want the output something like this

Please do help.

Answer 1

On page load, grab both the objects iterate over them and add rows to the last of the table.

 window.onload = function() { const countNovels = { Ramesh: 5, Kumar: 10, Sameera: 15, }; const countTales = { Ramesh: 2, Kumar: 6, Sameera: 8, }; function renderTable() { const tableRows = Object.entries(countNovels).reduce((acc, curr, index) => { const name = (curr[0] || ''); const novels = curr[1]; const tales = countTales[curr[0]]; const total = novels + tales; acc.push({ name, novels, tales, total }); return acc; }, []); const tableBody = document.querySelector('#Summary'); for (const tableRow of tableRows) { let newRow = tableBody.insertRow(-1); Object.values(tableRow).forEach((curr, index) => { let newCell = newRow.insertCell(index); let newText = document.createTextNode(curr); newCell.appendChild(newText); }); } } renderTable(); };

 table, th, td { border: 1px solid black; }

 <.DOCTYPE html> <html> <head> </head> <body> <table id="Summary"> <tr> <th>Name</th> <th>No. of Novels</th> <th>No. of Fairytales</th> <th>Total</th> </tr> <tbody></tbody> </table> </body> </html>

Answer 2

It was a nice question:)

The snippet I created works with any number of source objects (so any number of columns in the end).

The transformation function is not ideal - it could generate a better return format (so the HTML template generation would be simpler).

 const countNovels = { Ramesh: 5, Kumar: 10, Sameera: 15, } const countTales = { Ramesh: 2, Kumar: 6, Sameera: 8, } // transformation function const transformObject = (arr) => { const r = arr.reduce((acc, c) => { // key - countNovels, countTales // obj - the source object content // k1 - the name of the person // v1 - the value of key-name (eg countTales-Ramesh = 2) const [ [key, obj] ] = Object.entries(c) Object.entries(obj).forEach(([k1, v1]) => { if (typeof acc[k1] === 'undefined') acc[k1] = {} acc[k1][key] = v1 }) return acc }, {}) return r } // running transformation with two objects const transformed = transformObject([{ countNovels }, { countTales } ]) // just a utility function const wrapTd = (item) => { return `<td>${item}</td>` } // creating the HTML template const addToTable = (obj) => { let html = '' for (key in obj) { const total = Object.values(obj[key]).reduce((a, c) => a + c, 0) // creating the columns for the numbers (including total) let values = '' Object.values(obj[key]).forEach(e => { values += wrapTd(e) }) values += wrapTd(total) // adding name and numbers to rows const template = ` <tr> ${wrapTd(key)} ${values} </tr> ` html += template } return html } // adding HTML string to DOM document.getElementById('tablebody').innerHTML = addToTable(transformed)

 <table id="Summary" cellspacing="0"> <tr> <th>Name</th> <th>No. of Novels</th> <th>No. of Fairytales</th> <th>Total</th> </tr> <tbody id="tablebody"></tbody> </table>

Jquery: I want to add data to a simple html table column wise

Question

2 answers

solution1
0 2020-05-15 19:30:13

solution2
0 ACCPTED 2020-05-15 20:27:14

Jquery: I want to add data to a simple html table column wise

Question

2 answers

solution1 0 2020-05-15 19:30:13

solution2 0 ACCPTED 2020-05-15 20:27:14

solution1
0 2020-05-15 19:30:13

solution2
0 ACCPTED 2020-05-15 20:27:14