Interacting with an API (First time doing this)

[Kako]

So I have a link that will then return something like this http://prnt.sc/bvlu9i
I need help reading the contents of the link and getting the value of it and save it into a variable I know this might be simple for some people but I am still progressing through web design and development Thanks for all the help and support!

[SamA74]

@Kako

I need help reading the contents of the link and getting the value of it and save it into a variable

That sounds like some kind of programming, rather than just html & css.
What programming language are you using?

[Kako]

Javascript if it is possible to do it with that.

[SamA74]

@Kako

Javascript if it is possible to do it with that.

I’m not a javascript expert.
Would you like me to more the topic to the javascript forum, where you are more likely to find one?

[Kako]

Sure! Yes!

[Paul_Wilkins]

@Kako

I need help reading the contents of the link and getting the value of it and save it into a variable

You can use an AJAX request to retrieve those contents. A getting started with AJAX guide might be useful for you.

A simple example is:

<span id="ajaxButton" style="cursor: pointer; text-decoration: underline">
  Make a request
</span>
<script type="text/javascript">
(function() {
  var httpRequest;
  document.getElementById("ajaxButton").onclick = function() { makeRequest('test.html'); };

  function makeRequest(url) {
    httpRequest = new XMLHttpRequest();

    if (!httpRequest) {
      alert('Giving up :( Cannot create an XMLHTTP instance');
      return false;
    }
    httpRequest.onreadystatechange = alertContents;
    httpRequest.open('GET', url);
    httpRequest.send();
  }

  function alertContents() {
    if (httpRequest.readyState === XMLHttpRequest.DONE) {
      if (httpRequest.status === 200) {
        alert(httpRequest.responseText);
      } else {
        alert('There was a problem with the request.');
      }
    }
  }
})();
</script>

[Kako]

@Paul_Wilkins

<span id=“ajaxButton” style=“cursor: pointer; text-decoration: underline”>
Make a request
</span>
<script type=“text/javascript”>
(function() {
var httpRequest;
document.getElementById(“ajaxButton”).onclick = function() { makeRequest(‘test.html’); };

function makeRequest(url) {
httpRequest = new XMLHttpRequest();

if (!httpRequest) {
  alert('Giving up :( Cannot create an XMLHTTP instance');
  return false;
}
httpRequest.onreadystatechange = alertContents;
httpRequest.open('GET', url);
httpRequest.send();

}

function alertContents() {
if (httpRequest.readyState === XMLHttpRequest.DONE) {
if (httpRequest.status === 200) {
alert(httpRequest.responseText);
} else {
alert(‘There was a problem with the request.’);
}
}
}
})();
</script>

Thanks for the reply! However I keep getting this security problem "No ‘Access-Control-Allow-Origin’ header is present on the requested resource. " Because the url I am requesting is not on my server.

[Paul_Wilkins]

@Kako

Thanks for the reply! However I keep getting this security problem "No ‘Access-Control-Allow-Origin’ header is present on the requested resource. "

You are not allowed to request information from a different domain unless they explicitly allow it in their headers.

Are you allowed to access the information from the other domain? Do they perhaps have some kind of API that will allow you to access the information?

[Kako]

I have an API key to retrieve the data. That’s how I get it.

[Paul_Wilkins]

@Kako

I have an API key to retrieve the data. That’s how I get it.

You won’t be allowed without the other domain’s permission.

[Kako]

Ok thanks! I will look into it further more