Возникли проблемы при отправке json в html и получении <% - на работу - PullRequest
Новая
       17

Возникли проблемы при отправке json в html и получении <% - на работу

0 голосов
/ 10 июля 2019

Поэтому я пытаюсь использовать значения в моем файле JSON для отображения на веб-странице. Например, одним значением будет текст на кнопке аккордеона.

Я использую экспресс и ejs и пытаюсь использовать <% -%> для вызова текста в файле json, но, похоже, он не появится на веб-странице.

index.js 

    app.set('view engine', 'ejs');
    app.engine('html', require('ejs').renderFile);

app.get('/', function(req, res) {
     res.locals.ClinNotes1=('.\ClinNotes.json');
     res.render('webpage');
     })

webpage.ejs 

<div id="Problems" class="tabcontent">
    <div class="problemItems">
    <button class="accordion" id="accordionDis">
    <span><ul><%-ClinNotes1.resourceType%></ul></span>

ClinNotes.json 

{ "resourceType": "Bundle",
....}

Ответы [ 2 ]

1 голос
/ 10 июля 2019

Если вы хотите показать свои JSON данные на своей веб-странице, вы можете сделать что-то вроде этого:

index.js 

//here import your json file

const notes = require('./ClinNotes.json'); //suppose your file is in the root directory

app.get('/', function(req, res) {
     res.render('webpage', {data: notes});
 })

webpage.ejs 

 <span><ul><%-data.resourceType%></ul></span>

Надеюсь, это может помочь вам

0 голосов
/ 10 июля 2019

Вот краткий пример, который я собрал.

По сути, вы хотите перебирать JSON-файл так же, как и объект Javascript.

app.js 

const express = require('express');
const app = express();
const port = process.env.PORT || 3000;

//Use EJS Templating Engine
app.set('view engine', 'ejs');

app.get('/', (req, res, next) => {
  res.locals.dataFromJSON = require('./data.json');
  res.render('index');
});

//Start Server
app.listen(port, () => {
  console.log(`Server started on port number ${port}`);
});

index.ejs 

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Example</title>
</head>

<body>
  <h1>Hope this helps!</h1>
  <% Object.values(dataFromJSON).forEach((value) => { %>
  <button><%= value %></button>
  <% }); %>
</body>

</html>

data.json 

{
  "resourceType": "Bundle",
  "resourceType2": "Bundle2",
  "resourceType3": "Bundle3",
  "resourceType4": "Bundle4"
}

Вот репозиторий gitub, который я создал

Вот ожидаемый вывод, развернутый на heroku

Надеюсь, это поможет!?

...