1

Хочу обновлять строки в таблице из полученного по ajax jsonа. С помощью каких инструментов удобнее всего можно решить такую задачу?

Выглядит это примерно вот так:

data = {items: [
    {'id': 1, 'name': 'Element 1', 'qty': 100},
    {'id': 2, 'name': 'Element 2', 'qty': 150},
    {'id': 3, 'name': 'Element 3', 'qty': 200},
    {'id': 4, 'name': 'Element 4', 'qty': 250},   
]}
<section class="wrapper">
    <!-- Заголовки -->
    <div class="row">
        <div>Название</div>
        <div>Количество</div>
        <div>Удалить</div>
    </div>

    <!-- Для каждого элемента JSON нужно "на лету" сгенерить такую строку -->
    <div class="row">
        <div>{{name}}</div>
        <div>{{qty}}</div>
        <div class="delete" data-element-id="{{id}}"></div>
    </div>
</section>

1 ответ 1

2

А какие вы хотите здесь инструкменты? цикл по массиву, формирование строки, присоединение к DOM.

На ES2015 так:

data = {items: [
    {'id': 1, 'name': 'Element 1', 'qty': 100},
    {'id': 2, 'name': 'Element 2', 'qty': 150},
    {'id': 3, 'name': 'Element 3', 'qty': 200},
    {'id': 4, 'name': 'Element 4', 'qty': 250},   
]};


data.items.forEach(function(v){
    var row = `<div class="row">
                <div>${v.name}</div>
                <div>${v.qty}</div>
                <div class="delete" data-element-id="${v.id}"></div>
               </div>`;
    $(row).appendTo(".wrapper");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<section class="wrapper">
    <!-- Заголовки -->
    <div class="row">
        <div>Название</div>
        <div>Количество</div>
        <div>Удалить</div>
    </div>
</section>

либо можете скрытую строку-шаблон в верстку вставить, потом клонировать ее, заменять значения и добавлять

5
  • В итоге я примерно так и сделал. Но столкнулся с проблемой, что к добавленным элементам нельзя обратиться, по классу или id. Видимо потому что они созданы позже, чем сформировалась DOM. Не знаете как это решить? 31 мая 2019 в 7:24
  • @КонстантинКомиссаров если под "нельзя обратиться" вы имеете в виду, что не работают обработчики различные, то вешать их надо в виде $(".wrapper").on("click", ".delete", function(){ .... }) а не $(".delete").click(...)
    – teran
    31 мая 2019 в 7:52
  • идею понял, а как в таком случае получить какое-то значение в функции из .delete, как если бы я использовал $(this), если бы вешал событие клика на .delete? 31 мая 2019 в 7:55
  • 1
    @КонстантинКомиссаров тут ничего не меняется. $(this) будет указывать на кликнутый .delete
    – teran
    31 мая 2019 в 7:59
  • Спасибо! Попробую) 31 мая 2019 в 8:00

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.