[잔디☘] #3 API 호출(2), 객체 전달

ejs, json ojbect 전달

저번에 request api를 활용하여 예방접종 통계 data를 받아와 console에 출력하는 것까지 진행했다.

구현 목록

• 예방접종 센터(병원) data 받아오기
• 받은 모든 데이터를 ejs에 json변환 후 전달하기
• ejs에서 전달 받은 data 출력하기

예방접종 센터 data 가져오기 code

routes/vaccine.js

const CenterData = (callback) =>{
    //console.log("센터데이터!!!");

    const url = 'https://api.odcloud.kr/api/15077586/v1/centers?page=1&perPage=10';
    const key = 'tNoct9hJ2VkbcD8RcdNsB8eVlJRGVALc80SKwRJu0jikOI5VbSTAXim5O07jvbEk7wTGmescTrqLsRd5Xz6WOw%3D%3D';
    const api_url = url+'&serviceKey='+key;

    request(api_url,function(err,res,body){
        callback(undefined,{
            center:body
        });
    });
}

module.exports = CenterData

이번에도 request를 통해 얻은 data를 callback 함수를 설정하여 body내용을 center에 저장하였다.

Json 변환 후 ejs에 전달하기

routes/home.js

router.get('/', function(req, res, next){
    StatData((err, {stat}={})=>{
        if(err){
            console.log("error!");
            return res.send({err});
        }
        const json = JSON.parse(stat);
        return res.render('index',{stat:json});
    })
});

router.get('/centers',function(req,res,next){
    CenterData((err, {center}={})=>{
        if(err){
            console.log("error!");
            return res.send({err});
        }
        const json = JSON.parse(center);
        console.log(center);
        return res.render('center',{center:json});
    })
});

JSON.parse(String)
String이 json규칙을 따르고 있으면 json으로 변환해준다.

res.render(ejs 파일경로, data)
두번째 인자를 통해 data를 객체 형태로 보내줄수있다.

ejs에서 출력하기

views/index.ejs

<%= console.log(stat.data) %>

ejs에서는 <% %>을 이용하여 반복문및 js를 사용할 수 있다.
<%= value %> <%= %> 구문에서는 변수에 저장된 값을 출력할 수 있다.

차후 계획

다음 주에는 데이터는 준비가 되었으므로 Front를 시작하려 한다.