Creating a table in Javascript using an array of objects

Question

Creating a table in Javascript using an array of objects

I need a larger version of this data structure.

[{
"votes":200,
"invalid_votes":140,
"valid_votes":60,
"voting_section":{"level":2, "zone1":"US", "zone2":"Delaware"}
},
{
"votes":300,
"invalid_votes":40,
"valid_votes":260,
"voting_section":{"level":3, "zone1":"US", "zone2":"California", "zone3":"Los Angeles"}
}]

I have been struggling for hours to convert this array into a table format.

My objective is to display the last zones (in this case zone2 and zone3) from the voting_section in the first column of the table (e.g. the first column will list: Delaware and Los Angeles).

I want to include all other properties (votes, invalid votes, valid votes) in the table header.

The table cells should be filled with corresponding values:

This is what I am aiming for:

https://i.sstatic.net/Ncjs9.jpg

This is the code I have so far, but I believe I may not be on the right track:

 function createTableKeyValue2(arrObjects, parentDiv) {
                var elTable = document.createElement("table");
                elTable.className = "table table-striped table-bordered";
                var elTableBody = document.createElement("tbody");
                for (var i = 0; i < arrObjects.length; i++) {
                    var elTableRow = document.createElement("tr");
                    var elTableDataKey = document.createElement("td");
                    elTableDataKey.innerHTML = arrObjects[i];
                    var elTableDataValue = document.createElement("td");
                    elTableDataValue.innerHTML = arrObjects[i];
                    //elTableDataValue.id = arrObjects[i].key.split(' ').join('_');
                    elTableRow.appendChild(elTableDataKey);
                    elTableRow.appendChild(elTableDataValue);
                    elTableBody.appendChild(elTableRow);
                }
                elTable.appendChild(elTableBody);
                parentDiv.append(elTable);
            }

            var votingSection = function(zone) {

                var voting_section = [];
                var level = zone[0].voting_section.level;
                for (var i = 0; i < zone.length; i++) {
                    voting_section.push(zone[i].voting_section['zone' + level]);
                }
                return voting_section;
            };

createTableKeyValue(votingSection(zone2), resultsTableDiv);

resultTableDiv refers to a node in the DOM.

javascript arrays tabular

Answer 1

Answer №1

Upon analyzing your inquiry, it appears that you are interested in extracting a single zone from the voting_section data, specifically the one with the highest numerical value associated with it.

var data = [{
      "votes": 200,
      "invalid_votes": 140,
      "valid_votes": 60,
      "voting_section": {
        "level": 1,
        "zone1": "US",
        "zone2": "Delaware"
      }
    },
    {
      "votes": 300,
      "invalid_votes": 40,
      "valid_votes": 260,
      "voting_section": {
        "level": 1,
        "zone1": "US",
        "zone2": "California",
        "zone3": "Los Angeles"
      }
    }
  ],
  html = "";

function getLastZone(voting_section) {
  var highestZone = {
    zoneNumber: null,
    zoneText: null
  };
  for (var zone in voting_section) {
    var checkZone = /zone(\d)/g.exec(zone);
    if (checkZone) {
      if (parseInt(checkZone[1]) > highestZone.zoneNumber) {
        highestZone = {
          zoneNumber: [checkZone[1]],
          zoneText: voting_section[zone]
        };
      }
    }
  }
  return highestZone.zoneText;
}

data.forEach(function(e, i) {
  html += "<tr>" + "<td>" + getLastZone(e.voting_section) + "</td>" + 
                   "<td>" + e.votes + "</td>" + 
                   "<td>" + e.valid_votes + "</td>" + 
                   "<td>" + e.invalid_votes + "</td>" + "</tr>";
})

document.getElementById("putHere").innerHTML = html;

table {
  border-collapse: collapse;
  border-left: 1px solid #bbbbbb;
  border-top: 1px solid #bbbbbb;
}
th, td {
  border-right: 1px solid #bbbbbb;
  border-bottom: 1px solid #bbbbbb;
}

<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>Document</title>

</head>

<body>
  <table>
    <thead>
      <th>Zone</th>
      <th>Votes</th>
      <th>Valid Votes</th>
      <th>Invalid Votes</th>
    </thead>
    <tbody id="putHere"></tbody>
  </table>
</body>

</html>

Answer 2

Upon analyzing your inquiry, it appears that you are interested in extracting a single zone from the voting_section data, specifically the one with the highest numerical value associated with it.

