Read Json file to Express

Before list code :

last unit we have learing how to use { #each } iterate read ,

Exactly , you just written one Html of format enought.

But When set array and element on app.js ( for Handlebars read )

same need set element a lot …

SSO ……Savage ….. !!

Example…there have id : 1–100 maybe…not easy to manage .

as like below sample ,,, when program code can become very vary large,

Also it’s hard to find the route, page and data , when you need to modify it.
In result, most of this data is going to be somewhere else, may be a database, or server or from other resource , private cloud , such as third-party APIs.

In summary, it is Data rarely placed (set code ) directly in the app.js that manages routing.

Form NOW :

Three Step

1. 下載電影清單
2. 將 JSON 檔案載入 Express 中
3. 將外部資料帶入樣板引擎

1.Download Sefmple of JSON file :

https://movie-list.alphacamp.io/api/v1/movies/

Download to you Project folder :

Give name : pictures.json

when you open it .. like this ..

in fact you order peper : (mas os ). alt + Shift + F

2. 將 JSON 檔案載入 Express 中

先前把外部套件載入的方法一樣，只需要透過 require() 就可以把這支檔案載入 Express。

before :

`app.get ( ‘ / ' , (req ,res) => {

const barry = [ id : XXX , image:xxx , title :XXX]
re.render ( ‘ index ‘ , { pictures :barry }) 
}

But Now :

Almost program is give you File to Route . kind of Server , Datebase , private cloud . three party API … something like this . so you have use reuqite to pointing your resources .

1. Read Josn file . so we need poting it through Variable const barry .
2. Use require set path indicates （指示）that the archive of the location path to be loaded .

const barry = require ( ‘ . / pictures.josn ‘ ) 
re. render ( ‘ index ‘ , { pictures : barry } )

3. Bring external data into the Handlebars of engine

just download of file .json , when you open it , have see lot array of object wrapped in the results property , So we need pointing results

show pictures for you :

results is prepared in “pictures.json “ file . Now pointing it !!

Example :

 re.render ( ‘ index ‘ , { pictures : barry .result } )

require( ) : 中文：

1. 如果放入的是套件名稱，則 Node.js 會去 node_modules 資料中，找看看是否載得到這個套件
2. 但是當 require() 內寫的是路徑時，則 Node.js 會根據你所提供的路徑去找到並載入該檔案。

所以我們只需要在 app.js 的最上面透過 require('./pictures.json') 去載入 Pictures . json 這支檔案就可以了：

<< data : copy form ALPHA CAMP >>

// app.js
// ...
// routes setting
app.get('/', (req, res) => {
  // past the movie data into 'index' partial template
  res.render('index', { movies: barry.results })
})
// ...

現在，所有的資料都可以帶到 ./views/index.handlebars 中了。這裡迴圈的寫法我們做了兩個更動：

1. 我們在電影的路徑上加上 /movies/。 is path name .
2. 先前我們所定義的 movieList 中，image 這個變數是直接給網址，而在這份 JSON 中 image 給的是檔名，所以在 index.handlebars 中，需要把圖片的 src 路徑（這段：https://movie-list.alphacamp.io/posters/ 補上去：

<!-- ./views/index.handlebars -->
<div class="container mt-5">
  <!-- search-bar -->
  <!-- ... -->
  <div class="row" id="data-panel">
    {{#each movies}}
    <div class="col-sm-3">
      <a href="/movies/{{this.id}}" class="text-secondary">
        <div class="card mb-2">
          <img class="card-img-top" src="https://movie-list.alphacamp.io/posters/{{this.image}}" alt="Card image cap">
          <div class="card-body movie-item-body">
            <h6 class="card-title">{{this.title}}</h6>
          </div>
        </div>
      </a>
    </div>
    {{/each}}
  </div>
</div>