You are viewing limited content. For full access, please sign in.

Discussion

Discussion

My method for converting a Forms table to JS Object / JSON

Forms Classic Form Designer Integrations
Updated September 9
posted on September 4 • Show version history

This could be useful for anyone working with a 3rd party library that takes an object as input or for APIs and stored procs. It converts the table object in LF Forms classic to an object ready to plug in to whatever your working with.

function ParseLFTable(tableClass) {
  var dataArray = [];
  var data = '';
  $('.' + tableClass + ' tbody tr').each(function() {

    data += '{';
    $(this).find('td').each(function() {

      let className = $(this).attr('class');
      if (className && (className.indexOf("action") >= 0 || className.indexOf("hideRowLabel") >= 0 || className.indexOf("col0") >= 0))
        return;

      let label = $(this).find('label').html();
      let value = $(this).find('input').val();
      data += '"' + label + '":"' + value + '",';

    });

    data = data.slice(0, -1);
    data += '}';
    dataArray.push(JSON.parse(data));
    data = '';

  });
  return dataArray;
}

Example usage with the datatables.net library to create an auto adjusting, searchable, sortable table.

var myData = ParseLFTable('cf-table-block')

var colsArray = [];
var column = '';
$.each(myData[0], function(key, value) {
  column = '{"data": "' + key + '", "title": "' + key + '"}';
  colsArray.push(JSON.parse(column));
  column = '';
});

$.getScript("https://cdn.datatables.net/2.1.5/js/dataTables.min.js", function() {
  $('#outputTable').html('<table id="dataTable" class="display" width="100%"></table>');

  $('#dataTable').DataTable({
    pageLength: 25,
    data: myData,
    columns: colsArray
  });

});

You can use the following method to convert it to a JSON object instead

https://www.w3schools.com/js/js_json_stringify.asp

1 0
replied on September 6

Thanks for sharing! I think this code will fail if `value` contains any of the characters that need to be escaped in json. A safer and more efficient approach would be something like (untested code):

function ParseLFTable(tableClass) {
  var dataArray = [];
  $('.' + tableClass + ' tbody tr').each(function() {

    var obj = {};
    $(this).find('td').each(function() {

      let className = $(this).attr('class');
      if (className && (className.indexOf("action") >= 0 || className.indexOf("hideRowLabel") >= 0 || className.indexOf("col0") >= 0))
        return;

      let label = $(this).find('label').html();
      let value = $(this).find('input').val();
      obj[label] = value;

    });

    dataArray.push(obj);

  });
  return dataArray;
}

That is, instead of building json and parsing it, build the object directly. I would also wonder if it's more correct to assign label from `text()` rather than `html()`, but in practice it probably doesn't make a difference.

The second example can also be updated to directly create an object and avoid any escaping problems.

column = {data: key, title: key};

 

1 0
replied on September 9

Nice! The stackoverflow examples I found were all using the json method, mostly because they were working with data in a string or file to begin with. As far as I knew I was working with a string too since I knew I needed to cycle through the table and create multiple string variables.

This looks simpler.

0 0
You are not allowed to follow up in this post.

Sign in to reply to this post.

Details
Related Posts
Loading ...