How do I use a javascript API on my website?

Question

I am trying to make a website that displays the information that this API gives in a neat way. I've got the design pretty much finished, but now I need to actually get this information in. The information I want to get is from https://api.roleplay.co.uk/v1/player/xxx and I might want to replace the '...' in h1 in the code below with the "name" bit from the API. How do I go about doing that? I know nothing about JS whatsoever and I prefer to learn by actually doing things. Here's my snippet of code that's relevant:

        <div class=playerdata>
            <div class=head>
                <h1 id="playerName">...</h1>
                <h2>'STEAMID'</h2>
                <button>Steam Profile</button>
                <button>Forum Profile</button>
                <button>Report</button>
                <button>Recommend</button>
            </div>

You sholuld look at https://stackoverflow.com/questions/247483/http-get-request-in-javascript — William Ardila, Nov 23 '17 at 20:42

Calin Vlasin · Accepted Answer · 2017-11-23T20:54:40.107

1

You can make a call like this using jQuery:

$.getJSON(' https://api.roleplay.co.uk/v1/player/76561198062083666', function(data) {
    $('#playerName').html(data.name);
});

data contains all of your JSON information from the API and with jQuery/pure Javascript you can use it.

$('#playerName').html(data.name) changes your h1 like this

<h1 id="playerName">...</h1> to <h1 id="playerName">jim</h1>

from ... to jim

My JSFiddle: https://jsfiddle.net/calinvlasin/dn5fhqfa/1/

edited Nov 23 '17 at 20:54

answered Nov 23 '17 at 20:45

Calin Vlasin

1,331
1
15
21

It's not working, I must be doing something wrong. My main.js looks like: $.getJSON(' https://api.roleplay.co.uk/v1/player/76561198062083666', function(data) { $('#playerName').html(data.name); }); And the relevant HTML looks like: – Nov 23 '17 at 20:53
Updated with a JSFiddle. Please take another look. – Calin Vlasin Nov 23 '17 at 20:54
Works! Thank you so much :) – Nov 23 '17 at 20:56
If I want to add more from this, say to the steam ID, will this be the correct code: $.getJSON(' https://api.roleplay.co.uk/v1/player/76561198062083666', function(data) { $('#playerName').html(data.name); $('#steamID').html(data.steamid); }); HTML: – Nov 23 '17 at 20:59
Yes, that's right. I recommend you to do a jQuery tutorial. It's not very hard at this level. – Calin Vlasin Nov 23 '17 at 21:04

score 0 · Answer 2 · answered Nov 23 '17 at 21:06

I prefer to learn by actually doing things

Is just a way to say, give me the solution, then i'll try to figure it out, but its okay, people learn in different ways.

I updated your HTML, so it is easier to make references to it from JavaScript, and i have no idea how report and recommend feature work, because they are not in the API.

<body>
  <div class="playerdata">
        <div class="head">
            <h1 id="playerName">...</h1>
            <h2 id="steamId">'STEAMID'</h2>
            <button id="steamProfile">Steam Profile</button>
            <button id="forumProfile">Forum Profile</button>
            <button id="report">Report</button>
            <button id="recommend">Recommend</button>
        </div>
  </div>

  <script type="text/javascript">
   function httpGetJSON(theUrl) {
        var xmlHttp = new XMLHttpRequest();
        xmlHttp.open( "GET", theUrl, false ); // false for synchronous request
        xmlHttp.send( null );
        return JSON.parse(xmlHttp.responseText);
    }

    var player = httpGetJSON("https://api.roleplay.co.uk/v1/player/76561198062083666");

    document.getElementById('playerName').innerHTML = player.name;
    document.getElementById('steamId').innerHTML = player.steamid;
    document.getElementById('steamProfile').addEventListener('click', function(){
      window.location.href = player.steam.profileurl
    })
    document.getElementById('forumProfile').addEventListener('click', function(){
      window.location.href = player.forumurl
    })

  </script>
<body>

This should give you a template to work with

How do I use a javascript API on my website?

2 Answers2