Как перенести массивы из Node JS в HTML

Я запрашиваю данные из базы данных SQL Azure, следуя документации по документам Microsoft, используя NodeJS.

Теперь, когда у меня есть данные, я планирую визуализировать их с помощью Plotly.js в простом HTML. Но, честно говоря, я новичок в NodeJS и не знаю, как перенести данные (которые я хранил в JS-массивах) из скрипта Node JS и перехватить их в HTML (точнее, перехватить в Javascript код в<script></script> теги, чтобы я мог заполнить визуализацию Plotly.js).

Это было бы что-то вроде этого:

На скрипте Node.js:

  1. Получить данные из Azure (готово)
  2. Передайте данные в HTML или где-нибудь, где HTML может их поймать

В разметке HTML:

<html>
<head>
</head>
<body>
    <script>
        // CATCH THE DATA RIGHT HERE

        // PROCESS THE DATA USING PLOTLY.JS

        </script>
</body>
</html>

Я просматривал Restify и ExpressJS, но искренне я не получаю это так много, и я не нашел пример, который ловит данные в "javascript of html".

Я не прошу код (я не хочу, чтобы меня неправильно поняли. Тем не менее, какой-то пример был бы потрясающим), но я хотел бы знать, где я могу найти что-то похожее, инструмент, библиотеку или что-то, что могло бы помочь мне добиться этого.

Спасибо!

Источник

3 ответа

Сначала вместо создания сервера и API для обслуживания этих данных JSON вы можете вместо этого создать файл json с помощью модуля node fs, например:

const fs = require('fs');

//example of the data you got from the Azure SQL database
const data = [ 1, 2, 3, 4, 5, 6];

fs.writeFileSync('data.json', JSON.stringify(data));

Это создаст файл в текущем каталоге.

затем в своем HTML вы можете импортировать этот файл JSON, используя jQuery:

$.getJSON('data.json',function(data){
     //display your data however you want.    
     console.log(data);
})

Это должно работать без особых хлопот.

А если вы хотите выбрать более длинный маршрут, вы можете установить экспресс и написать небольшой экспресс-сервер с конечной точкой маршрута, которая обслуживает данные.

Источник

Я бы порекомендовал сделать то, что вы хотите, в два этапа:

  1. Реализуйте выделенную конечную точку для получения данных, которые должны быть визуализированы в виде строки JSON (GET /data/?whatever=1234)
  2. Запрограммируйте скрипт Plotly.js, чтобы запрашивать необходимые ему данные через AJAX и показывать его, как только DOM будет готов.

Основная идея заключается в том, что вы создаете ресурс для данных и URL для получения этого ресурса. Составление графика данных - это всего лишь одно приложение; Там может быть много других вещей, которые вы можете захотеть сделать с этим в будущем.

Источник

В C# у вас будет контроллер MVC, который будет заполнять шаблон данными, полученными из модели. Вы можете сделать то же самое с NodeJS/Express и движком шаблонов. В этом случае вы должны заполнить шаблон с помощью JavaScript (nodejs) перед отправкой в ​​браузер.

Другим вариантом будет использование структуры SPA, в которой вы используете SPA браузера для выполнения запросов AJAX на данные и отправки этих данных из службы nodejs/express REST.

Вы вероятно не сделали бы смесь обоих.

Если вы хотите получить отличную отправную точку, которая бы "напоминала" традиционное веб-приложение, изучите генератор приложений Express: https://expressjs.com/en/starter/generator.html

Если даст вам все, что вам нужно, и документы ответят на ваш вопрос напрямую.

Источник
Другие вопросы по тегам