Javascript table row for array

Question

I have a line that looks like this:

<tr><td>Date</td><td>Value</td></tr> <tr><td>2013-01-01</td><td>231.198</td></tr> <tr><td>2013-02-01</td><td>232.770</td></tr> <tr><td>2013-03-01</td><td>232.340</td></tr> <tr><td>2013-04-01</td><td>231.485</td></tr> <tr><td>2013-05-01</td><td>231.831</td></tr> <tr><td>2013-06-01</td><td>232.944</td></tr> <tr><td>2013-07-01</td><td>233.318</td></tr> 

... which, of course, is essentially a table.

I would like to dynamically convert this string to an array containing 2 arrays. One of the dates, one of the values.

[Ed.] An array of objects with date and values ​​will also work.

Answer 1

Following::

 var input = // your string var output = $(input).slice(1).map(function(i,el) { var tds = $(el).find("td"); return { "date" : tds.eq(0).text(), "value" : tds.eq(1).text() }; }).get(); 

... will return an array of objects in this format:

 [{"date":"2013-01-01","value":"231.198"}, {"date":"2013-02-01","value":"232.770"}, ... ] 

If you want each value be treated as a number, you can convert it like this:

  return { "date" : tds.eq(0).text(), "value" : +tds.eq(1).text() }; // add the unary plus operator ---------------^ 

Then the result will be:

 [{"date":"2013-01-01","value":231.198}, {"date":"2013-02-01","value":232.77}, ... ] 

Answer 2

While you already accepted the answer, I thought that I would post a simple JavaScript solution (although mainly because I took the time to do this before Barmar indicated that you were ready and could use jQuery):

 function cellContents(htmlStr, what) { var _table = document.createElement('table'); _table.innerHTML = htmlStr; var rows = _table.getElementsByTagName('tr'), text = 'textContent' in document ? 'textContent' : 'innerText', cells, matches = {}; for (var w = 0, wL = what.length; w < wL; w++) { matches[what[w]] = []; for (var r = 1, rL = rows.length; r < rL; r++) { cells = rows[r].getElementsByTagName('td'); matches[what[w]].push(cells[w][text]); } } return matches; } var str = "<tr><td>Date</td><td>Value</td></tr><tr><td>2013-01-01</td><td>231.198</td></tr><tr><td>2013-02-01</td><td>232.770</td></tr><tr><td>2013-03-01</td><td>232.340</td></tr><tr><td>2013-04-01</td><td>231.485</td></tr><tr><td>2013-05-01</td><td>231.831</td></tr><tr><td>2013-06-01</td><td>232.944</td></tr><tr><td>2013-07-01</td><td>233.318</td></tr>"; console.log(cellContents(str, ['dates', 'values'])); 

JS Fiddle demo .

Answer 3

For a clean JavaScript solution, you can try something like this (assuming str contains your string):

 var arrStr = str.replace(/<td>/g, "").replace(/<tr>/g, "").split("</td></tr>"); var arrObj = []; var arrData for (var i = 1; i < arrStr.length - 1; i++) { arrData = arrStr[i].split("</td>"); arrObj.push({ Date: arrData[0], Value: arrData[1] }) } 

It replaces / splits the string with end force, but at the end arrObj will have an array of objects.

Answer 4

if its valid html table structure, wrap it between table tags and use jquery to parse it. then use the jquery selector to find the columns.

e.g. something like this (pseudo code, havent tried)

 table = $(yourTableString); dates = table.find("tr td:nth-child(1)"); values = table.find("tr td:nth-child(2)"); 

Answer 5

Using jQuery:

 var table = $('<table>'+str+'</table>'); var result = {}; table.find('tr:gt(0)').each(function () { var date = $(this).find("td:nth-child(1)").text(); var value = $(this).find("td:nth-child(2)").text(); result[date] = value; } 

:gt(0) - skip the title bar. This will create an associative array object that maps dates to values. Assuming dates are unique, this is likely to be more useful than two arrays or an array of objects.