정리왕 Ag

api를 활용해보기 위해 도로교통공사에서 휴게소별 날씨 오픈api를 받아왔다

 

 참고: http://data.ex.co.kr/openapi/basicinfo/openApiInfoM?apiId=0508 

 

고속도로 공공데이터 포털

 

data.ex.co.kr

api 키를 발급받아서 json 형식으로 받는다.

const url = `http://data.ex.co.kr/openapi/restinfo/restWeatherList?key=${APIKey}&type=json&sdate=${date}&stdHour=12`;

async function getData(i) {
  const response = await fetch(url);
  //json형태로 필요한 정보를 data에 넣어줌
  const data = await response.json();
  const info = data.list.map((val) => [
    val.출력할것
  ]);
  // x,y좌표를 이용해 위/경도를 표시하기 위해 따로 latlng 리스트 생성
  const latlng = data.list.map((val) => [val.xValue, val.yValue]);
  makeJson(latlng);
  i = show(info, i);
}

https://apis.map.kakao.com/web/sample/basicClusterer/

위 링크에 있는 클러스터러 지도를 적용하기 위해

옆에와 같이 json 형태로 만들어보려 한다.

일단 무작정 모양을 똑같게 하기 위해 코드를 짜봤지만, for문 밖에서는 젤 마지막 객체만 접근이 가능하여 답답했다

그러다 지인에게 물어보니 내가 짠것 처럼 push해주면 된다고 했다.

무슨말인지 몰라서 한참을 json파일을 쳐다보다 갑자기 떠올랐다

json파일 형태를 보면 객체 안에 배열 안에 객체가 존재하는것을 깨달았다

그래서 일단 객체1 (코드에서 container)를 만들고, 그 안에 배열을 만들고 또 객체2 (코드에서 position)를 만들어 논 후

position객체에 값을 넣고, 그 객체를 container객체의 키값이 positions인 val로써 넣어줬다.

드디어 for문 밖에서도 객체 전체를 볼 수 있었다.. 몇시간동안 이걸 해매고 다른 api로 바꿔보고 했는데,, 

이 해결해냈을때의 뿌듯함은 프로그래밍의 매력이다,. 놓을 수 없는..

다음에 또 api를 사용하여, 데이터를 추출하고, 그 데이터를 조물조물 만지는 것을 해매지 않게 하기 위해 이 글을 써논다.

이제 json형식으로 만들어놓은 위/경도에 접근하여 클러스터러를 형성해줘야 한다.

추출한 형태를 json파일로 만드는 방법과 어떻게든 접근해보려고 시도해 볼 것이다.