Передача массива объекту 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();