JSON formattation of an HTML table

Question

I'm using lightswitch's script to get an HTML table codified into JSON string (https://github.com/lightswitch05/table-to-json). The problem is that, when i alert the result string (with JSON.stringify(data)), the JSON records start from the 13th column, and then goes on til the end, and continues then from the 1st column to the 12th. I don't understand why, this script appears to work properly on every table, but not on mine:

<div contenteditable>

<table id="input">
<tr id="start">
  <th contenteditable="false">00</th>
  <th contenteditable="false">00</th>
  <th contenteditable="false">00</th>
  <th contenteditable="false">01</th>
  <th contenteditable="false">02</th>
  <th contenteditable="false">03</th>
  <th contenteditable="false">04</th>
  <th contenteditable="false">05</th>
  <th contenteditable="false">06</th>
  <th contenteditable="false">07</th>
  <th contenteditable="false">08</th>
  <th contenteditable="false">09</th>
  <th contenteditable="false">10</th>
  <th contenteditable="false">11</th>
  <th contenteditable="false">12</th>
  <th contenteditable="false">13</th>
  <th contenteditable="false">14</th>
  <th contenteditable="false">15</th>
  <th contenteditable="false">16</th>
  <th contenteditable="false">17</th>
  <th contenteditable="false">18</th>
  <th contenteditable="false">19</th>
  <th contenteditable="false">20</th>
  <th contenteditable="false">21</th>
  <th contenteditable="false">22</th>
  <th contenteditable="false">23</th>
  <th contenteditable="false">24</th>
  <th contenteditable="false">25</th>
  <th contenteditable="false">26</th>
  <th contenteditable="false">27</th>
  <th contenteditable="false">28</th>
  <th contenteditable="false">29</th>
  <th contenteditable="false">30</th>
  <th contenteditable="false">31</th>
  <th contenteditable="false">32</th>
  <th contenteditable="false">33</th>
  <th contenteditable="false">34</th>
  <th contenteditable="false">35</th>
  <th contenteditable="false">36</th>
  <th contenteditable="false">37</th>
  <th contenteditable="false">38</th>
  <th contenteditable="false">39</th>
  <th contenteditable="false">40</th>
  <th contenteditable="false">41</th>
  <th contenteditable="false">42</th>
  <th contenteditable="false">43</th>
  <th contenteditable="false">44</th>
  <th contenteditable="false">45</th>
  <th contenteditable="false">46</th>
  <th contenteditable="false">47</th>
  <th contenteditable="false">48</th>
  <th contenteditable="false">49</th>
  <th contenteditable="false">50</th>
  <th contenteditable="false">51</th>
  <th contenteditable="false">52</th>
</tr>


<tr>
  <td contenteditable="false">2nd row</td>
  <td contenteditable="false">false data</td>
  <td>2</td>
  <td></td>
  <td></td>
  <td></td>
  <td>8</td>
  <td></td>
  <td>7</td>
  <td></td>
  <td>8</td>
  <td></td>
  <td>8</td>
  <td></td>
  <td>8</td>
  <td></td>
  <td>8</td>
  <td>8</td>
  <td></td>
  <td>8</td>
  <td></td>
  <td>8</td>
  <td></td>
  <td></td>
  <td>8</td>
  <td></td>
  <td>8</td>
  <td></td>
  <td>6</td>
  <td></td>
  <td>8</td>
  <td></td>
  <td>8</td>
  <td></td>
  <td>8</td>
  <td>8</td>
  <td></td>
  <td>8</td>
  <td>8</td>
  <td></td>
  <td>8</td>
  <td></td>
  <td>1</td>
  <td></td>
  <td></td>
  <td></td>
  <td>8</td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
 </tr>

and so on for all the other rows. I need to save this table in JSON format in order to store the JSON on a database and save modified data. Then also, how to get back the table from JSON?

score 1 · Answer 1 · answered May 10 '16 at 09:10

1

You are using JSON.stringify so you need to take following into consideration:

Properties of non-array objects are not guaranteed to be stringified in any particular order. Do not rely on ordering of properties within the same object within the stringification.

But is it really a problem? Once you send data to server you can order it anyway you want.

answered May 10 '16 at 09:10

lukbl

1,763
1
9
13

Probably not. Anyway, how to get the table back? I have this huge JSON string. How to transform it? – Jimmy Page May 10 '16 at 09:19
`JSON.parse()` to transform it back to `Object` – lukbl May 10 '16 at 09:38
here are some ideas how to create html table from json: http://stackoverflow.com/questions/5180382/convert-json-data-to-a-html-table – lukbl May 10 '16 at 09:45
I am a little confused on how to use `JSON.parse()`, have I to do `table.innerHTML=JSON.parse(object)`? – Jimmy Page May 10 '16 at 09:45

score 0 · Answer 2 · edited May 23 '17 at 11:52

0

First of all, you need to correctly write HTML (close table and div tags etc.). Then I would suggest you treat HTML as XML and maybe this would be helpful: Convert XML to JSON (and back) using Javascript

edited May 23 '17 at 11:52

Community

1
1

answered May 10 '16 at 13:41

Dalibor

1,430
18
42

i'm sorry, i posted only the first part of the code, so i forgot to write the end tags. i'm gonna check this link out, maybe with XML there are less problems. – Jimmy Page May 12 '16 at 07:01

JSON formattation of an HTML table

2 Answers2