Доступ к данным MongoDB в теге <script> - PullRequest
Новая
       10

Доступ к данным MongoDB в теге <script>

0 голосов
/ 26 апреля 2019

Я передаю данные MongoDB в мой файл EJS.Я могу получить доступ к данным с помощью тегов <% %> в моем HTML.Проблема, с которой я сталкиваюсь, заключается в том, что мне нужен доступ к данным внутри моего тега <script>, а теги <% %> больше не работают.

Вещи, которые я пробовал:

Добавление данных к скрытому вводу и доступ к ним с помощью document.getElementById().value

Я пытался исследовать любые примеры использования данных монго втег сценария, но большинство ответов связано с <% %> в HTML / EJS

locationSchema 

const locationSchema = new Schema({

    lat: String,
    lng: String,
    title: String

});

app.js 

app.get('/', function(req,res){

    Locations.find({}, (err, results) => {
        if (err) {
            return res.render.status(500).send('<h1>ERROR</h1>');
        } else{
            console.log(results)
            res.render('homePage',{results, Locations, req});
        }
    });
});

ejs 

<!-- ejs_views/homePage.ejs -->

<!doctype html>
<html lang = "en">

<!-- displays head.ejs-->
<head>
    <% include head %>
    <style>
        #map{
            height:400px;
            width: 100%;
        }
    </style>
</head>

<!-- displays header.ejs-->
<body class = "container">
<header>
    <% include header %>
</header>

<!-- Edit the body of the front end here-->
<main>
    <div class = "jumbotron">
        <h1>This is great</h1>
        <p>Testing out EJS</p>
    </div>
    <div id = "map"></div>

    <% for (const location of results) { %>
        <h1> <%= location.title %></h1>
        <h1> <%= location.lat %></h1>
        <h1> <%= location.lng %></h1>
    <% } %>

    <script> 
        function initMap(){

            //SYNTAX ERROR HERE ON <% AND %>
            const locationResults = <% JSON.stringify(results) %>;
            //Map Options to dictate zoom and position
            var options = {
                zoom: 16, 
                center: {lat:35.6543936, lng: -97.4714266}
            }
            //init map for view
            var map = new google.maps.Map(document.getElementById('map'), options);

            /*var marker = new google.maps.Marker({
                position:{lat: 35.654243, lng: -97.472937 },
                map: map,
                title: 'Math And Computer Science'
            });*/

            //addMarker({coords:{lat:35.6543936, lng: -97.4714266}, title: "TestCase"});
            //iterateFunc();
            results.forEach(location => addMarker({coords: {lat: location.lat,lng: location.lng}, title: location.title}))

            //Add Marker Function
            function addMarker(props){
                var marker = new google.maps.Marker({
                    position: props.coords,
                    map:map,
                    title: props.title
                })

            }
        }
    </script>


</main>
<!-- displays footer.ejs-->
<footer>
    <% include footer %>
</footer>
<script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAftGHvJnejXQm5k1jiLiBRsRwm5SXqzm8&callback=initMap">
</script>

</body>
</html>

Ожидаемые результаты:

может циклически проходить монгодаты в моем скрипте и использовать их в функции addMarker

Фактические результаты:: [

Ответы [ 2 ]

0 голосов
/ 26 апреля 2019

Я бы просто записал переменную и использовал ее в функции 

<script>
const locationResults = <%= JSON.stringify(results, null, '\t\) %>;
// Now you don't have to loop in the template, you can loop on the client
locationResults.forEach(location => addMarker({ coords: {lat: location.lat, lng: location.lng}, title: location.title }));
</script>
0 голосов
/ 26 апреля 2019

Попробуй это.В вашем файле app.js визуализируйте results в виде строки JSON следующим образом. 

res.render('homePage',{results: JSON.stringify(results)});

Теперь в вашей homepage.ejs используйте это: 

const locationResults = <%- results %>

Обратите внимание, что это может вызвать некоторые ошибкикак "Выражение ожидается .js" в вашей IDE.Просто игнорируй это.Возможно совместимость VS Code с ejs файлами

...