Я хочу преобразовать таблицу HTML в массив JSON в угловых 2

Question

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

Вот мой стол, как

<table>
   <tr> 
    <th> Name </th> 
    <th> Age </th> 
   </tr>
   <tr>  
     <td> foo </td> 
     <td> 20 </td> 
   </tr>
   <tr> 
      <td> Boo </td> 
      <td> 24 </td> 
   </tr>
</table>

Я хочу получить желаемый вывод в формате jSON следующим образом

[{  
  Name: 'Foo',
  Age: 20
},{
  Name: 'Boo',
  Age: 24
}]

Может кто-нибудь помочь, пожалуйста?

Answer 1

Здравствуйте, вы можете сделать так:

const html = `<tr> 
<th> Name </th> 
<th> Age </th> 
</tr>
<tr>  
 <td> foo </td> 
 <td> 20 </td> 
</tr>
<tr> 
  <td> Boo </td> 
  <td> 24 </td> 
</tr>`;
// For plug and play sample, i just create dummy table.
const tableEl = document.createElement('table');
tableEl.innerHTML = html;


const output = [];
// Little trick to make querySelectorAll as iterable by foreach.
[].forEach.call(
    tableEl.querySelectorAll('tr'),
    //Uncomment for TypeScript strong type : (lineElement: HTMLElement) => {
    (lineElement) => {
        const rows = lineElement.querySelectorAll('td');
        if(rows.length >= 2) {
            output.push(
                {
                    name : rows[0].innerText,
                    age : rows[1].innerText,
                }
            );
        }
    });

console.log(output);

__ ОБНОВЛЕНИЕ 1: обнаружение динамических атрибутов с ___

const html = `<tr> 
<th> Name </th> 
<th> Age </th> 
</tr>
<tr>  
 <td> foo </td> 
 <td> 20 </td> 
</tr>
<tr> 
  <td> Boo </td> 
  <td> 24 </td> 
</tr>`;
// For plug and play sample, i just create dummy table by programming way
const tableEl = document.createElement('table');
tableEl.innerHTML = html;

const output:any[] = [];
const keys: string[] = [];
// Little trick to make querySelectorAll as iterable by foreach.
[].forEach.call(
    tableEl.querySelectorAll('tr'),
    (lineElement: HTMLElement) => {
        const rows = lineElement.querySelectorAll('td,th');
        /**
         * If is th tag, we store all items to keys array.
         */
        if(rows[0].nodeName === 'TH') {
          //We replace remove all whitespace char from key.
          rows.forEach((e:HTMLElement) => keys.push(e.innerText.replace(/\s*/g,'')));
        }        
        else {
          // We craft dynamically item object.
          let item: any = {};
          keys.forEach((key, index) => {
              // We use keys array to populate it.
              item[key] = rows[index].innerHTML;
          });
          //We Store it
          output.push(item);
        }
    });

console.log(output);

отказ от ответственности:

Этот сценарий предполагает, что у вас есть только один tr с th внутри AND, это первый tr вашей таблицы. до вас, чтобы изменить этот код на ноги на другое поведение

Онлайн образец