var data = [{
      "votes": 200,
      "invalid_votes": 140,
      "valid_votes": 60,
      "voting_section": {
        "level": 1,
        "zone1": "US",
        "zone2": "Delaware"
      }
    },
    {
      "votes": 300,
      "invalid_votes": 40,
      "valid_votes": 260,
      "voting_section": {
        "level": 1,
        "zone1": "US",
        "zone2": "California",
        "zone3": "Los Angeles"
      }
    }
  ],
  html = "";

function getLastZone(voting_section) {
  var highestZone = {
    zoneNumber: null,
    zoneText: null
  };
  for (var zone in voting_section) {
    var checkZone = /zone(\d)/g.exec(zone);
    if (checkZone) {
      if (parseInt(checkZone[1]) > highestZone.zoneNumber) {
        highestZone = {
          zoneNumber: [checkZone[1]],
          zoneText: voting_section[zone]
        };
      }
    }
  }
  return highestZone.zoneText;
}

data.forEach(function(e, i) {
  html += "<tr>" + "<td>" + getLastZone(e.voting_section) + "</td>" + 
                   "<td>" + e.votes + "</td>" + 
                   "<td>" + e.valid_votes + "</td>" + 
                   "<td>" + e.invalid_votes + "</td>" + "</tr>";
})

document.getElementById("putHere").innerHTML = html;

table {
  border-collapse: collapse;
  border-left: 1px solid #bbbbbb;
  border-top: 1px solid #bbbbbb;
}
th, td {
  border-right: 1px solid #bbbbbb;
  border-bottom: 1px solid #bbbbbb;
}

<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>Document</title>

</head>

<body>
  <table>
    <thead>
      <th>Zone</th>
      <th>Votes</th>
      <th>Valid Votes</th>
      <th>Invalid Votes</th>
    </thead>
    <tbody id="putHere"></tbody>
  </table>
</body>

</html>

Answer 3

Answer №2

If you want to streamline the process of building a table, consider creating a main function that handles the overall table creation and then calling a separate function for building each row as you iterate over the data. I've provided an example in my post below.

var data = [{
  "votes":200,
  "invalid_votes":140,
  "valid_votes":60,
  "voting_section":{"level":2, "zone1":"US", "zone2":"Delaware"}
},
{
  "votes":300,
  "invalid_votes":40,
  "valid_votes":260,
  "voting_section":{"level":3, "zone1":"US", "zone2":"California", "zone3":"Los Angeles"}
}];

var buildTable = function(data, container){
  /* A function that constructs a single row into a <tr> element string */
  var buildRow = function(rowData){
    return `<tr><td>${rowData.voting_section.zone2}</td><td>${rowData.votes}</td><td>${rowData.valid_votes}</td><td>${rowData.invalid_votes}</td></tr>`;
  }
  
  /* Combines all rows from the array of row data into one string */
  var rows = data.reduce(function(rows, row){
    return rows+buildRow(row);
  }, '');
  
  /* Builds the complete table with the concatenated rows */
  container.innerHTML = `<table><thead><tr><td></td><td>Votes</td><td>Valid Votes</td><td>Invalid Votes</td></tr></thead><tbody>${rows}</tbody>`;
}

var resultsTableDiv = document.getElementById('results')
buildTable(data, resultsTableDiv);

<div id="results"></div>

Answer 4

If you want to streamline the process of building a table, consider creating a main function that handles the overall table creation and then calling a separate function for building each row as you iterate over the data. I've provided an example in my post below.

var data = [{
  "votes":200,
  "invalid_votes":140,
  "valid_votes":60,
  "voting_section":{"level":2, "zone1":"US", "zone2":"Delaware"}
},
{
  "votes":300,
  "invalid_votes":40,
  "valid_votes":260,
  "voting_section":{"level":3, "zone1":"US", "zone2":"California", "zone3":"Los Angeles"}
}];

var buildTable = function(data, container){
  /* A function that constructs a single row into a <tr> element string */
  var buildRow = function(rowData){
    return `<tr><td>${rowData.voting_section.zone2}</td><td>${rowData.votes}</td><td>${rowData.valid_votes}</td><td>${rowData.invalid_votes}</td></tr>`;
  }
  
  /* Combines all rows from the array of row data into one string */
  var rows = data.reduce(function(rows, row){
    return rows+buildRow(row);
  }, '');
  
  /* Builds the complete table with the concatenated rows */
  container.innerHTML = `<table><thead><tr><td></td><td>Votes</td><td>Valid Votes</td><td>Invalid Votes</td></tr></thead><tbody>${rows}</tbody>`;
}

