私はショッピングカートのアプリケーションを使っています。ユーザーはローカルストレージを使用してその情報を保管しているカートに商品を追加します。ユーザーがビューカートページにアクセスすると、ページにはすべての製品のビューとユーザーがその特定の製品をカートに追加した回数が表示されます。だから私がやっているのは、ajaxリクエストを使って、ローカルストレージ内のアイテムをバックエンドに送ることです。私は関連情報を見つけ、そのデータをバックエンドで作成し、フロントエンドにajax経由で送信します。nodejsのwhileループ内でforループを正しく使う方法
ここでは、データを受信してテーブルを構築して、フロントエンドに戻すコントローラです。
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 } }
data [i] .countは、特に各項目からカウントを取得しています。私はwhileループの中で暮らすためにこれを必要とするので、各項目について、その数を取得してテーブルに出力することができます。 forループがwhileループの外側にあるとき(現在の状態)、正しい情報が得られます。そのデータを表示するためにテーブルを取得する唯一の方法は、それを変数に設定して、最新のデータをテーブルにのみ印刷することです。しかし、私がループのためにそれを取ってwhileループの中に入れて、カウントを持つ別のtd要素を作成すると、テーブルは単に破損します。
このカウント情報をこの表に印刷するにはどうすればよいでしょうか? forループはwhileループの中で生きているようですが、コード/アプリケーションは私がそうしても幸せではありません。どんな助けでも大歓迎です。あなたのwhileループ内
本当にこの問題を単純化する必要があります。これはあまりにも多くの説明と簡単な問題の可能性があるもののためのコードです。問題が依然として存在するが、無関係なコードはすべて削除されるように、コードを減らしてください。あなたがそれをするときにあなた自身の問題を解決するかもしれません。 – Carcigenicate
whileループの中で、 'results [i] [0] .productId'は現在の製品のIDですか?これは、その製品のカートエントリの辞書のキーです。 – qxz
さて、私はそれを細部まで細分化しました。 forループとwhileループだけを表示するようにコードを更新することができます。私はいつもより多くの情報が十分ではないと感じています。また、これは私の問題を全く形式で答えることができませんでした。 – Zgbrell