JSON data to HTML table with JQUERY

Question

Someone knows how i can send all the values of the "User" object in my JS file ("User 1" for example) to the header of my HTML Table?

I will only put one column structured by JSON data, but I need that the code push all my JSON data to the html file like the next structure:

<div class="table-responsive">          
  <table class="table">
    <thead>
      <tr>
        <th>Name</th>
        <th>Role</th>
        <th>Age</th>
        <th>skillsTable2</th>
        <th>biopicURL</th>
    </thead>
  
    <tbody>
      <tr>
        <td>Usuario 1</td>
        <td>Web Developer</td>
        <td>28</td>
        <td>SEO</td>
        <td>../images/fry.jpg</td>
      </tr>
    </tbody>

  </table>
  </div>

Here is my JS code:

// JSON Metadata Structure //

    var skillsTable = ["SEO","Front end Developemetnt","Story Telling"];
    var metadataContext = {"Context" : { "itemscope":"itemscope",  "itemtype":"http://schema.org/VisualArtwork" } };

    var dataX = {
        "User 1":[{
            "Name" : "Usuario 1",
            "Role" : "Web Developer",
            "Contacts" : {
                        "Mobile" : "999 99 9999 9999",
                        "E-mail" : "[email protected]",
                        "GitHub" : "https://github.com/exampleuser",
                        "Facebook" : "https://www.facebook.com/profile.php?id=999999999999999",
                        "Location" : "Some Place"
            },
            "Welcome Message" : "Pnly Don't Stop",
            "Age" : 29,
            "skillsTable" : skillsTable,
            "skillsTable2" : ["SEO","Front end Developemetnt","Story Telling"],
            "bioPicURL" : "../images/fry.jpg"   
        }],

        "User 2":[{
            "Name" : "Usuario 2",
            "Role" : "Web Developer",
            "Contacts" : {
                        "Mobile" : "999 99 9999 9999",
                        "E-mail" : "[email protected]",
                        "GitHub" : "https://github.com/exampleuser",
                        "Facebook" : "https://www.facebook.com/profile.php?id=999999999999999",
                        "Location" : "Some Place"
            },
            "Welcome Message" : "Pnly Don't Stop",
            "Age" : 29,
            "skillsTable" : skillsTable,
            "skillsTable2" : ["SEO","Front end Developemetnt","Story Telling"],
            "bioPicURL" : "../images/fry.jpg"   
        }],

        "User 3":[{
            "Name" : "Usuario 3",
            "Role" : "Web Developer",
            "Contacts" : {
                        "Mobile" : "999 99 9999 9999",
                        "E-mail" : "[email protected]",
                        "GitHub" : "https://github.com/exampleuser",
                        "Facebook" : "https://www.facebook.com/profile.php?id=999999999999999",
                        "Location" : "Some Place"
            },
            "Welcome Message" : "Pnly Don't Stop",
            "Age" : 29,
            "skillsTable" : skillsTable,
            "skillsTable2" : ["SEO","Front end Developemetnt","Story Telling"],
            "bioPicURL" : "../images/fry.jpg"   
        }],

        "User 4":[{
            "Name" : "Usuario 4",
            "Role" : "Web Developer",
            "Contacts" : {
                        "Mobile" : "999 99 9999 9999",
                        "E-mail" : "[email protected]",
                        "GitHub" : "https://github.com/exampleuser",
                        "Facebook" : "https://www.facebook.com/profile.php?id=999999999999999",
                        "Location" : "Some Place"
            },
            "Welcome Message" : "Pnly Don't Stop",
            "Age" : 29,
            "skillsTable" : skillsTable,
            "skillsTable2" : ["SEO","Front end Developemetnt","Story Telling"],
            "bioPicURL" : "../images/fry.jpg"   
        }],

        "User 5":[{
            "Name" : "Usuario 5",
            "Role" : "Web Developer",
            "Contacts" : {
                        "Mobile" : "999 99 9999 9999",
                        "E-mail" : "[email protected]",
                        "GitHub" : "https://github.com/exampleuser",
                        "Facebook" : "https://www.facebook.com/profile.php?id=999999999999999",
                        "Location" : "Some Place"
            },
            "Welcome Message" : "Pnly Don't Stop",
            "Age" : 29,
            "skillsTable" : skillsTable,
            "skillsTable2" : ["SEO","Front end Developemetnt","Story Telling"],
            "bioPicURL" : "../images/fry.jpg"   
        }],

        "User 6":[{
            "Name" : "Usuario 6",
            "Role" : "Web Developer",
            "Contacts" : {
                        "Mobile" : "999 99 9999 9999",
                        "E-mail" : "[email protected]",
                        "GitHub" : "https://github.com/exampleuser",
                        "Facebook" : "https://www.facebook.com/profile.php?id=999999999999999",
                        "Location" : "Some Place"
            },
            "Welcome Message" : "Pnly Don't Stop",
            "Age" : 29,
            "skillsTable" : skillsTable,
            "skillsTable2" : ["SEO","Front end Developemetnt","Story Telling"],
            "bioPicURL" : "../images/fry.jpg"   
        }],

        "User 7":[{
            "Name" : "Usuario 7",
            "Role" : "Web Developer",
            "Contacts" : {
                        "Mobile" : "999 99 9999 9999",
                        "E-mail" : "[email protected]",
                        "GitHub" : "https://github.com/exampleuser",
                        "Facebook" : "https://www.facebook.com/profile.php?id=999999999999999",
                        "Location" : "Some Place"
            },
            "Welcome Message" : "Pnly Don't Stop",
            "Age" : 29,
            "skillsTable" : skillsTable,
            "skillsTable2" : ["SEO","Front end Developemetnt","Story Telling"],
            "bioPicURL" : "../images/fry.jpg"   
        }],

        "User 8":[{
            "Name" : "Usuario 8",
            "Role" : "Web Developer",
            "Contacts" : {
                        "Mobile" : "999 99 9999 9999",
                        "E-mail" : "[email protected]",
                        "GitHub" : "https://github.com/exampleuser",
                        "Facebook" : "https://www.facebook.com/profile.php?id=999999999999999",
                        "Location" : "Some Place"
            },
            "Welcome Message" : "Pnly Don't Stop",
            "Age" : 29,
            "skillsTable" : skillsTable,
            "skillsTable2" : ["SEO","Front end Developemetnt","Story Telling"],
            "bioPicURL" : "../images/fry.jpg"   
        }]
    };






