ejsファイルのnode.jsに格納されたデータを表示する方法:: Javascript

Question

これは、 tは.. .. は、ここで私がこれまで持っているものだ、私はオンライン見上げていると、これまで任意の運を持っていなかった ...

page.ejs

... 
      <div class="container" id="someID"> 
       <a class = "someName" href=""> 
        <%# Trying to put data here-%> 
        <% data.forEach(function(dat) {%> 
         <img src=<%=JSON.stringify(dat) %> /> 
        <% }); %> 
       </a> 
      </div> 
... 

モデルに成功してい.js

'use strict'; 
const db = require('db'); 
const {Type} = db; 
const table = db.defineTable('aList', { 
    columns: { 
     id:Type.bigint().unsigned().notNull().primaryKey().autoIncrement(), 
     name: Type.varchar(127).notNull().unique(), 
     logo: Type.varchar(127).notNull().unique(), 
    }, 
    indexes: [ 'name' ], 
}); 

const ATable = { 
    create(aData, cb) { 
     table.insert({ 
      name: aData.name, 
      logo: aData.logo, 
     },(err, result) =>{ 
      if(err) { 
       cb(err); 
       return; 
      } 
      cb(null, result.insertId); 
     }); 
    }, 
    getLogo(cb){ 
     table.query(
      'SELECT `logo` ' + 
      'FROM `aList`', 
      cb); 
    }, 
}; 
module.exports = ATable; 

Controller.js

'use strict'; 

const ATable = require('../ATable'); 
const jsonBodyParser = require('../jsonBodyParser'); 
const logger = require('logger'); 
const router = require('../router'); 

router.post('/aList/create', jsonBodyParser, (req, res) => { 
    const aData = req.body; 

    ATable.create(aData, err =>{ 
     if(err){ 
      logger.error(err); 
      res.sendStatus(500); 
      return; 
     } 

     res.sendStatus(201); 
    }); 
}); 

router.get('/aList/logo', (req, res, next) => { 
    ATable.getLogo((err, logo) => { 
     if (err) { 
      next (err); 
      return; 
     } 
     res.json(logo); 
     res.render('page',{data:logo}); 
    }); 
}); 

page.mount.js

var React = require('react'); 
var ReactDOM = require('ReactDOM'); 
var Container = require('page.react'); 

ReactDOM.render(<Container />, document.getElementById('someID')); 

page.react.js

'use strict' 

var Container = React.createClass({ 
    getInitialState: function(){ 
    return { 
     title: 'SOME TEXT', 
     sources:[] 
     } 
    }, 
    render: function(){ 
     return (
     <div> 
      <h1> {this.state.title} </h1> 
      <ShowList names={this.state.sources} /> 
     </div> 
    ) 
    } 
}); 

var ShowList = React.createClass({ 
    render: function(){ 
    var listItems = this.props.names.map(function(source){ 
     return <a class="list" href="http://www.google.ca"> <img class="logos" src={source} /> </a>; 
}); 
    return (
     <div> 
      {listItems} 
     </div> 
    ) 
    } 
}); 

module.exports = Container; 

localhost：port_number/api/aList/logoにアクセスすると、データはうまく表示されますが、ページを表示しようとすると、データが定義されていないというエラーが表示されます。 ありがとうございます！

Answer 1

少し間違っているかもしれません。しかし、ejsはTemplate + dataからHTMLを返します。テンプレートがあります。あなたはそれにデータを返さないでください。 JSONをページに返すだけです... AJAXなどを使用している場合は問題ありません。あなたのケースでは、ここでは、この

router.get('/aList/logo', (req, res, next) => { ATable.getLogo((err, logo) => { if (err) { next (err); return; } //in here you need to render data in reder for EJS template to process it. res.render('page.ejs', {data: logo}); }); });

のようないくつかのことを必要とするドキュメントhttp://www.embeddedjs.com/getting_started.html

は、この情報がお役に立てば幸いです。