JSFiddle - React, Tailwind, and code Playground
HTML
<!--
The following line imports JQuery, which is a library most people use for handling
HTML elements with javascript.
-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- This is where we'll put the results of our request -->
<span id="requestResult"></span>
JavaScript
/*
$ represents jQuery. JSON is the format used by the GuildWars 2 API. It is very
handy for javascript, because it uses the same syntax as javascript's objects.
In fact, JSON stands for JavaScript Object Notation.
*/
// First, we create the function that will be called after we do a request to the API
function success(result) {
// JSON.stringify will encode our "result" object into readable JSON text (opposite of JSON.parse)
var displayText = JSON.stringify(result);
// Get the HTML element with id requestResult (using jQuery)
var element = $("#requestResult");
// Set the text inside this element
element.text(displayText);
/*
You should see something like this: {"id":51902}
This is a JSON object that simply contains the game client's current build ID
You can access the "id" property of the "result" object this way: result.id
So if for example I want to multiply the id by two:
*/
var idTimesTwo = result.id * 2;
// Something very useful you can do for debugging javascript is this:
console.log("The id is " + result.id);
// Now if you press F12 (depending on your browser) and you open the javascript console, you should see a message.
}
/*
Here we call the "getJSON" function from jQuery, with the following arguments:
- The URL of the page we want to request
- The success function
*/
$.getJSON("https://api.guildwars2.com/v2/build", success);