Jquery - создать объект JavaScript из таблицы HTML

Question

Я пытаюсь создать js obj форму таблицы.как и далее, и я хочу, чтобы объект json формировал его с помощью jquery.

Первая строка tr должна рассматриваться как заголовок, а остальная часть tr - как тело.Порядок должен быть в виде индекса строки таблицы tr.

<table class='table-out'>
   <tr class='header'>
          <td>title</td>
          <td>name</td>
          <td>address</td>
   </tr>
   <tr>
          <td>Mr.</td>
          <td>John Doe</td>
          <td>St. Michael Rd.</td>
   </tr>
   <tr>
          <td>Mr.</td>
          <td>Daniel Kautman</td>
          <td>St. Michael Rd.</td>
   </tr>
</table>

JSON Obj Мне нужно:

tableObj =
[
     head:
        {
           txttitle: title,
           txtName: Name,
           txtAddrs: Address,
           order: 1
        }
     body:
        [{
            txttitle: Mr,
            txtName: John Doe,
            txtAddrs: St. Michael Rd
            order: 1
        },
        {
            txttitle: Mr,
            txtName: Mrak Doe,
            txtAddrs: 3 Z, Moyed Park
            order: 2
        },
        {
            txttitle: Mr,
            txtName: Meghan Slattery,
            txtAddrs: address here
            order: 3
        }]
]

Что-то, что я пытаюсь сделать как-

$('.table-out>tbody>tr').each(function (index, elem){
  if($(this).hasClass(header)){
    ......
  }else{
    ......
 }
});

Answer 1

Старайтесь не кодировать его жестко, независимо от того, что вы добавите в заголовок, он будет использоваться:

var tableObj = {head: {}, body:[]};
var order_number = 0;

$('.table-out tr').each(function (index, elem){
  if($(this).hasClass('header')){
     construct_header(this);
  }else{
     append_body(this);
  }
});

console.log(tableObj);

function construct_header(thisObj){
   $(thisObj).find("td").each(function (index, elem){
      tableObj.head[$(this).text()]=$(this).text();
   });
   tableObj.head.order=1;
}

function append_body(thisObj){
   var row = [],colno=0;
   order_number++;
   var fields = $(thisObj).find("td");
   Object.keys(tableObj.head).forEach(function(key_){
      var field = {};
      if(key_=="order"){
        field[key_] = order_number;
      }else{
        field[key_] = $(fields[colno]).text();
      }
      row.push(field);
      colno++;
   });

   tableObj.body.push(row);
}

Answer 2

Пожалуйста, добавьте class или немного attr, чтобы ваши данные оставались в безопасности.

Вот демонстрация в реальном времени https://jsfiddle.net/shoesheill/od8ry0nc/47/

<table class='table-out'>
   <tr class='header'>
          <td class="title">title</td>
          <td class="name">name</td>
          <td class="address">address</td>
   </tr>
   <tr>
          <td class="title">Mr.</td>
          <td class="name">John Doe</td>
          <td class="address">St. Michael Rd.</td>
   </tr>
   <tr>
          <td class="title">Mr.</td>
          <td class="name">Daniel Kautman</td>
          <td class="address">St. Michael Rd.</td>
   </tr>
</table>
var tableObj = {
    head: {},
    body: []
}

$('tr:not(".header")').each(function(i,v) {
var $this=$(this);
    var body = { 
       txttitle: $this.find('.title').text(), 
       txtName:$this.find('.name').text(),
       txtAddrs: $this.find('.address').text(),
       order:Number(i+1)
   };
   tableObj.body.push(body);
});

$('tr[class="header"]').each(function(i,v) {
var $this=$(this);
     tableObj.head = { 
       txttitle: $this.find('.title').text(), 
       txtName:$this.find('.name').text(),
       txtAddrs: $this.find('.address').text(),
       order:Number(i+1)
   };
});

console.log(tableObj);

Answer 3

Ты почти у цели.Получите ячейки для каждой строки и получите текст, основанный на индексе столбца.Ваш tableObj должен быть объектом, а не массивом.

Например,

var tableObj = {
  head: {},
  body: []
};

$(".table-out tr").each(function(index, value) {
  var $cols = $(this).children("td");

  var item = {
    txttitle: $cols.eq(0).text(),
    txtName: $cols.eq(1).text(),
    txtAddrs: $cols.eq(2).text()
  };

  if ($(this).hasClass("header")) {
    item.order = 1;
    tableObj.head = item;
  } else {
    item.order = index;
    tableObj.body.push(item);
  }

});

console.log(tableObj);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class='table-out'>
  <tr class='header'>
    <td>title</td>
    <td>name</td>
    <td>address</td>
  </tr>
  <tr>
    <td>Mr.</td>
    <td>John Doe</td>
    <td>St. Michael Rd.</td>
  </tr>
  <tr>
    <td>Mr.</td>
    <td>Daniel Kautman</td>
    <td>St. Michael Rd.</td>
  </tr>
</table>

Answer 4

Хотя в желаемом выводе вы показали массив JSON со строковыми ключами, который не является правильным синтаксисом.Я надеюсь, что это опечатка, и вам нужен объект JSON.

Да, вы правильно перебираете tr, используя jQuery .each.Следующее с вспомогательной функцией для разбора tr должно сделать работу:

function parseTr(tr) {
  const keyMap = ['txttitle', 'txtName', 'txtAddrs'];
  let trObj = {};
  tr.find('td').each(function(i, td) {
    trObj[keyMap[i]] = $(this).text();
  });
  return trObj;
}

let tableObj = { 'head': {}, 'body': [] };
$(document).ready(function() {
  $('.table-out tr').each(function(i, tr) {
     if($(this).hasClass('header')) {
       tableObj['head'] = parseTr($(this));
       tableObj['head']['order'] = i;
     } else {
       let parsedTr = parseTr($(this));
       parsedTr['order'] = i;
       tableObj['body'].push(parsedTr);
     }
  });
  console.log(tableObj);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class='table-out'>
   <tr class='header'>
      <td>title</td>
      <td>name</td>
      <td>address</td>
   </tr>
   <tr>
      <td>Mr.</td>
      <td>John Doe</td>
      <td>St. Michael Rd.</td>
   </tr>
   <tr>
      <td>Mr.</td>
      <td>Daniel Kautman</td>
      <td>St. Michael Rd.</td>
   </tr>
</table>

Вы должны увидеть объект JavaScript в качестве вывода консоли, однако, если вы хотите строку JSON, вы можете использовать JSON.stringify для этого объекта:

JSON.stringify(tableObj);

Answer 5

Вы можете перебирать каждую строку и добавлять свойства следующим образом:

var tableObj = {
    head: {},
    body: [{}]
};

function ObjectTemplate(title, name, address) {
    this.txttitle = title;
    this.txtName = name;
    this.txtAddrs = address;
}

$(".table-out tbody tr").each(function(rowIndex, row) {
    var title, name, address, bodyObj;
    if (row.className == "header") {
        bodyObj = true;
    } else {
        bodyObj = false;
    }
    $(row + " td").each(function(index, cell) {
        switch (index) {
            case 0:
                title = cell.text();
            case 1:
                name = cell.text();
            case 2:
                address = cell.text();
        }
    });
    var newObject = new ObjectTemplate(title, name, address);
    if (bodyObj) {
        tableObj[body].push(newObject);
    } else {
        tableObj[head] = newObject;
    }
});