Is there a way to transform a dynamically created JavaScript table into JSON or XML format and then store it as a file?

Question

Is there a way to transform a dynamically created JavaScript table into JSON or XML format and then store it as a file?

A dynamic table of properties is created in JavaScript using a function:

// update table
PropertyWindow.prototype._update = function (text) {

  if (text === void 0) { text = "&lt;no properties to display&gt;"; }
  this._propertyWindow.html(text);

};
PropertyWindow.prototype._onModelStructureReady = function () {

  this._assemblyTreeReadyOccurred = true;
  this._update();

};
// create row for property table
PropertyWindow.prototype._createRow = function (key, property, classStr) {

  if (classStr === void 0) { classStr = ""; }
  var tableRow = document.createElement("tr");
  tableRow.id = "propertyTableRow_" + key + "_" + property;
  if (classStr.length > 0) {
    tableRow.classList.add(classStr);
  }
  var keyDiv = document.createElement("td");
  keyDiv.id = "propertyDiv_" + key;
  keyDiv.innerHTML = key;
  var propertyDiv = document.createElement("td");
  propertyDiv.id = "propertyDiv_" + property;
  propertyDiv.innerHTML = property;
  tableRow.appendChild(keyDiv);
  tableRow.appendChild(propertyDiv);

  return tableRow;
};

I am looking to convert the generated table into JSON/XML and save it into a new file. How can I achieve this?

https://i.sstatic.net/SKq1y.png

javascript asp.net

Answer 1

Answer №1

To convert the generated table into JSON, you can iterate through it using the code snippet below:

var dataSet = [];
var $headers = $("th");
// Specify your table selector here
var $rows = $("tbody tr").each(function(index) {
  $cells = $(this).find("td");
  dataSet[index] = {};
  $cells.each(function(cellIndex) {
    dataSet[index][$($headers[cellIndex]).html()] = $(this).html();
  });    
});

// Store the data in an object and convert it to JSON format (jQuery can also handle this during Ajax requests)
var jsonData = {};
jsonData.dataSet = dataSet;
alert(JSON.stringify(jsonData));

Check out this similar discussion

Answer 2

To convert the generated table into JSON, you can iterate through it using the code snippet below:

var dataSet = [];
var $headers = $("th");
// Specify your table selector here
var $rows = $("tbody tr").each(function(index) {
  $cells = $(this).find("td");
  dataSet[index] = {};
  $cells.each(function(cellIndex) {
    dataSet[index][$($headers[cellIndex]).html()] = $(this).html();
  });    
});

// Store the data in an object and convert it to JSON format (jQuery can also handle this during Ajax requests)
var jsonData = {};
jsonData.dataSet = dataSet;
alert(JSON.stringify(jsonData));

Check out this similar discussion

Is there a way to transform a dynamically created JavaScript table into JSON or XML format and then store it as a file?

Answer №1

Similar questions

Enter key triggering input change event is unresponsive in Internet Explorer

Utilizing Google Analytics 4 in a React TypeScript Environment

React/MaterialUI - Is there a way to customize the placeholder text for my multi-input field beyond the provided options?

ERROR: The variable countryCallingCode has not been defined

How can you send an error message from Flask and then process it in JavaScript following an AJAX request?

Angular - service workers leading to unsuccessful uploads

Unlock a multitude of outcomes with Sequelize

The front-end is responsible for removing the last item from an array

Using JavaScript and jQuery to toggle visibility of a dynamically created input field

Having trouble connecting to my MongoDB container using Node.js

Clicking on a row in the Gridview should trigger the expansion or collapse of the Nested

When adding objects to the database using .NET EntityFramework, only unique items will be saved. Multiple identical objects cannot be

Can you explain the concept of 'each' when using the looping method in jQuery?

jQuery selector for attributes with values that are higher than a specific amount using the ">" symbol or lower than a certain value using the "<" symbol

When attempting to access Element.object3D in A-frame using TypeScript, an error stating "The 'object3D' property does not exist on the 'Element' type" is encountered

Steps for setting up and shutting down the server during integration testing with Express and Supertest on NodeJS

I am encountering a horizontal scroll bar despite setting the width to 100%

RTM is lacking dropdown navigation menus

Transform the C# DateTime to LocalTime on the client side using JavaScript

Handlebars does not support loading data into variables using Express