Adding JSON data to a table with the keys in the first row is a simple process that can be achieved

Question

Adding JSON data to a table with the keys in the first row is a simple process that can be achieved

Previously, I have created tables with XML formatted results and JSON data in the "key: data" format. To access the data, I would use syntax like results.heading1 and then map the data into a table by matching the key with the data.

Now, a new client is only able to send their data in a different format where the keys are all listed in the first row rather than alongside each entry. Despite researching extensively online, I haven't found a solution that fits my specific situation!

How can I create a table when the keys (headings) are not positioned next to the data, but instead appear in the initial row of results?

The JSON data at hand looks like this. When I make an API call to the client, the response mirrors the structure shown below:

resultReturn: {
  success: true, 
  results: [
      "ID, Name, Age",
      "A1, Bob, 31",
      "B1, John, 24",
      "C2, Doe, 160",
  ],
  resultsHTML: ""
}

javascript json html-table

Answer 1

Answer №1

If the results value is in an array with comma-delimited objects, you can follow this approach:

let resultData = {
  success: true, 
  results: [
      "heading1, head2, head3",
      "string, 200, 1.1",
      "string2, 100, 1.2",
    ]
}

function displayData() {
  let data = resultData.results;
  let tableBody = document.getElementById("datatable");

  for (let i = 0; i < 3; i++) {
    let row = data[i];
    let newRow = "<tr>";
    let rowItems = row.split(",");
    for (let j = 0; j < rowItems.length; j++) {
      newRow += "<td>" + rowItems[j] + "</td>";
    }
    newRow += "</tr>";
    tableBody.innerHTML += newRow;
  }
}
displayData();

Please note that I have enclosed this code block within a function to facilitate testing, so you do not need to add the window.onload line.

Answer 2

If the results value is in an array with comma-delimited objects, you can follow this approach:

let resultData = {
  success: true, 
  results: [
      "heading1, head2, head3",
      "string, 200, 1.1",
      "string2, 100, 1.2",
    ]
}

function displayData() {
  let data = resultData.results;
  let tableBody = document.getElementById("datatable");

  for (let i = 0; i < 3; i++) {
    let row = data[i];
    let newRow = "<tr>";
    let rowItems = row.split(",");
    for (let j = 0; j < rowItems.length; j++) {
      newRow += "<td>" + rowItems[j] + "</td>";
    }
    newRow += "</tr>";
    tableBody.innerHTML += newRow;
  }
}
displayData();

Please note that I have enclosed this code block within a function to facilitate testing, so you do not need to add the window.onload line.

Adding JSON data to a table with the keys in the first row is a simple process that can be achieved

Answer №1

Similar questions

Custom container width causes animation to crash when scrolling

What is the most creative way you can think of to create a CSS/JS animated

What are some strategies for implementing dynamic script generation within an AJAX response?

"Exploring the differences between sending a JSON post request with multiple parameters to a Web

Unable to receive data from jQuery AJAX request

Remove any blank way point entries from the JSON data

Tips for updating a URL using data obtained from a JSON response

Discovering the technique to dynamically load various content using jQuery in a div based on its

The Javafx WebEngine's executescript() function is unable to send a multiline string

What are the implications of incorporating listeners in redux action creators?

Creating a webpage with a feature that allows users to click a button and instantly change the background to a

jQuery form validation not functioning as expected

How to implement a form in PHP that doesn't refresh the page upon submission

How to check Internet upload speed in Angular without using a backend server?

Access an attribute using slashes in Jquery

Using React and Redux to showcase JSON data on a webpage

How can I use Jackson to wrap properties in Micronaut?

Retrieve HTML content from a JSON object and render it on a web page

Is there a way to bypass cells within an html table?

Issues encountered with making JSONP requests