Как правильно использовать цикл for внутри цикла while в nodejs

Question

Я работаю над приложением корзины покупок. Пользователь добавляет свои продукты в корзину, которая использует локальное хранилище для хранения этой информации. Когда пользователь посещает страницу телезрителей, страница должна показывать все продукты и количество раз, когда пользователь добавил этот товар в корзину. Так что я делаю, отправляя элементы в локальном хранилище на задний конец, используя запрос ajax. Затем я нахожу аффилированную информацию и строю таблицу с этими данными на задней панели и отправляю ее на передний конец через ajax.

Вот контроллер, который принимает данные и строит таблицу, а затем отправляет их обратно на передний конец.

viewCartPost: function(req, res){ 
     var data = JSON.parse(req.body.data); 
     var keys = Object.keys(data); 
     //console.log(keys); 
     var promises = []; 
     for(var i = 0; i<keys.length; i++){ 
     var productId = keys[i]; 
     promises.push(Product.find({productId: productId}).select({productId : 1, addProductGroupName: 1, productName: 1, productPrice: 1, productDescription: 1, filePath: 1}).exec()); 
     } 
     Promise.all(promises).then(function(results) { 
      // you may have to reorganize results to be exactly what you want 
      // to return to the client 
      var cartTable = viewCartTable(results, data); 
      res.send("Success^^^"+cartTable); 
     }).catch(function(err){ 
      res.sendStatus(500); 
     }); 
    }, 

function viewCartTable(results, data){ 
    for(var i in data){ 
    console.log(data[i].count); 
    var count = data[i].count; 
    } 
    var len = results.length; 
    var i = 0; 
    var table = '<table class="table-striped table-bordered" id="tables">'; 
    table += '<thead>'; 
    table += '<tr>'; 
    table += '<th>Image</th><th>Product Name</th><th>Price</th><th>Amount</th><th>Description</th><th>Update</th>'; 
    table += '</tr></thead><tbody>'; 

    while(i < len){ 
    table += '<tr>'; 
    table += '<td><img src='+results[i][0].filePath+' alt="An Image" class="thumbnail-img" /></td>'; 
    table += '<td id = "productName">'+results[i][0].productName+'</td>'; 
    table += '<td id = "'+results[i][0].productPrice+'">$'+results[i][0].productPrice+'</td>'; 
    table += '<td>'+count+'</td>'; 
    table += '<td><button type="button" id="productDescription" class="btn btn-primary" name = "'+results[i][0].productId+'">Description</button></td>'; 
    table += '<td><button type="button" class="btn btn-success" id="updateCartBtn" name = "'+results[i][0].productId+'">Update</button></td>'; 
    table += '</tr>'; 
    i++; 
    } 
    table += '</tbody></table>'; 
    return table; 
} 

Все работает очень хорошо. Принять для цикла for (var i in data) {}. Это получает значения словаря объектов, которые были добавлены в локальное хранилище. console.log (data) выглядит так: { rJUg4uiGl: { productPrice: '78.34', count: 1 }, BJ_7VOiGg: { productPrice: '3000', count: 3 } }

Данные [i] .count специально получают счетчик от каждого элемента. Мне нужно это для цикла, чтобы жить внутри цикла while, так что для каждого элемента я могу получить его счет и распечатать его в таблице. Когда цикл for работает вне цикла while (как это сейчас), я получаю правильную информацию. Единственный способ заставить таблицу показать любую из этих данных - установить ее в переменную, которая затем выводит только последнюю часть данных в таблицу. Но когда я беру это за цикл и помещаю его внутри цикла while, он создает другой td-элемент со счетчиком, таблица просто ломается.

Любая идея, как наилучшим образом получить эту информацию о количестве распечаток в эту таблицу? Кажется, что цикл for может жить внутри цикла while, но код/​​приложение вообще не радует, когда я это делаю. Любая помощь приветствуется.

Answer 1

Внутри вашего цикла в то время, текущий код продукта:

var pID = results[i][0].productId; 

Чтобы получить количество в data для данного продукта ID, использовать его в качестве ключа в словаре записей корзину:

var count = data[pID].count; 

Вам не нужно перебирать каждую запись каждую итерацию цикла while; вы просто хотите ввести для текущего идентификатора продукта. Таким образом, цикл for не поможет вам. Просто проиндексируйте словарь.

Обновления петля во время выглядеть так:

while(i < len){ 
    var pId = results[i][0].productId; 
    table += '<tr>'; 
    table += '<td><img src='+results[i][0].filePath+' alt="An Image" class="thumbnail-img" /></td>'; 
    table += '<td id = "productName">'+results[i][0].productName+'</td>'; 
    table += '<td id = "'+results[i][0].productPrice+'">$'+results[i][0].productPrice+'</td>'; 
    table += '<td>'+data[pId].count+'</td>'; 
    table += '<td><button type="button" id="productDescription" class="btn btn-primary" name = "'+pId+'">Description</button></td>'; 
    table += '<td><button type="button" class="btn btn-success" id="updateCartBtn" name = "'+pId+'">Update</button></td>'; 
    table += '</tr>'; 
    i++; 
    } 

Answer 2

Предполагая, что вы используете библиотеку шаблонов как pug для , не -AJAX рендеринга, вы можете перекомпилировать шаблоны в функцию JavaScript, которые Примите " locals "во время выполнения и могут быть включены в JS на стороне клиента. Это делает ваш сайт более насыщенным, но он определенно стоит того.

Пример прекомпиляция шаг с Грантом и хрюкать-вно-мопса:

grunt.initConfig({ 
    pug: { 
     mysite: { 
      options: { 
       client: true, 
       data: {}, 
       processName: function (name) { 
        return name.replace(/^assets\//, '').replace(/.pug$/, ''); 
       } 
      }, 
      files: [{ 
       src: 'assets/**/*.pug], 
       dest: 'site/js/templates.js' 
      }] 
     }, 
    } 
}); 

Выходной сигнал templates.js содержит код, который создает словарь шаблон с именем JST, который вы можете включить в клиентской полезной нагрузки и вызова:

JST['path/to/template']({cartItems: results, ...});