Acquire JSON data from a URL and display it on the webpage

Question

Acquire JSON data from a URL and display it on the webpage

I'm facing an issue where the JSON data I'm trying to fetch from a URL is not displaying due to an uncaught reference error in my code. How can I modify the code to ensure that the data gets shown?

var url = "https://fantasy.premierleague.com/api/entry/1258872/";

req.open("GET", url);
req.send();

req.addEventListener("load", function(){
if(req.status == 200 && req.readyState == 4){
  var response = JSON.parse(req.responseText);
    document.getElementById("id").textContent = response.title;
    document.getElementById("player first name").textContent = response.player_first_name;
     document.getElementById("player last name").textContent = response.player_last_name;
  }
})

<h1>Fantasy Premier League</h1>
<h2 id="id"></h2>
<h3>First Name: <span id="player first name"></span></h3>
<h3>Last Name: <span id="player last name"></span></h3>

javascript json rest dom

Answer 1

Answer №1

It is crucial to initialize your request req object before invoking the open method

var req = new XMLHttpRequest();

If you attempt to call a method on an undefined object like in your case with req, it will result in an error being thrown

A more refined version of your code should look like this:

var url = "https://fantasy.premierleague.com/api/entry/1258872/";
var req = new XMLHttpRequest();

req.onreadystatechange =  function() {
    if(req.status == 200 && req.readyState == 4){
         var response = JSON.parse(req.responseText);
         document.getElementById("id").innerText = response.title;
         document.getElementById("player first name").innerText = response.player_first_name;
         document.getElementById("player last name").innerText = response.player_last_name;
  }
};

req.open("GET", url);
req.send();

Answer 2

It is crucial to initialize your request req object before invoking the open method

var req = new XMLHttpRequest();

If you attempt to call a method on an undefined object like in your case with req, it will result in an error being thrown

A more refined version of your code should look like this:

var url = "https://fantasy.premierleague.com/api/entry/1258872/";
var req = new XMLHttpRequest();

req.onreadystatechange =  function() {
    if(req.status == 200 && req.readyState == 4){
         var response = JSON.parse(req.responseText);
         document.getElementById("id").innerText = response.title;
         document.getElementById("player first name").innerText = response.player_first_name;
         document.getElementById("player last name").innerText = response.player_last_name;
  }
};

req.open("GET", url);
req.send();

Answer 3

Answer №2

Don't forget to announce the XMLHttpRequest object. However, bear in mind that it may not return a response from the api due to its cors policy.

var URL = "https://fantasy.premierleague.com/api/entry/1258872/";

var request = new XMLHttpRequest();
request.open("GET", URL);
request.send();

req.addEventListener("load", function(){
if(request.status == 200 && request.readyState == 4){
  var response = JSON.parse(request.responseText);
    document.getElementById("id").textContent = response.title;
    document.getElementById("player first name").textContent = response.player_first_name;
     document.getElementById("player last name").textContent = response.player_last_name;
  }
})

<h1>Fantasy Premier League</h1>
<h2 id="id"></h2>
<h3>First Name: <span id="player first name"></span></h3>
<h3>Last Name: <span id="player last name"></span></h3>

If you wish to fetch the data and bypass the cors policy, consider making the request using server-side scripting like PHP:

$contents = 
file_get_contents("https://fantasy.premierleague.com/api/entry/1258872/");
echo $contents;

Answer 4

Don't forget to announce the XMLHttpRequest object. However, bear in mind that it may not return a response from the api due to its cors policy.

var URL = "https://fantasy.premierleague.com/api/entry/1258872/";

var request = new XMLHttpRequest();
request.open("GET", URL);
request.send();

req.addEventListener("load", function(){
if(request.status == 200 && request.readyState == 4){
  var response = JSON.parse(request.responseText);
    document.getElementById("id").textContent = response.title;
    document.getElementById("player first name").textContent = response.player_first_name;
     document.getElementById("player last name").textContent = response.player_last_name;
  }
})

<h1>Fantasy Premier League</h1>
<h2 id="id"></h2>
<h3>First Name: <span id="player first name"></span></h3>
<h3>Last Name: <span id="player last name"></span></h3>

If you wish to fetch the data and bypass the cors policy, consider making the request using server-side scripting like PHP:

$contents = 
file_get_contents("https://fantasy.premierleague.com/api/entry/1258872/");
echo $contents;

Acquire JSON data from a URL and display it on the webpage

Answer №1

Answer №2

Similar questions

Querying Parse Server for objectId information

When using AutoComplete in MUI, I encountered an issue while attempting to assign a default value to the checkbox from an API. Instead of achieving the desired result, I received an error stating "(inter

Filtering nested arrays in Javascript involves iterating through each nested

The method defined in user.model.js cannot be utilized in mongoose and node

Utilizing Navigate and useState for Conditional Routing in React

What is the process for importing JSON data into Node.js following the bundling of the entire server as an executable using the "pkg" compiler?

Is it possible to update labels on an AngularJS slider using a timeout function?

Selenium in Perl: Facing a puzzling JavaScript error while attempting to resize window

Configuring Angular routes based on service method invocation

Retrieve four distinct values using only a single text box input and display them individually on separate lines

Transforming the JSON data into a text format

I'm looking for recommendations on where to begin learning about JavaScript touch events for web development. Any suggestions?

Troubleshooting JavaScript Functions Failure Following AJAX XML Request

What's the best way to customize the color of the text "labels" in the Form components of a basic React JS module?

Problems encountered when attempting to create a link between two nodes on a force-directed graph using a mouse click

A step-by-step guide to setting up a Slick Slider JS slideshow with center mode

Developing a new class within a function

Tally the quantity of items within a JSON array

The FormData() object in Django backend is consistently found to be void of any data

Having difficulty choosing an item from a personalized autocomplete search bar in my Vue.js/Vuetify.js project