Inserting table data under a particular table header from an Object

Asbin Bhadra 0
Viewed 38

Given a Javscript Object:

var obj = {
  "results": [{
      "B": "Row 1 Col 2"
    }, {
      "A": "Row 1 Col 1"
      "B": "Row 2 Col 2"
    }, {
      "C": "Row 1 Coll 3"
    }
  }]

I wish to convert it to a table that looks like the following.

  <table border="1">
      <thead>
        <tr>
          <th id="A">A</th>
          <th id="B">B</th>
          <th id="C">C</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Row 1 Col 1</td>
          <td>Row 1 Col 2</td>
          <td>Row 1 Col 3</td>
        </tr>
        <tr>
          <td></td>
          <td>Row 2 Col 2</td>
          <td></td>
        </tr>
      </tbody>
    </table>

Which looks like:

Demo Table Data

More precisely, I'm looking for a way to somehow insert the value of a property directly below it.

javascript:

var cols = obj.results.reduce(function(arr, currObj) {
    return arr.concat(Object.keys(currObj).filter(function(key) {
        return arr.indexOf(key) == -1
    }));
}, []).sort();
// create header from sorted column keys
var header = '<tr><th>' + cols.join('</th><th>') + '</th></tr>';

var rows = obj.results.map(function(item) {
    // loop over column keys checking matches to item keys
    return '<tr>' +
        cols.map(function(key) {
            return '<td>' + (item.hasOwnProperty(key) ? item[key] : '') + '</td>';
        }).join('') + '</tr>';
}).join('');
var table = '<table  border="1">' + header + rows + '</table>';
html-table jquery reactjs json javascript
1 Answers

Might not be the most elegant way but works

var cols = obj.results.reduce(function(arr, currObj) {
    return arr.concat(Object.keys(currObj).filter(function(key) {
        return arr.indexOf(key) == -1
    }));
}, []).sort();
// create header from sorted column keys
var header = '\n<thead>\n\t<tr>\n\t\t<th>' + cols.join('</th>\n\t\t<th>') + '</th>\n\t</tr>\n</thead>';
var j = {}
obj.results.map(function(item) {
    // loop over column keys checking matches to item keys
    cols.map(function(key) {
        if(j[key] == undefined)
        {
            j[key] = []
        }
        if (item.hasOwnProperty(key))
        {
            j[key].push(item[key]);
        }
    })
});

var rows = []
var index = 0
for(let k in j)
{
    rows.push([])
    for(let e in j[k])
    {
        rows[index].push(j[k][e])
    }
    index += 1
}

function transposeArray(array, arrayLength){
    var newArray = [];
    for(var i = 0; i < array.length; i++){
        newArray.push([]);
    };

    for(var i = 0; i < array.length; i++){
        for(var j = 0; j < arrayLength; j++){
            newArray[j].push(array[i][j]);
        };
    };

    return newArray;
}
rows = transposeArray(rows, 3)

var rowsStr = "";
for(let k in rows)
{
    rowsStr += '\n\t<tr>';
    for(let e in rows[k])
    {
        if(rows[k][e] != undefined)
        {
            rowsStr += '\n\t\t<td>' + rows[k][e]+ '\t\t</td>'
        }
        else
        {
            rowsStr += "\n\t\t<td></td>"
        }
    }
    rowsStr += '\n\t</tr>';
}

var table = '<table  border="1">' + header + "\n<tbody>" + rowsStr + "\n</tbody>" + '\n</table>';
Hezi Shahmoon0
Related