Конвертировать строки HTML в пару «имя-значение» в JQuery

Question

Я пытаюсь преобразовать таблицу HTML в пару имя-значение в формате JSON с использованием Jquery.

 <table class="table">
        <thead class="thead-light">
           <tr>
                  <th>MobileNumber</th>
                   <th>Amount</th>
                   <th>Fuel</th>
            </tr>
          </thead>
          <tbody>
              <tr>
                  <td>1223445</td>
                  <td>12.49</td>
                  <td>1223</td>
              </tr>
              <tr>
                  <td>99999</td>
                  <td>11.39</td>
                  <td>1277745</td> 
              </tr>
          </tbody>
      </table>

Приведенная выше таблица должна быть преобразована в пару значений имени в формате JSON, как показано ниже

[{
       "Customer":{ 
          "MobileNumber":"1223445"
        },
        "TemplateFieds": [{
           "Name": "Amount",
           "value": "12.49"
         },
         {
            "Name":"Fuel",
             "value": "1223"
         }]
  },
  {
       "Customer":{ 
          "MobileNumber":"99999"
        },
        "TemplateFieds": [{
           "Name": "Amount",
           "value": "11.39"
         },
         {
            "Name":"Fuel",
             "value": "1277745"
         }]
  }]

Я пытаюсь изменить эту функцию из ( получить значения из таблицы в виде пар ключ-значение с jquery ), но я не могу понять это правильно.

  var result = $('myTable tbody').children().map(function () {
               var children = $(this).children();
                return {
                    name: children.eq(0).text(),
                    value: children.eq(1).text()
                };
               }).get();

У кого-то есть идеипреобразовать таблицу HTML в вышеупомянутый формат JSON?

-Alan-

Answer 1

Вы можете просто выбрать имена столбцов из элементов <th> и сопоставить их с помощью индекса столбца. Я также исправил вашу опечатку «TemplateFieds», которая должна быть «TemplateFields». (пропущено "l")

var colNames = $('.table thead th').get().map(el => el.textContent);
var result = $('.table tbody').children().map(function() {
  var children = $(this).children().get();
  var resultObj = {Customer: {}, TemplateFields: []};
  children.forEach((cell, index) => {
    if (index === 0) {
      resultObj['Customer'][colNames[index]] = cell.innerText;
    } else {
      resultObj['TemplateFields'].push({
        name: colNames[index],
        value: cell.innerText
      });
    }
  });
  return resultObj;
}).get();
console.log(result);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table">
  <thead class="thead-light">
    <tr>
      <th>MobileNumber</th>
      <th>Amount</th>
      <th>Fuel</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1223445</td>
      <td>12.49</td>
      <td>1223</td>
    </tr>
    <tr>
      <td>99999</td>
      <td>11.39</td>
      <td>1277745</td>
    </tr>
  </tbody>
</table>

Answer 2

вот вы:

let tab = document.getElementById("tab");
let names = tab.querySelectorAll("th");
let values = tab.querySelector("tbody").children;

let arr = [];

for(let i =0; i < values.length;i++){
  let obj = {};
  for(let j = 0;j < names.length;j++){
    obj[names[j].innerHTML] = values[i].children[j].innerHTML;
  }
  arr.push(obj);
}

console.log(JSON.stringify(arr));

но это не хорошее решение

Answer 3

Сначала выполните цикл по thead, чтобы получить свойства Name:

var cols = $("table>thead>tr>th").map(function() {
  return $(this).text()
});

, затем выполните цикл по каждой строке $('table>tbody>tr'), создав запись для добавления к вашему массиву результатов, и в каждой строке выполните цикл покаждая ячейка, кроме первой, генерирующей пару имя / значение.

var cols = $("table>thead>tr>th").map(function() {
  return $(this).text()
});

var result = [];

$('table>tbody>tr').each(function() {
  var cells = $(this).find("td");
  var row = {
    Customer: { MobileNumber: cells.first().text() },
    TemplateFieds: []
  };
  cells.each(function(i, e) {
    if (i == 0) return; // skip first col
    row.TemplateFieds.push({
      "Name": cols[i],
      "value": $(this).text()
    })
  });
  result.push(row);
});

console.log(result);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table">
  <thead class="thead-light">
    <tr>
      <th>MobileNumber</th>
      <th>Amount</th>
      <th>Fuel</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1223445</td>
      <td>12.49</td>
      <td>1223</td>
    </tr>
    <tr>
      <td>99999</td>
      <td>11.39</td>
      <td>1277745</td>
    </tr>
  </tbody>
</table>

---

Пара замечаний:

• вероятно, требуется имя / значение или имя / значение, а не имя / значение
• вероятно, хотите TemplateFie l ds