// Metadata variables //
    var itemscopeVar = 'itemscope';
    var itemtypeVar =' itemtype=';
    var itempropVar = 'itemprop=';


  // Table Structuring Variable //
    var tableTagVar = '<table %metadataL0% id="table" class="table">%Inside%</table>';
    var theadVar = '<thead %metadataL1% ><tr id="tableHeader"></tr></thead>';
    var tbodyVar = '<tbody %metadataL2% ><tr id="tableColums">%trColumnsContent%</tr></tbody>';
    var tdHeaderVar = '<th>%tdDataHeader%</th>';
    var tdColumnsVar = '<td>%tdDataColumns%</td>';

    
  // Print Table + Metadata //
    function myFunction() {
        
        var formatTableTagVar = tableTagVar.replace('%metadataL0%', itemscopeVar + itemtypeVar + "'" + metadataContext.Context.itemtype + "'" );
        var formatTheadVar = theadVar.replace("%metadataL1%", itemscopeVar + itemtypeVar + "'" + metadataContext.Context.itemtype + "'" );
        //var formattbodyVarVar = tbodyVar.replace("%metadataL2%", itemscopeVar + itemtypeVar + "'" + metadataContext.Context.itemtype + "'" );
        var formatTableTagVarIn = formatTableTagVar.replace("%Inside%", formatTheadVar );

        var tableInit = $('#tableBox').append(formatTableTagVarIn);

        var switcherTable = 0;
        if( switcherTable < 1 ){
            var trThead = $('#tableHeader');
            var trTbody = $('#tableColums');

            $.each(dataX, function (key, value) {
                //$('#dataGuide').append($('<div></div><br>').html(key.length + ' (' + value.length + ' results)'));
                 $.each(value, function (index, titleObj) {
                    $('#table').append('<tbody>' + tdColumnsVar + '</tbody>');  // Columns
                    console.log( index + titleObj );
                 });


                 trThead.prepend('<th>' + value[0].Name + '</th>'); // Header
                console.log( value + key);
            });
        }
        else{};

        console.log( itemtypeVar + "'" + metadataContext.Context.itemtype + "'" );
    };

Here is the HTML:

<button type="button" onclick="myFunction()">Put the TABLE</button>
<div id="tableBox" class="table-responsive"></div>

<div id="dataGuide" class="box"></div><br>

Please give a look on the web components standard for templating. You may consider as well some framework/library for frontend rendering. — Custodio
– Custodio, Commented Jul 3, 2017 at 21:46
Your dataX object could be a LOT more structured. I'd have a single property as an array of user objects, instead of eight properties. That's just a bad design. I'd design something like this jsoneditoronline.org/?id=ad904ce96997543ba07f4251782b55a5 So you can then loop through the array — Luis Deras
– Luis Deras, Commented Jul 3, 2017 at 22:11
In fact this new structure of JSON makes things easier. I will start whit it. — Rodrigo
– Rodrigo, Commented Jul 3, 2017 at 22:20

Giacomo Scarpino · Accepted Answer · 2017-07-03 21:49:29Z

0

If I've understand correctly: Javascript and Jquery will do the job..

var text = "";
for (i=0;i<dataX.length;i++) {

   text += "<tr>";
   text += "<td>"+ dataX[i].Name +"</td>";
   text += "<td>"+ dataX[i].Role +"</td>";
   text += "<td>"+ dataX[i].Age +"</td>";
   text += "<td>"+ dataX[i].skillsTable2[0] +"</td>";
   text += "<td>"+ dataX[i].bioPicURL +"</td>";
   text+= "</tr>";

}
$("#tableBox").append(text);

answered Jul 3, 2017 at 21:49

Giacomo Scarpino

6576 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nageen · Accepted Answer · 2023-09-29 10:15:02Z

0

Just be normal

var text = ""; for (i=0;i<dataX.length;i++) {
 
    text += "<tr>";    text += "<td>"+ dataX[i].Name +"</td>";    text
 += "<td>"+ dataX[i].Role +"</td>";    text += "<td>"+ dataX[i].Age +"</td>";    text += "<td>"+ dataX[i].skillsTable2[0] +"</td>";    text += "<td>"+ dataX[i].bioPicURL +"</td>";    text+= "</tr>";
 
 } $("#tableBox").append(text);

edited Sep 29, 2023 at 10:15

Nageen

1,7013 gold badges25 silver badges30 bronze badges

answered Sep 27, 2023 at 2:30

Rodrigo Luna

371 silver badge7 bronze badges

Collectives™ on Stack Overflow

JSON data to HTML table with JQUERY

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related