CODEWITHSUNDEEP
javascripthtmlapiimport
user8933133
user8933133

Reputation:

How do I use a javascript API on my website?

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>

Upvotes: 0

Views: 103

Answers (2)

Pavlo
Pavlo

Reputation: 1197

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

Upvotes: 0

Calin Vlasin
Calin Vlasin

Reputation: 1433

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/

Upvotes: 1

Related Questions