преобразовать динамическую таблицу в массив - PullRequest
Новая
       18

преобразовать динамическую таблицу в массив

0 голосов
/ 13 января 2019

У меня есть таблица с динамическим обновлением (спасибо тем, кто помог с моим последним запросом на публикацию / подписку), и я хотел бы сохранить данные каждой обновленной строки в массив, который я затем вставлю в коллекцию mongodb. Моя таблица выглядит следующим образом: 

<template name="choral">
<div class="container" style="padding-top: 25px">
  <div class="table-responsive">
    <form id="orderForm">
    <table id ="productList" class="table table-borderless table-dark">
      <thead class="thead-light">
        <tr>
            <th>Title:</th>
            <th>See the Music:</th>
            <th>Hear the Music:</th>
            <th>Format:</th>
            <th>Price (per copy):</th>
            <th>Quantity:</th>
        </tr>
      </thead>
      <tbody>
         {{#each pieces}}
        <tr id="itemList">
            <td id="name">{{name}}</td>
            <td id="pdf">PDF</td>
            <td id="audio">AUDIO</td>
            <td id="format">FORMAT</td>
            <td id="price">{{score}}</td>
            <td id="qty"><input type ="number" name ="quantity"></td>
        </tr>
        {{/each}}
      </tbody>
      <tfoot>
            <tr>
                <td colspan="5"></td>
                <td><button id ="#addItems" class="button" type ="submit">Add to Cart</button></td>
            </tr>
        </tfoot>
  </table>
  </form>
  </div>
</div>

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

Template.choral.events({
'click #addItems': function(e){
    e.preventDefault();
    var cartItem =[];

    $('#itemList tr').each(function(){
        var item = [];
        var name = $('#name',this).val();
        var price = $('#price',this).val();
        var qty = $('#qty',this).val();
            item.push({name, price, qty});
            cartItem.push([item]);
    });
    console.log(cartItem)
}

});

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

cartItems [{name1, price1, qty},{name2, price2, qty}]

1 Ответ

0 голосов
/ 13 января 2019

Прежде всего, не создавайте идентичные id свойства в сгенерированном HTML - это недопустимо. Вместо этого используйте class, например: 

    {{#each pieces}}
    <tr class="itemList">
        <td class="name">{{name}}</td>

... и т. Д.

Во-вторых, селектор jQuery $('#itemList tr') ничего не выбирает, потому что #itemList не содержит никаких tr потомков, а вместо этого сам a tr. Таким образом, вместе с предыдущим замечанием селектор должен быть $('tr.itemList').

Затем в своем коде jQuery выберите по атрибуту класса (используя .) и сделайте это в контексте this, чтобы соответствовать только в текущей строке: 

var cartItem =[];

$('tr.itemList').each(function() {
    var name = $('.name', this).val();
    var price = +$('.price', this).val(); // convert to number?
    var qty = +$('.qty', this).val(); // (idem)
    var item = {name, price, qty}; // just assign to item
    cartItem.push(item); // don't use square brackets here
});

Возможно, вы захотите, чтобы цена и количество были преобразованы в числа. В этом случае используйте одинарный + (см. Выше).

Не думаю, что вы хотите, чтобы item был массивом, а просто объект с тремя свойствами.

Обратите внимание также на исправление в аргументе push.

...