Невозможно получить доступ к JSON в шаблоне E JS внутри скрипта - PullRequest
Новая
       107

Невозможно получить доступ к JSON в шаблоне E JS внутри скрипта

1 голос
/ 30 мая 2020

Я пытаюсь создать веб-приложение, которое отображает динамические c диаграммы на основе JSON, переданного от узла к стороне клиента.

Однако я не могу получить доступ к переменной json внутри <script> . Я протестировал объект JSON, используя 

console.log(<%= data %>)

, он там появляется.

Код моего узла выглядит так: 

let ltlasJSON = JSON.parse(ltlasData);

app.get("/results", function(req, res){
    var query = req.query.postalCode;
    var url = "http://api.postcodes.io/postcodes/" + query;

    request(url, function(error, response, body){
        if(!error && response.statusCode == 200){
            var data = JSON.parse(body);
            var adminDistrict = data["result"]["codes"]["admin_district"];
            var filtered = ltlasJSON.filter(a=>a.areaCode==adminDistrict);
            res.render("results", {data: filtered});
        }
    }
    );    
});

results.e js: 

<<!DOCTYPE html>
    <!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
    <!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
    <!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
    <!--[if gt IE 8]><!-->
    <html class="no-js">
    <!--<![endif]-->

    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Engliand Covid-19 </title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="style.css">
        <!-- Plotly.js -->
        <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
    </head>

    <body>
        <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->


    <h1>Results Page</h1>


    <script>
    var specimenDate = <%= data.areaCode %>
    var cases = <%= data.dailyLabConfirmedCases %>
    var data1 = [
            {
                x: specimenDate,
                y: cases,
                type: 'bar'
            }
        ];
        Plotly.newPlot('myDiv', data);
    </script>
</body>

</html>

Я новичок в node и e js. Конечная цель - передать массив JSON (два поля) в переменных x и y объекта plotly.

enter image description here

1 Ответ

1 голос
/ 30 мая 2020

Я вижу здесь две проблемы:

1) Вы неправильно передаете данные во внешний интерфейс javascript. <%= всегда неверно, потому что он кодирует HTML сущностей, но мы находимся в теге сценария JS, а не в обычном HTML. Вместо этого вы хотите передать его как JSON, используя JSON.stringify, и использовать <%-, чтобы предотвратить HTML -кодирование: 

var specimenDate = <%- JSON.stringify(data.areaCode) %>

Тем не менее, здесь по-прежнему есть две проблемы: Во-первых, JSON.stringify(undefined) создаст undefined (а не строку), которая станет пустым выводом после <%-, поэтому вы получите синтаксическую ошибку в случае, если значение не было определено. Во-вторых, строка, содержащая </script>, выйдет из блока сценария и нанесет ущерб c. Я бы рекомендовал использовать что-то вроде devalue вместо JSON.stringify.

2) Вы получаете доступ к data.areaCode, но я вижу, что data на самом деле происходит от filtered , а filtered является результатом вызова Array.prototype.filter, который возвращает массив всех совпадающих элементов. Тем не менее, вы обращаетесь к свойству areaCode, как если бы data был непосредственно одним из совпадающих элементов, а не массивом всех совпадающих элементов.

Если предполагается, что у вас есть массив, у вас есть на l oop над его записями или получить доступ к нему напрямую, например data[0].areaCode (но также вы должны убедиться, что data[0] всегда существует).

Если это не предназначено, вы просто использовал неправильный метод массива. Вы можете использовать Array.prototype.find для возврата первого совпадения или undefined в противном случае.

Пример: 

const db = [
  { areaCode: 1, text: 'A' },
  { areaCode: 2, text: 'B' },
  { areaCode: 2, text: 'C' }
]

console.log(db.filter(el => el.areaCode === 1)) // [{ areaCode: 1, text: 'A' }]
console.log(db.filter(el => el.areaCode === 2)) // [{ areaCode: 2, text: 'B' },
                                                //  { areaCode: 2, text: 'C' }]
console.log(db.filter(el => el.areaCode === 3)) // []

console.log(db.find(el => el.areaCode === 1)) // { areaCode: 1, text: 'A' }
console.log(db.find(el => el.areaCode === 2)) // { areaCode: 2, text: 'B' }
console.log(db.find(el => el.areaCode === 3)) // undefined
...