javascript - ExpressJS で JavaScript に変数を渡す

Question

私はこれについて完全に迷っています。NodeJS を使用して JSON を取得しています。変数をページに渡し、JavaScript でデータを使用する必要があります。

app.get('/test', function(req, res) {
    res.render('testPage', {
        myVar: 'My Data'
    });

これが私の Express コードです (テスト目的では非常に単純です)。今EJSを使用して、ページにレンダリングすることがわかっているこのデータを収集したいのは単純です

<%= myVar %>

しかし、このデータを JavaScript で (可能であれば .js ファイル内で) 収集できるようにする必要がありますが、今のところ、試したアラートボックスに変数を表示するだけです。

ジェイドではalert('!{myVar}')またはのようなもの!{JSON.stringify(myVar)}です。EJSで同様のことを行うことはできますか? <input type=hidden>JavaScriptでフィールドの値を取得するようなフィールドは必要ありません。誰かが助けてくれるなら、大歓迎です

score 8 · Accepted Answer

配列のようなより複雑なオブジェクトがある場合は、これを行うことができます:

<% if (myVar) { %>
   <script>
      myVar = JSON.parse('<%- JSON.stringify(myVar) %>');
   </script>
<% } %>

そうしないと、これまでに見たソリューションは機能しません

score 4 · Accepted Answer

これを試して：

<script type="text/javascript">
     window.addEventListener('load', function(){
         alert('<%= myVar %>');
     });
</script>

score 0 · Accepted Answer

承認されたソリューションでは、myVar にエスケープされていない二重引用符を持つ値を持つプロパティがある場合、JSON.parse は失敗します。そのため、traverseObj をより適切に処理し、各文字列プロパティをエスケープします。

私のケースをカバーする関数は次のとおりです。

function traverseObj (obj, callback)
{
    var result = {};
    if ( !isArray(obj) && !isObject(obj) ) {
         return callback(obj);
    }

    for ( var key in obj ) {
        if ( obj.hasOwnProperty(key) ) {
            var value = obj[key];
            if (isMongoId(value)){
                var newValue = callback(value.toString());
                result[key] = newValue;
            }
            else if (isArray ( value) ) {
                var newArr = [];
                for ( var i=0; i < value.length; i++ ) {
                    var arrVal = traverseObj(value[i], callback);
                    newArr.push(arrVal);
                }
                result[key] = newArr;
            }
            else if ( isObject(value) ) {
                result[key] = traverseObj(value, callback);
            }
            else {
                var newValue = callback(value);
                result[key] = newValue;
            }
        }
    }
    return result;
};

ejs よりも、次のことを行う必要があります。

<%
    var encodeValue = function(val) {
        if ( typeof val === 'string' ) {
            return sanitizeXSS(val); //use some library (example npm install xss)
        }
        return val;
    }

    var encodedProduct = ejs_utils.traverseObj(product, encodeValue);
%>

これで、エスケープされていない構文で安全に転送できます

window.product = <%-JSON.stringify(encodedProduct)%>;

score 0 · Accepted Answer

ここのドキュメントに従って：

最新リリースに移動し、./ejs.js または ./ejs.min.js をダウンロードします。

これらのいずれかをページに含めますejs.render(str)。

javascript - ExpressJS で JavaScript に変数を渡す

8 に答える 8

Related

Reference