Перегруппировка html Столбец колонны в jquery

Question

HTML таблица

<thead>
    <tr>
      <th class="text-center">1</th>
      <th class="text-center">3</th>
      <th class="text-center">2</th>
    </tr>
</thead>

<tbody class="result_body">

</tbody>

данные

var data = [
               {
                  "0": "1",
                  "1": "20"
               },                  
               {
                  "0": "2",
                  "1": "30"
               },
               {
                  "0": "3",
                  "1": "5"
               }
             ]

Я создаю одну таблицу с именем 1,3,2, после чего внутри jquery пытаюсь l oop данных и добавить в таблицу. Но это будет следовать последовательности с 1,2,3. Как я могу добавить данные в соответствии с последовательностью таблицы с 1,3,2?

Jquery Вывод данных

<th>
  <td>20</td>
  <td>30</td>
  <td>5</td>
<th>

Данные должны быть правильными

<th>
  <td>20</td>
  <td>5</td>
  <td>30</td>
<th>

код здесь https://jsfiddle.net/vwL0frhm/1/

Answer 1

Итерируйте свои заголовки и найдите соответствующее значение (вместо того, чтобы итерировать массив):

$('#opt_head th').each(function(dkey, dvalue) {
      let textHeader =  $(dvalue).text();
      let value = data.find(o => o[0] === textHeader)[1];
      html += "<td>"+ value +"</td>";
});

jsfiddle: https://jsfiddle.net/hansfelix50/Ltqvr3bm/