javascript json파일 읽어오기

 

심심해서 검색하다가 롤 캐릭터와 캐릭터의 정보를 가지고 있는 json형태의 파일을 찾았다.

여기서 json이란? -> 요기

JSON - 위키백과, 우리 모두의 백과사전

내가 찾은 파일이다. 

http://ddragon.leagueoflegends.com/cdn/10.14.1/data/en_US/ champion.json

 

 

 

 

 

 

 

또 여기에 들어가면 다양한 정보들이 있다.

https://developer.riotgames.com/docs/lol#data-dragon_champions

Riot Developer Portal

 

쨋든, json 파일을 javascript로 읽어와 보자!

 

 <button onclick="click()">click</button>

이러한 버튼태그를 생성!

 

 function click(){
            var ourRequest = new XMLHttpRequest();
            ourRequest.open('GET','http://ddragon.leagueoflegends.com/cdn/10.14.1/data/en_US/champion.json');
       	}

 

XMLHttpRequest를 생성하여 ourRequest 인스턴스를 생성한다.

 

또 json 파일을 get 방식으로 open()함수 사용!

ourRequest.send();

send()함수를 사용하여 요청하고,

 

  ourRequest.onload = function(){
                console.log(ourRequest.responseText);
            }

를 추가한다.

 

그리고 클릭을 해보면!

 

 

json 파일을 읽어 온 것을 알 수 있다.