Записать в json массив данные

275

04 июня 2018, 19:10

есть таблица, как записать данные с ячеек в json массив вида {data-name: "значение ячейки" }

<table  class="heavyTable" contenteditable="true">
                    <thead>
                        <th>Date</th>
                        <th>Due Date</th>
                        <th>RUB</th>
                        <th>EUR</th>
                        <th>Debit</th>
                        <th>Credit</th>
                        <th>Balanse</th>
                    </thead>
                    <tbody>
                        <tr data-id="" data-new="0">
                            <td data-name="hdate">1</td>
                            <td data-name="duedate">2</td>
                            <td data-name="rub">3</td>
                            <td data-name="eur">1</td>
                            <td data-name="debit">2</td>
                            <td data-name="credit">3</td>
                            <td data-name="balanse">3</td>
                        </tr>
                        <tr data-id="" data-new="0">
                            <td data-name="hdate">1</td>
                            <td data-name="duedate">2</td>
                            <td data-name="rub">3</td>
                            <td data-name="eur">1</td>
                            <td data-name="debit">2</td>
                            <td data-name="credit">3</td>
                            <td data-name="balanse">3</td>
                        </tr>
                        <tr data-id="" data-new="0">
                            <td data-name="hdate">1</td>
                            <td data-name="duedate">2</td>
                            <td data-name="rub">3</td>
                            <td data-name="eur">1</td>
                            <td data-name="debit">2</td>
                            <td data-name="credit">3</td>
                            <td data-name="balanse">3</td>
                        </tr>
                        <tr data-id="" data-new="1">
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                    </tbody>
                </table>

я сделал запись в массив, но в консоле выдает пустые значения, и не могу понять как записать в json здесь

$(".save").click(function(){
let table = document.getElementsByTagName('table')[0];
let arr = table.children[1].children;
let results = [];
for (let j = 0; j < arr.length; j++) {
  for (let i = 0; i < arr[j].attributes.length; i++) {
    if (arr[j].attributes[i].name == 'data-new' && arr[j].attributes[i].value == 1) {
      for (let k = 0; k < arr[j].children.length; k++) {
        results.push(arr[j].children[k].innerHTML)
      }
      break;
    }
  }
}
console.log(results);
});

Answer 1

Написал по быстрому, на коленке, нужно будет доработаете:

Array.prototype.chunk = function (n) {
    if (!this.length) {
        return [];
    }
    return [this.slice(0, n)].concat(this.slice(n).chunk(n));
};
var table = $.parseHTML($('.heavyTable').html()),
        thead = $('th', table[0].children).toArray().filter(arr => arr.innerText),
        tbody = $('td', table[1].children).toArray().filter(arr => arr.innerText).chunk(thead.length),
        json = {},
        temp = [];

Дальше пишем:
Первый вариант циклами for:

for (var i = 0; i < tbody.length; ++i) {
    var arr = tbody[i];
    for (var l = 0; l < arr.length; ++l) {
        var key = thead[l].innerText.trim(), td = arr[l];
        !json[key] && (json[key] = {});
        json[key][$(td).data('name')] = td.innerText;
    }
    temp.push(json);
    json = {};
}

Второй вариант циклами forEach:

tbody.forEach((tb) => {
    tb.forEach((td, i) => {
        var key = thead[i].innerText.trim();
        !json[key] && (json[key] = {});
        json[key][$(td).data('name')] = td.innerText;
    });
    temp.push(json);
    json = {};
});

После этого делаем так:

json = JSON.stringify(temp);
console.log(json);

И получаем:

[{
    "Date": {
        "hdate": "1"
    },
    "Due Date": {
        "duedate": "2"
    },
    "RUB": {
        "rub": "3"
    },
    "EUR": {
        "eur": "1"
    },
    "Debit": {
        "debit": "2"
    },
    "Credit": {
        "credit": "3"
    },
    "Balanse": {
        "balanse": "3"
    }
}, {
    "Date": {
        "hdate": "1"
    },
    "Due Date": {
        "duedate": "2"
    },
    "RUB": {
        "rub": "3"
    },
    "EUR": {
        "eur": "1"
    },
    "Debit": {
        "debit": "2"
    },
    "Credit": {
        "credit": "3"
    },
    "Balanse": {
        "balanse": "3"
    }
}, {
    "Date": {
        "hdate": "1"
    },
    "Due Date": {
        "duedate": "2"
    },
    "RUB": {
        "rub": "3"
    },
    "EUR": {
        "eur": "1"
    },
    "Debit": {
        "debit": "2"
    },
    "Credit": {
        "credit": "3"
    },
    "Balanse": {
        "balanse": "3"
    }
}]

А вообще, есть еще библиотека, может пригодиться: Table To JSON, а тут можно глянуть пример

Создание интернет-магазина посуды в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Плавное изменение opacity при прокрутке

Помогите пожалуйста сделать плавную прокрутку блоков как на tv3 (https://tv3ru/) то есть изменение opacity в зависимости от высоты прокрутки

237

HTML

Как сделать <button>, активный только в определённый период времени?

Как сделать кнопку <button enabled>, чтобы было активно только в рабочее время? Например: с 10:00 до 18:00 была активна кнопка, а после 18:00 неактивна...

216

HTML

Кроссбраузерность

Решил окунуться в мир ВЕБа и возник вопросЯ понял что разные браузеры могут по разному отображать инфу и зачастую некоторые браузеры не поддерживают...

190

HTML

подключение штрафов на сайте

Кто нибудь сталкивался с необходимостью подключения API gibdd на проверку штрафов и тд

192