iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 6
0

之前我們是直接在index.js把資料吐進.ejs模板中;今天來試試如果是json資料怎麼做。

如果我們有大量的商品資訊,每樣商品都有品名、價位、描述等,這時我們用json來儲存和更新是比較容易的。
為了等一下練習把json載入模板,我們先在專案最外層自己創一個junkfood.json,放隨意資料:(或你也可以直接複製這裡)

// junkfood.json
{
    "ProductCategory": "Junk Food",
    "Products": [
        {
            "ProductId": "101",
            "ProductName": "French Fries",
            "Price": "39"
        },
        {
            "ProductId": "102",
            "ProductName": "Hamburger",
            "Price": "129"
        },
        {
            "ProductId": "103",
            "ProductName": "Ice Cream",
            "Price": "19"
        },
        {
            "ProductId": "104",
            "ProductName": "Cola",
            "Price": "12"
        },
        {
            "ProductId": "105",
            "ProductName": "Potato Cakes",
            "Price": "49"
        }
    ]
}

junkfood.json放在最外層:

- bin/
----- www
- node_modules/
- public/
-------- images
-------- javascripts
-------- stylesheets
- routes/
-------- index.js
-------- users.js
- views/
------- error.ejs
------- index.ejs
- app.js
- package.json
- package-lock.json
+ - junkfood.json
  1. 假設我們想把這些資料載入到localhost:3000,也就是index.ejs;因為控制模板的是同名的js檔,因此首先我們要在index.js把資料集引入:
// index.js
var express = require('express');
var router = express.Router();
var request = require('request');
+ var junkFood = require('../junkfood.json'); // "../"的意思是回到上一層資料夾

router.get('/', function(req, res, next) {
    res.render('index', {
        title: 'MyAppName'
    });
});

module.exports = router;
  1. 接著我們思考一下,一般在呼叫json內物件的時候會用json['key']的方式對吧,但這麼大量的資料我們當然不想一個一個call;有什麼方法可以一次call到所有同類型的資料呢?
    這時候我們可以用迴圈。
    在使用迴圈以前,因為我們需要在模板中呼叫能代表json資料的變數,這樣才能針對不同模板餵不同的資料,所以在res.render中要記得加入剛剛assign好的json變數:
// index.js
var express = require('express');
var router = express.Router();
var request = require('request');
var junkFood = require('../junkfood.json');

router.get('/', function(req, res, next) {
    res.render('index', {
        title: 'MyAppName',
        + junkFood: junkFood
    });
});

module.exports = router;
  1. 然後我們到index.ejs來,.ejs.的迴圈有些小地方要注意:
    EX: 跟變數有關的都要用<%= %>包覆起來、ForEach是指將Products array中的各個項目列出(有注意到剛剛的junkFood.json裡,Products是一個大陣列吧?)
// index.ejs
<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <h1><%= title %></h1>
    <h3><%= junkFood.ProductCategory %></h3>
    <ul>
        <%= junkFood.Products.ForEach(function(item) { %>
            <li>#<%= item.ProductId %>: <%= item.ProductName %> | <%= item.Price %></li>
        <%= }); %>
    </ul>
  </body>
</html>

接著運行node www,你會看到資料被呈現在localhost:3000上了。
連續幾天都非常的easy,明天以後我們終於要進入Python的世界。


上一篇
Day4:NodeJS req.query() 應用|KeywordSearch 1.0 爬蟲關鍵字報表工具
下一篇
Day6:安裝 Python Jupyter Notebook 及了解python scrapy|KeywordSearch 1.0 爬蟲關鍵字報表工具
系列文
[行銷也要自動化] 用 Python Selenium + NodeJS + Amazon EC2 打造簡易關鍵字搜尋報表應用!14

1 則留言

0
crazwade
iT邦新手 5 級 ‧ 2019-05-08 11:35:23

遇到幾個問題,怕之後有人有遇到,特別來留言

問題一 : Unexpected token / in JSON at position 0
解:json裡面不要有註解(// junkfood.json刪掉)

問題二 : SyntaxError: Unexpected token )
解:輸出地方留著'=',其他運算迴圈的'='刪除

原本:
<%= junkFood.Products.forEach(function(item) { %>

#<%= item.ProductId %>:
<%= item.ProductName %> |
<%= item.Price %>

<%= }); %>

改成:
<% junkFood.Products.forEach(function(item) { %>

#<%= item.ProductId %>:
<%= item.ProductName %> |
<%= item.Price %>

<% }); %>

我要留言

立即登入留言