web-dev-qa-db-fra.com

Passage d'un tableau à un objet JSON pour le rendu Jade

J'ai un serveur node.js écrit en express et à un moment donné, j'envoie un tableau à une page .jade. Le problème est que lors du rendu de la page Jade, le compilateur Jade convertit le tableau en [object Object] et le compilateur JavaScript sur Chrome se plaint à ce sujet en disant "Identifiant inattendu".

Ceci est le code Jade:

!!! 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();

Comme vous pouvez le constater, c’est très simple, je remplis simplement une division avec les informations données par le contenu de la variable #{ranking} transmise par node.js à Jade. L'alerte sur la deuxième ligne ne se déclenche pas car l'erreur d'identificateur inattendu se produit dès que j'essaie d'attribuer la variable #{ranking}.

Ce qui suit est le code dans mon node.js avec express

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

Je crée un objet avec un tableau de résultats, j'insère les résultats trouvés dans la requête et les passe au moteur de rendu. L'appel console.log(results) imprime l'objet result correctement, par exemple comme ceci:

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

Je ne sais pas vraiment comment gérer la variable transmise à la page Jade. Peu importe ce que je fais, je reçois toujours l'erreur «Identificateur inattendu». Quelqu'un d'entre vous sait-il comment résoudre ce problème?

Merci

node.jspug
15
Masiar

En examinant les commentaires ci-dessus et en recherchant un peu plus, voici ce que j'ai trouvé efficace:

Utilisez ceci sur votre javascript (/ controller):

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

Et sur le modèle de jade:

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

Cela fonctionne parce que! {} N'effectue pas l'échappement.

31
luismreis

Cela fonctionne pour moi.

JSON.stringify le tableau (ou tout objet JSON arbitraire vraiment) sur le serveur, puis JSON.parse sur le client.

du côté serveur:

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

côté client:

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

Parce que j'utilise aussi le tableau du contrôleur pour l'itération, j'ai fait ceci:

res.render('template', pArrayOfData);

Et dans le code de jade:

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

J'ai rencontré le même problème et j'ai pu le faire fonctionner avec une légère variation (grâce aux solutions ci-dessus). 

De mon code:
Backend:

Stringify le tableau JSON

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

L'extrémité avant:

Stringify à nouveau avec le! {}

    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