Преобразование таблицы HTML в JSON

Question

У меня есть это:

<table> 
    <tr> 
     <th>Name:</th> 
     <td>Carlos</td> 
    </tr>   
    <tr> 
     <th>Age:</th> 
     <td>22</td> 
    </tr> 
</table> 

И мне нужен формат JSON.

{"Name":"Carlos","Age": 22} 

Я попытался с https://github.com/lightswitch05/table-to-json, но он не работает для заголовков в каждой строке :(

EDIT: http://jsfiddle.net/Crw2C/773/

Answer 1

Предполагая, что все, что вам нужно, чтобы получить первые/вторые ячейки каждой строки в виде пар ключ/значение, вы можете использовать .reduce() для перебора строк и просто захватить текстовое содержание .cells[0] и .cells[1] использовать как каждый ключ/значение пары:

var t = document.querySelector("table"); 
 

 
var j = [].reduce.call(t.rows, function(res, row) { 
 
    res[row.cells[0].textContent.slice(0,-1)] = row.cells[1].textContent; 
 
    return res 
 
}, {}); 
 

 
document.querySelector("pre").textContent = JSON.stringify(j, null, 2);

<table> 
 
    <tr> 
 
     <th>Name:</th> 
 
     <td>Carlos</td> 
 
    </tr>   
 
    <tr> 
 
     <th>Age:</th> 
 
     <td>22</td> 
 
    </tr> 
 
</table> 
 
<pre></pre>

Array.prototype.reduce метод принимает коллекцию и использует аккумулятор, чтобы уменьшить его вниз к тому, что государство вы хотите. Здесь мы просто сводим его к объекту, поэтому мы передаем один из них после обратного вызова.

Для каждой строки мы используем содержимое первой ячейки как ключ объекта, а содержимое второй ячейки - как значение. Затем мы возвращаем объект из обратного вызова, чтобы он возвращался к нам на следующей итерации.

И наконец, .reduce() возвращает последнее, что мы вернули (это, конечно, объект, с которого мы начали), и это ваш результат.

Answer 2

Вы можете преобразовать таблицу в ОП в требуемом формате сначала превращением его в объект, а затем с помощью JSON.stringify, чтобы получить требуемую строку:

<table id="t0"> 
    <tr> 
     <th>Name:</th> 
     <td>Carlos</td> 
    </tr>   
    <tr> 
     <th>Age:</th> 
     <td>22</td> 
    </tr> 
</table> 

<script> 

function tableToJSON(table) { 
    var obj = {}; 
    var row, rows = table.rows; 
    for (var i=0, iLen=rows.length; i<iLen; i++) { 
    row = rows[i]; 
    obj[row.cells[0].textContent] = row.cells[1].textContent 
    } 
    return JSON.stringify(obj); 
} 

console.log(tableToJSON(document.getElementById('t0'))); // {"Name:":"Carlos","Age:":"22"}" 

</script> 

Тем не менее, что является ad hoc, поэтому потребуется некоторая работа, которая будет адаптирована к более общему случаю. Однако это показывает концепцию.

Обратите внимание, что нет гарантии, что свойства объекта будут возвращены в том же порядке, что и в таблице, вы можете получить {"Age:":"22","Name:":"Carlos"}.

Answer 3

Table-to-JSON library, который вы используете, ожидает ваш формат в другом формате.

Ожидается таблица со всеми вашими заголовками в первой строке, за которой следуют данные в последующих строках.

Другими словами, он ожидает таблицу, чтобы быть структурирована как этот

<table> 
    <tr> 
     <th>Name</th> 
     <th>Age</th> 
    </tr>   
    <tr> 
     <td>Carlos</td> 
     <td>22</td> 
    </tr> 
</table> 

Вот a forked version of your JSFiddle, в которой это работает.

Answer 4

var t = document.querySelector("table"); 
 

 
var j = [].reduce.call(t.rows, function(res, row) { 
 
    res[row.cells[0].textContent.slice(0,-1)] = row.cells[1].textContent; 
 
    return res 
 
}, {}); 
 

 
document.querySelector("pre").textContent = JSON.stringify(j);

<table> 
 
    <tr> 
 
     <th>Name:</th> 
 
     <td>Carlos</td> 
 
    </tr>   
 
    <tr> 
 
     <th>Age:</th> 
 
     <td>22</td> 
 
    </tr> 
 
</table> 
 
<pre></pre>