alast alast - 13 days ago 5
HTML Question

How can I add a header to my JSON output table?

I'm trying to add a header to this JSON output table, but I have no clue how to do that. This code gives me a table populated with the data returned from the database and puts it in a table format as structured by the tags. The problem is that I need a header for the table and I don't know how to get that part coded. Any ideas?

function renderSearchResults( results, domNode ) {
var i;
var out = "<table>";

if (results.length === 0) {
domNode.innerHTML = 'No results matching your search.';
return;
}
// loop to print the JSON in a table format
results.forEach(function (result) {
console.info(result);
out += "<tr><td>" +
result.ContractId +
"</td><td>" +
result.ContractTitle +
"</td><td>" +
result.Terminal +
"</td><td>" +
result.Cabinet +
"</td><td>" +
result.Section +
"</td><td>" +
result.Folder +
"</td><td>" +
result.Sheet +
"</td><td>" +
result.Consult +
"</td><td>" +
result.Location +
"</td><td>" +
result.Active +
"</td><td>" +
result.Theme +
"</td><td>" +
result.Construction +
"</td><td>" +
result.Subtheme +
"</td><td>" +
result.AsBuilt +
"</td><td>" +
result.Year +
"</td><td>" +
"<a href= " + result.Path + " target=_blank>" + "Binder" + "</a>"
} );

out += "</table>";
domNode.innerHTML = out;
}

Answer

During your initial declaration of out you can put in <th> or tableheader tags, i.e:

    function renderSearchResults( results, domNode ) {
       var i;
       var out = "<table><th>ContractId</th><th>ContractTitle</th><th>Terminal</th><th>Cabinet </th><th>Section </th><th>Folder </th><th>Sheet </th><th>Consult </th><th>Location </th><th>Active </th><th>Theme </th><th>Construction </th><th>Subtheme </th><th>AsBuilt </th><th>Year </th>";

       if (results.length === 0) {
          domNode.innerHTML = 'No results matching your search.';
          return;
       }

       results.forEach(function (result) {
        console.info(result);
        out += "<tr><td>" +
        result.ContractId !== null ? result.ContractId : 'Not Applicable' +
        "</td><td>" +
        result.ContractTitle !== null ? result.ContractTitle : 'Not Applicable' +
        "</td><td>" +
        result.Terminal !== null ? result.Terminal : 'Not Applicable' +
        "</td><td>" +
        result.Cabinet !== null ? result.Cabinet : 'Not Applicable' +
        "</td><td>" +
        result.Section !== null ? result.Section: 'Not Applicable' +
        "</td><td>" +
        result.Folder !== null ? result.Folder : 'Not Applicable' +
        "</td><td>" +
        result.Sheet !== null ? result.Sheet : 'Not Applicable' +
        "</td><td>" +
        result.Consult !== null ? result.Consult : 'Not Applicable' +
        "</td><td>" +
        result.Location !== null ? result.Location : 'Not Applicable' +
        "</td><td>" +
        result.Active !== null ? result.Active : 'Not Applicable' +
        "</td><td>" +
        result.Theme !== null ? result.Theme : 'Not Applicable' +
        "</td><td>" +
        result.Construction !== null ? result.Construction : 'Not Applicable' +
        "</td><td>" +
        result.Subtheme !== null ? result.Subtheme : 'Not Applicable' +
        "</td><td>" +
        result.AsBuilt !== null ? result.AsBuilt: 'Not Applicable' +
        "</td><td>" +
        result.Year !== null ? result.Year : 'Not Applicable'+
        "</td><td>" +
        "<a href= " + result.Path + " target=_blank>" + "Binder" + "</a>"
    } );

        out += "</table>";
        console.log(out);
       domNode.innerHTML = out;
   }
Comments