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）{}循环。这是获取已添加到本地存储的对象字典的值。 console.log（data）看起来像这样：{ rJUg4uiGl: { productPrice: '78.34', count: 1 }, BJ_7VOiGg: { productPrice: '3000', count: 3 } }

data [i] .count专门从每个项目中获取计数。我需要这个for循环来生活在while循环中，这样对于每个项目我都可以得到它的计数并将其打印到表中。当for循环生活在while循环之外时（它当前是怎样）我得到了正确的信息。我可以让表格显示任何数据的唯一方法是将其设置为一个变量，然后只将最新的数据打印到表格中。但是当我把它作为循环并把它放在while循环中，所以它创建了另一个带有count的td元素时，表就会破坏。

知道如何将此计数信息打印到此表中的最佳方法是什么？似乎for循环可以存在于while循环中，但是当我这样做时，代码/应用程序根本不开心。任何帮助是极大的赞赏。

Answer 1

在while循环中，当前产品ID为：

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

要获取给定产品ID的data计数，请将其用作购物车条目词典中的键：

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函数，这些函数接受＆＃34;本地人＆＃34 ;对象在运行时，可以包含在客户端JS中。它确实会使您的网站有效负载变得臃肿，但它绝对值得。

使用Grunt和grunt-contrib-pug进行预编译步骤：

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

如何在nodejs

2 个答案: