웹 서버없이 HTML (JavaScript)로 JSON 데이터 처리

소개

웹 서버를 세우지 않고, 로컬 HTML(JavaScript)로 JSON 데이터를 취급하는 샘플 만들었습니다. 어쩌면 앱을 만들고 싶었을 때 자신의 메모입니다.

HTML(JavaScript) 소스

소스 github에 넣어.

파일은 다음 두 가지입니다.

accessJson.html

link.json.js

link.json.js 는 JSON 데이터를 포함하는 변수만을 설명합니다. 확장자를 .json로 설정하면 읽을 때 CORS 오류가 발생하기 때문에 이러한 형식을 사용합니다. (넷에서 찾은 방법)

웹 서버를 묻지 않고 accessJson.html를 실행하면 작동합니다.

동작

조금 동작을 소개합니다.
accessJson.html 를 실행하면 이러한 화면이 표시됩니다. 여담입니다만, Web 서버를 사용하고 있지 않기 때문에 URL이 파일 패스가 되고 있습니다.


Divタグに出力 버튼을 클릭하는 JSON 데이터의 내용이 표시됩니다.



columnC 값이 입력한 숫자 이상의 데이터만 표시합니다.



columnF의 중복 데이터를 카운트한 결과를 표시합니다.

결론

웹 서버를 사용하지 않는 HTML(JavaScript)에서도 JSON 데이터를 다룰 수 있는 편리하네요. 작은 앱이라면 만들 수 있을 것 같다.