Exploring Riot Games API with JavaScript

Are you a fan of Riot Games' hit game, League of Legends? Did you know that you can access game data and statistics using their public API? In this post, we'll explore the Riot Games API and how to use it in JavaScript.

Getting Started

First, you'll need to create an account and obtain an API key on the Riot Games Developer Portal. Once you have your API key, you can start making requests to the API.

All data from the Riot Games API is returned in JSON format, so we'll need a way to parse the response. In JavaScript, we can use the built-in fetch() function and json() method to extract the JSON data from the response.

fetch('https://na1.api.riotgames.com/lol/summoner/v4/summoners/by-name/RiotSchmick?api_key=YOUR_API_KEY')
  .then(response => response.json())
  .then(data => console.log(data));

In the example above, we're making a request to the Summoner API endpoint to retrieve information about the summoner named "RiotSchmick". Replace YOUR_API_KEY with your actual API key to make the request.

Example Requests

Summoner API

Let's start with an example request to the Summoner API. This API endpoint returns basic information about a summoner by their username.

fetch('https://na1.api.riotgames.com/lol/summoner/v4/summoners/by-name/RiotSchmick?api_key=YOUR_API_KEY')
  .then(response => response.json())
  .then(data => console.log(data));

Champion API

The Champion API endpoint returns information about all champions in the game. Here's an example request to get the ID and name of each champion:

fetch('https://na1.api.riotgames.com/lol/static-data/v3/champions?api_key=YOUR_API_KEY')
  .then(response => response.json())
  .then(data => {
    for (let champion in data.data) {
      console.log(data.data[champion].id + ' ' + data.data[champion].name);
    }
  });

Match API

The Match API endpoint returns information about a specific match. Here's an example request to get the list of players in a match:

fetch('https://na1.api.riotgames.com/lol/match/v4/matches/YOUR_MATCH_ID?api_key=YOUR_API_KEY')
  .then(response => response.json())
  .then(data => {
    for (let player of data.participantIdentities) {
      console.log(player.player.summonerName);
    }
  });

Replace YOUR_MATCH_ID with the actual ID of the match you want to retrieve.

Conclusion

The Riot Games API gives us access to a wealth of information about League of Legends, and with JavaScript, we can easily retrieve and display this data in our web applications. We've covered just a few examples of the many API endpoints available, so explore the documentation and see what else you can discover!