How to convert dynamically generated javascript table into json/xml and how to save that file?

Question

I've a function in javascript which creates table of properties dynamically:

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

  if (text === void 0) { text = "<no properties to display>"; }
  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 want to take that generated table into json/xml and save this into a new file, how would I do this?

Answer 1

You can basically loop through the generated table like below and convert it into json with the following code

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

// Let's put this in the object like you want and convert to JSON (Note: jQuery will also do this for you on the Ajax request)
var myObj = {};
myObj.myrows = myRows;
alert(JSON.stringify(myObj));​

Possible duplicate