Как написать функцию, которая создаст объект JS из таблицы HTML?

Question

[Максим]

Всем привет! Я новичок в разработке, поэтому мой вопрос кому может показать глупым :) Но все же, надеюсь на помощь.

Подскажите, пожалуйста - есть таблица

<table>
     <tr>
         <th>Name/th>
         <th>ID</th>
    </tr>
    <tr>
         <td>First</td>
         <td>1</td>
    </tr>
    <tr>
         <td>Second</td>
         <td>2</td>
    </tr>
</table>

хочу написать функцию, которая получает данные таблицы и генерирует объект JS. Мой код с комментариями ниже, подскажите в каком направлении двигаться, заранее всем спасибо!

//Выбираем таблицу на странице
var table = document.querySelector('table');

//Создаем пустой объект, куда будем передавать данные из tr
var finalObject = {};

//Пишем функцию
function objectBuilder(table) {

    // Выбираем елемент tr из которого будем строить объект
    var object = document.querySelector('tr');

    //Перебераем элемент tr 
    for(var i = 0; i < object.length; i++) {
        finalObject = i;
    }
    
}

Comments

[0xD34F]

есть таблица

Какая таблица, где? Не врите, нет никакой таблицы.

[Сергей Соколов]

Оберните код в вопросе в тег code

[Максим]

0xD34F, Таблица в html, сюда не вставлял

[Максим]

Сергей Соколов, Спасибо, поправил! Не знал, первый вопрос все таки :)

[alex]

Максим, ну и? конкретно что не получается?

finalObject = i;

это вообще че?

которая создаст объект JS из таблицы HTML

какой объект? из какой таблицы? да подожди не отвечай, щас мы с соседом телепатом тебе все сделаем

[0xD34F]

Максим,

Таблица в html, сюда не вставлял

Действительно, зачем сообщать информацию, имеющую непосредственное отношение к вопросу? Ведь и так можно догадаться, что там у вас и как - мы тут все телепаты. Так что вы решили совершенно правильно, что таблицу (как и пример объекта, который должен получиться) показывать не следует.

[Максим]

Alex, 0xD34F, вставил таблицу, не получается продумать логику до конца

Answer 1

[Сергей Соколов]

Разбейте сложную задачу на составные простые и решайте их по одной.

Например, для начала получите не объект, а массив строк таблицы.

spoiler

const rowsNodeList = document.querySelectorAll("table tr");  // это еще не Array
const rowsArray = Array.prototype.slice.call(rowsNodeList);

Или, когда имеется в распоряжении DOM объект строки, как из него вытащить все ячейки?

spoiler

const rowOne = document.querySelector("table tr");
const tdNodeList = rowOne.querySelectorAll("td"); // подумайте, как сюда же включить и все <th>
const tdArray = Array.prototype.slice.call(tdNodeList);

В вашем коде первая ошибка: не представляете, что хотите получить в итоге. Наверное, не объект, а массив массивов? Там же упорядоченный набор строк, в каждой строке упорядоченный набор ячеек.
Вторая ошибка, document.querySelector('tr') всегда будет возвращать самую первую строку в самой первой таблице в документе.

Answer 2

[0xD34F]

function getTableData(table) {
  const [ head, ...rows ] = table.querySelectorAll('tr');
  const keys = Array.from(head.cells, n => n.innerText);

  return rows.map(tr => keys.reduce((obj, key, i) => {
    obj[key] = tr.cells[i].innerText;
    return obj;
  }, {}));
}


const tableData = getTableData(document.querySelector('table'));