如何在nodejs中的while循环中正确使用for循环

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（数据）看起来像这样：{ rJUg4uiGl: { productPrice: '78.34', count: 1 }, BJ_7VOiGg: { productPrice: '3000', count: 3 } }

数据[i] .count具体是从每个项目获取计数。我需要这个for循环在while循环中生存，以便每个项目都可以获得它的数量并将其打印到表格中。当for循环处于while循环之外（当前的状态）时，我会得到正确的信息。我可以让表格显示任何数据的唯一方法是将其设置为一个变量，然后该变量仅将最新的数据打印到表格中。但是当我把这个for循环放到while循环中时，它会创建另一个带count的td元素，表格就会中断。

任何想法如何获得此计数信息打印到此表中的最佳方式？看起来for循环可以存在于while循环中，但是当我这样做时代码/应用程序并不开心。任何帮助是极大的赞赏。

Answer 1

内部while循环，目前产品ID是：

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

为了得到计数data对于给定的产品ID，使用它作为钥匙插入车中的条目词典：

var count = data[pID].count; 

您不需要循环遍历while循环的每个迭代;您只需要输入当前产品ID。因此，for循环不会帮助你。只需索引字典。

更新while循环看起来像这样：

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中。它确实使您的网站有效负载较大，但绝对值得。有咕噜咕噜-的contrib - 帕格

例预编译步骤：

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, ...});