web-dev-qa-db-ja.com

JadeレンダリングのためにJSONオブジェクトに配列を渡す

私はnode.jsサーバーをエクスプレスで記述していて、ある瞬間にいくつかの.jadeページに配列を送信します。問題は、Jadeページをレンダリングするときに、Jadeコンパイラが配列を_[object Object]_としてレンダリングし、ChromeのJavaScriptコンパイラが「予期しない識別子」と文句を言うことです。

これはジェイドコードです：

_!!! 5
html(lang="en")
    head
    title= "Rankings"

    body
        h1 Ranking

        div(id="rankings")

    script(type='text/javascript')

        function fillRanking(){
            var rankArray = #{ranking};
            alert("inside fillranking");
            var divElement = document.getElementById("rankings");
            for(var i = 0; i< rankArray.length; i++){
                divElements.innerHTML += "" + i+1 + ". " + rankArray[i].Username + " " + rankArray[i].Points;
            }
        }

        fillRanking();
_

ご覧のとおり、非常に簡単です。node.jsからJadeに渡される_#{ranking}_変数内にある情報をdivに入力するだけです。 _#{ranking}_変数を割り当てようとするとすぐに予期しない識別子エラーが発生するため、2行目のアラートは発生しません。

以下は、expressを使用したnode.jsのコードです。

_app.get('/ranking', function (req, res) {
    //get the first ten people in the ranking
    var firstTen = getRanking(10, function(results){
        //compute the array of results
        var result = {
            ranking: [],
        }
        for(var i = 0; i < results.length; i++){
            result.ranking[i] = results[i];
        }
        //render the ranking with all the info
        console.log(result);
        res.render(__dirname + '/pages/ranking/ranking.jade', {
            ranking: result,
        });
    });
});
_

結果の配列内にオブジェクトを作成し、クエリから見つけた結果をその中に入れて、レンダリングエンジンに渡します。 console.log(results)呼び出しは、たとえば次のように、resultオブジェクトを正しく出力します。

_{ ranking: 
   [ { Username: 'usr1',
       _id: 4ed27319c1d767f70e000002,
       Points: 100 },
     { Username: 'usr2',
       _id: 4ed27326c1d767f70e000003,
       Points: 100 } ] 
}
_

Jadeページに渡された変数の処理方法がよくわかりません。どちらを実行しても、「予期しない識別子」エラーが発生し続けます。誰かが私がこれを解決する方法を知っていますか？

ありがとう

node.jspug
15
Masiar

上記のコメントを見て、もう少し調査すると、これが私がうまくいくことがわかったものです：

Javascript（/ controller）でこれを使用します：

...
res.render(__dirname + '/pages/ranking/ranking.jade', {
    ranking: JSON.stringify(ranking),
})
...

そして翡翠のテンプレート：

...
function fillRanking(){
  var rankArray = !{ranking};
  alert("inside fillranking");
...

これは、！{}がエスケープを実行しないために機能します。

31
luismreis

これは私にとってはうまくいきます。

JSON.stringifyサーバー上の配列（または実際には任意のJSONオブジェクト）そしてJSON.parseクライアントでそれ。

サーバ側：

res.render(__dirname + '/pages/ranking/ranking.jade', {
    ranking: JSON.stringify(result),
});

クライアント側：

var rankArray = JSON.parse( !{JSON.stringify(ranking)} );
10
Matt Kneiser

コントローラーの配列も反復に使用するため、次のようにしました。

res.render('template', pArrayOfData);

そして翡翠のコードでは：

script(type='text/javascript').
            var _histData = !{JSON.stringify(pArrayOfData)};
3
Razvan

私は同じ問題に遭遇し、わずかな変化でそれを機能させることができました（上記の解決策のおかげで）。

私のコードから：
バックエンド：

JSON配列を文字列化する

router.get('/', function(req, res) {
    var data = JSON.stringify(apiData);  // <====
    res.render('gallery', { data: apiData });
});

フロントエンド：

！{}で再度文字列化する

    function injectDataOnView() {

        var data = !{JSON.stringify(data)}; // <====
        var divElement = document.getElementById('data');
        divElement.innerHTML = data[1]['id']; // <=== just a test, so no for loop
    }

    injectDataOnView();
0
ng-hacker-319