Как передать объект экспресс-ответ на фронтенд на JS объект

Мой контроллер отправляет данные lat / lng в мой вид руля через res. render. 

res.render('coords', viewModel);

'viewModel' содержит массив объектов, каждый из которых содержит имя местоположения, lat и lng. Я хочу взять эту информацию и построить маркеры на карте Google в моем представлении. Когда я пытаюсь ввести данные через руль в встроенную переменную JS...

<script>
var viewMarkers = {{viewModel}};
console.log(viewMarkers);
</script>

Я получаю это в своей консоли...

<script>
var viewMarkers = [object Object],[object Object];
console.log(viewMarkers);
</script>

Я только новичок в области Node/Express и не могу показаться чтобы понять, как я могу передать данные viewModel в Google maps JS на интерфейсе. Я думаю, что мне нужно будет сделать запрос AJAX, чтобы получить доступ к данным. Несмотря на это, я прочесал интернет, но пока не наткнулся на пример этого и мог бы использовать некоторые рекомендации сообщества.

Я ценю любые знания / помощь.

1 2
javascript node.js handlebars.js frontend

1 ответ:

Вы должны иметь в виду, что рули' работа состоит в том, чтобы вернуть строки. Теги mustache, {{}}, оценивают ссылки на объекты как строки, чтобы результирующий текст можно было добавить в тело ответа DOM или HTTP. JavaScript внутри ваших тегов <script> не будет выполняться до тех пор, пока он не поступит на клиент. Для Handlebars нет способа вернуть ссылку на объект, которая могла бы пережить рендеринг на стороне сервера и в конечном итоге получить назначение переменной на сервере. клиент.

[object Object],[object Object] является результатом, когда массив из двух объектов строится (т. е., это вывод вызова console.log(String([{}, {}])); в консоли вашего браузера.

Чтобы доставить код JavaScript клиенту, вы должны построить свой шаблон, чтобы возвращать строку с допустимым JavaScript таким же образом, как типичный шаблон возвращает допустимый HTML.

Длинный способ сделать это будет примерно следующим: 

<script>
    var viewMarkers = [
        {{#each viewModel}}
            {
                location: '{{location}}',
                lat: {{lat}},
                lng: {{lng}}
            }
            {{#unless @last}},{{/unless}}
        {{/each}}
    ];
</script>

Более простым способом достижения этого было бы иметь JSON.stringify выполните работу по построению вашего массива: 

res.render('coords', { viewModel: JSON.stringify(viewModel) });

Затем для визуализации JavaScript вам нужно будет сделать только следующее в вашем шаблоне: 

var viewMarkers = {{{viewModel2}}};
Обратите внимание, что мы должны использовать тройные усы, чтобы не иметь наши кавычки HTML-экранированные Handlerbars.

Я создал скрипку для вашей справки.

3