Using Chrome DevTools to scrape HTML table and convert to JSON.

index.html

// ****************************************************
//     USING JQUERY TO CONVERT HTML TABLE INTO JSON  
//         by Derek from www.cacheflow.ca
//     Watch the video: http://youtu.be/DPOOIOU0zVA
// ****************************************************

// Step 1: Create keys for JSON object 

var cols = $("#tableID thead tr th").map(function(){

  return $(this).text();

});

// eliminate the extraneous strings from cols

var headers = cols.splice(10, cols.length);

// Fetch the data from the table body

var tableObject = $("#tableID tbody tr.tableClass").map(function(i){ 
  
  var row = {};

    $(this).find('td').each(function(i){
      var rowName = headers[i];
      row[rowName] = $(this).text();
    });
  
  return row;
 
 }).get();

// convert object to JSON

JSON.stringify(tableObject);

Excellent work Derek! If I use ajax call the get the DOM tree from a webpage, and then converting one of the table on the page, there will be a challenge since $('#ID') and $('.CLASS') will not be effective as query selectors. What would be your take on this challenge?

Excellent work Derek! If I use ajax call the get the DOM tree from a webpage, and then converting one of the table on the page, there will be a challenge since $('#ID') and $('.CLASS') will not be effective as query selectors. What would be your take on this challenge?

The DOM is a tree of nodes, just iterate over them