var resultsTableDiv = document.getElementById('results')
buildTable(data, resultsTableDiv);

<div id="results"></div>

Answer 5

Answer №3

To generate a table using the javascript DOM objects, you can follow these steps:

myArray = [{
"votes":200,
"invalid_votes":140,
"valid_votes":60,
"voting_section":{"level":2, "zone1":"US", "zone2":"Delaware"}
},
{
"votes":300,
"invalid_votes":40,
"valid_votes":260,
"voting_section":{"level":3, "zone1":"US", "zone2":"California", "zone3":"Los Angeles"}
}]

table = document.getElementById("myTable")
    //Ensures the table is empty if called multiple times
while(table.rows[0] !== undefined) {
    table.deleteRow(0)
}
    //Creates empty cell in top left corner
row = table.insertRow(0)
row.insertCell(0)
pos = 0

    //Inserts column labels
for(var name in myArray[0]) {
    if (name !== "voting_section") {
        pos += 1
        cell = row.insertCell(pos)
        cell.innerHTML = name
    }
}

    //Inserts row labels based on data
for (var i = 0; i < myArray.length; i++) {
    row = table.insertRow(i+1)
    lastItem = myArray[i].voting_section[Object.keys(myArray[i].voting_section)[Object.keys(myArray[i].voting_section).length - 1]]
    row.insertCell(0).innerHTML = lastItem
}

    //Fills in the values in the table
pos = 0
for(var name in myArray[0]) {

    if (name !== "voting_section"){
        pos += 1
        for (var i = 0; i < myArray.length; i++) {
            row = table.rows[i+1]
            cell = row.insertCell(pos)
            cell.innerHTML = myArray[i][name]
        }
    }
}

Answer 6

To generate a table using the javascript DOM objects, you can follow these steps:

myArray = [{
"votes":200,
"invalid_votes":140,
"valid_votes":60,
"voting_section":{"level":2, "zone1":"US", "zone2":"Delaware"}
},
{
"votes":300,
"invalid_votes":40,
"valid_votes":260,
"voting_section":{"level":3, "zone1":"US", "zone2":"California", "zone3":"Los Angeles"}
}]

table = document.getElementById("myTable")
    //Ensures the table is empty if called multiple times
while(table.rows[0] !== undefined) {
    table.deleteRow(0)
}
    //Creates empty cell in top left corner
row = table.insertRow(0)
row.insertCell(0)
pos = 0

    //Inserts column labels
for(var name in myArray[0]) {
    if (name !== "voting_section") {
        pos += 1
        cell = row.insertCell(pos)
        cell.innerHTML = name
    }
}

    //Inserts row labels based on data
for (var i = 0; i < myArray.length; i++) {
    row = table.insertRow(i+1)
    lastItem = myArray[i].voting_section[Object.keys(myArray[i].voting_section)[Object.keys(myArray[i].voting_section).length - 1]]
    row.insertCell(0).innerHTML = lastItem
}

    //Fills in the values in the table
pos = 0
for(var name in myArray[0]) {

    if (name !== "voting_section"){
        pos += 1
        for (var i = 0; i < myArray.length; i++) {
            row = table.rows[i+1]
            cell = row.insertCell(pos)
            cell.innerHTML = myArray[i][name]
        }
    }
}

Creating a table in Javascript using an array of objects

Answer №1

Answer №2

Answer №3

Similar questions

Guide on implementing a bootstrap loading spinner during the process of retrieving data from an external api

List of duplicated BLE devices detected in network scanning

Ways to extract the ID by iterating through buttons

Angular-datatables has a scroller function that allows for easy navigation within the content of

Component does not detect change when the same number is sent as input

The error being thrown is related to Next.js 13 cache setting of 'no-store'

watchify with gulp requires two saves to update modifications

When I try to use Node.js and Express, I encounter an issue where I receive the

Dealing with JSON data retrieved from a Django QuerySet using AJAX

Filtering dynamically generated table rows using Jquery

Guide on making a button display an image, then switch back to the initial image when clicked again

Having trouble running a form due to the inclusion of JavaScript within PHP code

Updating the text of a Mat-Label dynamically without the need to reload the page

Adding double quotes, where they haven't been added yet

Having trouble with the $.post method not loading my PHP file in my

terminate the express middleware and return a custom HTTP status code

Animate an image to the right when clicked, then return it to the left with a second click

JQuery's document.ready function triggers prematurely on dynamically loaded HTML content

How can I transfer request headers from Express to index.js in React?

Understanding the implementation of options within dataTables that have been initialized with an aaData JavaScript array