노는게 제일 좋습니다.

dataframe.js로 csv를 불러와 "dictionary 배열"로 변환하기(브라우저) 본문

웹

dataframe.js로 csv를 불러와 "dictionary 배열"로 변환하기(브라우저)

노는게 제일 좋습니다. 2020. 5. 11. 17:40

배경

csv파일을 dataframe.js로 불러와, js의 dictionary의 array ( 딕셔너리를 원소로 갖는 배열 )로 변환해야 한다.

csv파일은 구글 스프레드시트에서 바로 export하여 사용하고싶다.

 

해결

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!-- index.HTML -->
 
<head>
    <!-- FOR PRODUCTION 
    <script src="https://gmousse.github.io/dataframe-js/dist/dataframe.min.js"></script>
    -->
 
    <!-- FOR DEVELOPMENT -->
    <script src="https://gmousse.github.io/dataframe-js/dist/dataframe.js"></script>
</head>
 
<body>
    <script type="text/javascript" src="script.js"></script>
</body>
 cs

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// script.js
 
var DataFrame = dfjs.DataFrame;
var data;
var temp;
 
const source_url = 'https://docs.google.com/spreadsheets/d/<구글시트 문서 id>/export?format=csv';
DataFrame.fromCSV(source_url).then(df => {
  // show() : dataframe 미리보기
  df.show();
 
  // 불러온 CSV에서 특정 컬럼 선택하여 새로운 dataframe생성
  temp = df.select('기관명', 'Latitude', 'Longitude');
  temp.show();
  
  // 새롭게 만든 dataframe(temp)를 dictionary형으로 변환
  data = temp.toCollection();
  console.log(data);
});
 cs

 

7열의 <구글시트문서 id>는, 본인의 구글 시트문서에 들어간 후 url에서 확인할 수 있다.

빨간사각형으로 표시한 부분이 문서id이다.

 

script.js의 18열 data출력결과는 다음과 같다.

  • 링크 DataFrame.fromCSV( < csv파일 경로 > ).then( df => <구문> )

csv를 불러와 새로운 dataframe을 만든다.

 

  • 링크 DataFrame.select( <선택할 컬럼> )

dataframe에서 특정 컬럼을 뽑아내어, 새로운 dataframe을 만든다.

 

  • 링크 DataFrame.toCollection()

dataframe을 dictionary로 변환한다.

 

추가적으로, 딕셔너리가 아닌 배열(list)로 변환하고 싶을 경우, toArray()를 사용할 수 있다.

저작자표시 비영리 동일조건

'웹' 카테고리의 다른 글

Naver Maps API v3 지도 가변크기적용  (0) 2020.05.25
이시국 보건증 첫 버전 배포  (0) 2020.05.17
이시국보건증 페이지 간소화계획 및 기능별 API예제 링크 정리  (0) 2020.05.09
이시국 보건증 데이터 수집 방법  (0) 2020.05.03
웹문서에 Web font적용  (0) 2020.03.19
'웹' Related Articles more
Comments