Передача массива объекту JSON для рендеринга Jade

У меня есть сервер node.js, написанный в экспресс, и в определенный момент я отправляю на некоторую страницу .jade массив. Проблема в том, что при рендеринге страницы Jade компилятор Jade отображает массив как [object Object], а компилятор JavaScript в Chrome жалуется на это, говоря "Неожиданный идентификатор" .

Это код 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();

Как вы можете видеть, это действительно просто, я просто заполняю div информацией, данным тем, что внутри переменной #{ranking}, переданной node.js в Jade. Предупреждение во второй строке не срабатывает, потому что ошибка "Неожиданный идентификатор" возникает, как только я пытаюсь назначить переменную #{ranking}.

Ниже приведен код в 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. Что бы я ни делал, я продолжаю получать ошибку "Неожиданный идентификатор" . Кто-нибудь из вас знает, как я могу это решить?

Спасибо

Ответ 1

Взглянув на вышеприведенные комментарии и исследуя немного больше, вот что я нашел для работы:

Используйте это на своем javascript (/controller):

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

И на шаблон нефрита:

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

Это работает, потому что! {} не выполняет экранирование.

Ответ 2

Это работает для меня.

JSON.stringify массив (или любой произвольный объект JSON действительно) на сервере, а затем JSON.parse он на клиенте.

на стороне сервера:

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

на стороне клиента:

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

Ответ 3

Поскольку я также использую массив из контроллера для итерации, я сделал это:

res.render('template', pArrayOfData);

И в нефритовом коде:

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

Ответ 4

Я столкнулся с той же проблемой и смог заставить ее работать с небольшим изменением (благодаря решениям выше).

Из моего кода:
Backend:

Строка массива JSON

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

Frontend:

Снова нарисуйте с помощью! {}

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