2016-12-11 12 views
0

私はショッピングカートのアプリケーションを使っています。ユーザーはローカルストレージを使用してその情報を保管しているカートに商品を追加します。ユーザーがビューカートページにアクセスすると、ページにはすべての製品のビューとユーザーがその特定の製品をカートに追加した回数が表示されます。だから私がやっているのは、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ループ内

+0

本当にこの問題を単純化する必要があります。これはあまりにも多くの説明と簡単な問題の可能性があるもののためのコードです。問題が依然として存在するが、無関係なコードはすべて削除されるように、コードを減らしてください。あなたがそれをするときにあなた自身の問題を解決するかもしれません。 – Carcigenicate

+0

whileループの中で、 'results [i] [0] .productId'は現在の製品のIDですか?これは、その製品のカートエントリの辞書のキーです。 – qxz

+0

さて、私はそれを細部まで細分化しました。 forループとwhileループだけを表示するようにコードを更新することができます。私はいつもより多くの情報が十分ではないと感じています。また、これは私の問題を全く形式で答えることができませんでした。 – Zgbrell

答えて

1

、現在の製品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++; 
    } 
+0

あなたは神が今日私の友人を送ることされています。私はこれと同じことをやろうとしていました。私の問題は、whileループの中でそれをやっていないということでしたが、明らかに問題を引き起こしていた関数の最上部でテストを行っていました。私はこれをやっていてwhileとforループの上にそれを印刷していました。私はこの答えを更新して、これを正しく動作させるためにコードで何をしたのかを示します。しかし、これはもう一度トリックを行った。 – Zgbrell

+0

あなたにとても多くの++++++!このプロセスに対処するために、私が今日あなたに与えてくれたすべての助けを借りて、あなたに昼食を取ってもらったり、5人に謝ったりしていますあなたは十分に感謝し、期限内に私の質問は以下のような初心者になることを期待しています。:) – Zgbrell

+0

問題はありません。あなたのプログラミングのjouneyに幸運 – qxz

0

あなた -AJAXレンダリングにpugのようなテンプレートライブラリを使用していると仮定すると、あなたは受け入れるJavaScript関数にテンプレートをプリコンパイルすることができます」クライアント側の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, ...}); 
関連する問題