5

I'm trying to use javascript to convert this JSON data into HTML table.

This is my code so far; however, I am confused about how to process the 'contacts' part and put them into a cell like this: first_name + last_name + position of the CEO and CTO.

I was thinking of using company_info[i]["contacts"].forEach(function(e){} to extract the contacts data but I am not sure how to put it together in the cell.

Any help appreciated!

My code:

function CreateTableFromJSON() {
  var company_info = [{
      "id": 1,
      "company_name": "ACompany",
      "established": 1999,
      "industry": "Tech",
      "contacts": [{
          "first_name": "AAFirst",
          "last_name": "AALast",
          "position": "CEO"
        },
        {
          "first_name": "ABFirst",
          "last_name": "ABLast",
          "position": "CTO"
        }
      ]
    },
    {
      "id": 2,
      "company_name": "BCompany",
      "established": 1998,
      "industry": "Med",
      "contacts": [{
          "first_name": "BAFirst",
          "last_name": "BALast",
          "position": "CEO"
        },
        {
          "first_name": "BBFirst",
          "last_name": "BBLast",
          "position": "CTO"
        }
      ]
    },
    {
      "id": 3,
      "company_name": "CCompany",
      "established": 1997,
      "industry": "Ivest",
      "contacts": [{
          "first_name": "CAFirst",
          "last_name": "CALast",
          "position": "CEO"
        },
        {
          "first_name": "CBFirst",
          "last_name": "CBLast",
          "position": "CTO"
        }
      ]
    },
    {
      "id": 4,
      "company_name": "DCompany",
      "established": 1996,
      "industry": "Tech",
      "contacts": [{
          "first_name": "DAFirst",
          "last_name": "DALast",
          "position": "CEO"
        },
        {
          "first_name": "DBFirst",
          "last_name": "DBLast",
          "position": "CTO"
        }
      ]
    },
    {
      "id": 5,
      "company_name": "ECompany",
      "established": 1995,
      "industry": "Med",
      "contacts": [{
          "first_name": "EAFirst",
          "last_name": "EALast",
          "position": "CEO"
        },
        {
          "first_name": "EBFirst",
          "last_name": "EBLast",
          "position": "CTO"
        }
      ]
    }
  ]
  // EXTRACT VALUE FOR HTML HEADER. 
  // ('ID', 'Company Name', 'Established','Industry', 'Contacts')

  var col = [];

  for (var i = 0; i < company_info.length; i++) {
    for (var key in company_info[i]) {
      if (col.indexOf(key) === -1) {
        col.push(key);
      }
    }
  }
  //Create a table
  var table = document.createElement("table");
  //Create  table rows
  var tr = table.insertRow(-1);
  //Create table headers
  for (var i = 0; i < col.length; i++) {
    var th = document.createElement("th"); // TABLE HEADER.
    th.innerHTML = col[i];
    tr.appendChild(th);
  }

  //Add JSON data to table as rows
  for (var i = 0; i < company_info.length; i++) {
    tr = table.insertRow(-1);
    for (var j = 0; j < col.length; j++) {
      var tabCell = tr.insertCell(-1);
      tabCell.innerHTML = company_info[i][col[j]];

    }
  

}

var divContainer = document.getElementById("showData");
divContainer.innerHTML = "";
divContainer.appendChild(table);
}
<html>
<head>
    <title>Convert JSON Data to HTML Table</title>
    <style>
        table, th, td 
        {
            margin:10px 0;
            border:solid 1px #333;
            padding:2px 4px;
            font:15px Verdana;
        }
        th {
            font-weight:bold;
        }
    </style>
</head>
<body>
    <input type="button" onclick="CreateTableFromJSON()" value="Create Table From JSON" />
    <div id="showData"></div>
    <script type="text/javascript" src="script.js"></script>
</body>
</html>

  

3
  • you only show one column for 'Contacts', yet you have two contacts in the data. Seems to me you should have two columns "CEO" and "CTO", then in each, put the name. Dec 20, 2017 at 22:54
  • I'm not sure if i should do that or do this: for example, firstname lastname - CEO, firstname lastname - CTO all in each cell
    – ChuChu
    Dec 20, 2017 at 23:04
  • Until you know what it will look like on the end result, you can't really get much help (sort of like building a building - if you aren't sure if you want windows in it or not, how can your contractor know what to order..... Dec 20, 2017 at 23:11

2 Answers 2

6

As I understood, You want to put contacts array in the cell. We know that contacts column is 4 in nested for loop. You can write a simple if validation to check what the current j is. If j is not 4 which is contacts column, insert value in the table. If the current j value is 4, then make one more nested for loop which will loop contacts array in each object.

  var company_info = [{
      "id": 1,
      "company_name": "ACompany",
      "established": 1999,
      "industry": "Tech",
      "contacts": [{
        "first_name": "AAFirst",
        "last_name": "AALast",
        "position": "CEO"
      }, {
        "first_name": "ABFirst",
        "last_name": "ABLast",
        "position": "CTO"
      }]
    }, {
      "id": 2,
      "company_name": "BCompany",
      "established": 1998,
      "industry": "Med",
      "contacts": [{
        "first_name": "BAFirst",
        "last_name": "BALast",
        "position": "CEO"
      }, {
        "first_name": "BBFirst",
        "last_name": "BBLast",
        "position": "CTO"
      }]
    }, {
      "id": 3,
      "company_name": "CCompany",
      "established": 1997,
      "industry": "Ivest",
      "contacts": [{
        "first_name": "CAFirst",
        "last_name": "CALast",
        "position": "CEO"
      }, {
        "first_name": "CBFirst",
        "last_name": "CBLast",
        "position": "CTO"
      }]
    }, {
      "id": 4,
      "company_name": "DCompany",
      "established": 1996,
      "industry": "Tech",
      "contacts": [{
        "first_name": "DAFirst",
        "last_name": "DALast",
        "position": "CEO"
      }, {
        "first_name": "DBFirst",
        "last_name": "DBLast",
        "position": "CTO"
      }]
    }, {
      "id": 5,
      "company_name": "ECompany",
      "established": 1995,
      "industry": "Med",
      "contacts": [{
        "first_name": "EAFirst",
        "last_name": "EALast",
        "position": "CEO"
      }, {
        "first_name": "EBFirst",
        "last_name": "EBLast",
        "position": "CTO"
      }]
    }]
    // EXTRACT VALUE FOR HTML HEADER. 
    // ('ID', 'Company Name', 'Established','Industry', 'Contacts')

  var col = [];

  for (var i = 0; i < company_info.length; i++) {
    for (var key in company_info[i]) {
      if (col.indexOf(key) === -1) {
        col.push(key);
      }
    }
  }
  //Create a table
  var table = document.createElement("table");
  //Create  table rows
  var tr = table.insertRow(-1);
  //Create table headers
  for (var i = 0; i < col.length; i++) {
    var th = document.createElement("th"); // TABLE HEADER.
    th.innerHTML = col[i];
    tr.appendChild(th);
  }

  //Add JSON data to table as rows
  for (var i = 0; i < company_info.length; i++) {

    tr = table.insertRow(-1);

    for (var j = 0; j < col.length; j++) {
      var tabCell = tr.insertCell(-1);
      if (j !== 4) {
        tabCell.appendChild(document.createTextNode(company_info[i][col[j]]));
      } else {
        for (var x = 0; x < company_info[i].contacts.length; x++) {
          var firstName = company_info[i].contacts[x].first_name,
            lastName = company_info[i].contacts[x].last_name,
            position = company_info[i].contacts[x].position;

          tabCell.appendChild(document.createTextNode(" " + firstName + " " + lastName + ", " + position));
        }
      }
    }

  }


  var divContainer = document.getElementById("showData");
  divContainer.innerHTML = "";
  divContainer.appendChild(table);
<div id="showData">

</div>

Let me know if this is what you want. If not, I will edit the answer.

1
  • 1
    That looks great! Thank you.
    – ChuChu
    Dec 20, 2017 at 23:09
2

I think the best approach is to add the contacts as divs or as ul/lis inside the contacts cell (in my approach down bellow, I used divs).

I also used array functions forEach to iterate the arrays, which can easily convert them to simple for loops if you want:

function CreateTableFromJSON(array) {
  var table = document.createElement("table");                             // the table elements

  var col = Object.keys(array[0]);                                         // the columns names (I think taking the keys of the first object will suffice)
  
  // HEADER:
  var tr = table.insertRow(-1);                                            // the header row
  col.forEach(function(key) {                                              // for each key in col
    var th = document.createElement("th");                                 // create a header cell
    th.textContent = key;                                                  // use textContent instead of innerHTML (it's better)
    tr.appendChild(th);
  });

  // ROWS:
  array.forEach(function(obj) {                                            // for each object obj in company_info
    var tr = table.insertRow(-1);                                          // create a row for it
    col.forEach(function(key) {                                            // and for each key in col
      var tabCell = tr.insertCell(-1);                                     // create a cell
      if (Array.isArray(obj[key])) {                                       // if the current value is an array, then
        obj[key].forEach(function(contact) {                               // for each entry in that array
          var div = document.createElement("div");                         // create a div and fill it
          div.textContent = contact.first_name + " " + contact.last_name + ", " + contact.position;
          tabCell.appendChild(div);                                        // then add the div to the current cell
        });
      } else {                                                             // otherwise, if the value is not an array (it's a string)
        tabCell.textContent = obj[key];                                    // add it as text
      }
    });
  });

  var divContainer = document.getElementById("showData");
  divContainer.innerHTML = "";
  divContainer.appendChild(table);
}

var company_info = [{"id":1,"company_name":"ACompany","established":1999,"industry":"Tech","contacts":[{"first_name":"AAFirst","last_name":"AALast","position":"CEO"},{"first_name":"ABFirst","last_name":"ABLast","position":"CTO"}]},{"id":2,"company_name":"BCompany","established":1998,"industry":"Med","contacts":[{"first_name":"BAFirst","last_name":"BALast","position":"CEO"},{"first_name":"BBFirst","last_name":"BBLast","position":"CTO"}]},{"id":3,"company_name":"CCompany","established":1997,"industry":"Ivest","contacts":[{"first_name":"CAFirst","last_name":"CALast","position":"CEO"},{"first_name":"CBFirst","last_name":"CBLast","position":"CTO"}]},{"id":4,"company_name":"DCompany","established":1996,"industry":"Tech","contacts":[{"first_name":"DAFirst","last_name":"DALast","position":"CEO"},{"first_name":"DBFirst","last_name":"DBLast","position":"CTO"}]},{"id":5,"company_name":"ECompany","established":1995,"industry":"Med","contacts":[{"first_name":"EAFirst","last_name":"EALast","position":"CEO"},{"first_name":"EBFirst","last_name":"EBLast","position":"CTO"}]}];

CreateTableFromJSON(company_info);
table { border-collapse: collapse; }
td, th { border: 1px solid black; }
tr { background: #ccc; }
tr:nth-child(odd) { background: #eee; }
td > div { white-space: pre; }
<div id="showData"></div>

1
  • Thank you. I appreciate your detailed reply!!
    – ChuChu
    Dec 20, 2017 at 23:18

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.