Get data from JSON API and display it in HTML

Question

I'm trying to use this minecraft server API (JSON), to show in my webpage, something like... Right now there are (players) connected. The JSON file looks like this (external):

{
"status": true,
"players": {
    "online": 534,
    "max": 900
},
"cache": 1442690473 }

I want to fetch the data players (online) and display it on a html paragraph.... Using JavaScript or Jquery. I searched some solutions, using getJSON, but I couldn't make it work.. I tried using AJAX to make a request...

  // AJAX Request to JSON
              $.ajax({
                  url: "https://mcapi.ca/query/mythalium.com/players",
                  // Handle as Text
                  dataType: "text",
                  success: function(data) {
                      // Parse JSON file
                      var json = $.parseJSON(data);
                      //Store data into a variable
                      // Display Players
                      $('#players').html('Currently there are: ' + json.players.now ' users');
                  }
      });

And then display it using:

 <span id="results"></span>

Why is not working? Nothing is being showed...

There are lots and lots of tutorials available for doing this. Just saying here's some data is not a proper question request here without showing your attempts to solve this yourself — charlietfl
– charlietfl, Commented Sep 19, 2015 at 19:37

Vladislav Karamfilov · Accepted Answer · 2015-09-19 20:18:42Z

3

You should change your AJAX success callback to:

success: function(data) {
    // Parse JSON file
    var json = $.parseJSON(data);
    //Store data into a variable
    // Display Players
    $('#results').html('Currently there are: ' + json.players.online' + users');
}

The problems are you're selecting the wrong span element - #players instead of #results and you're referencing the wrong JSON property - json.players.now instead of json.players.online like in the sample response you provided.

answered Sep 19, 2015 at 20:18

Vladislav Karamfilov

4711 gold badge9 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Fabian Lurz · Accepted Answer · 2015-09-19 20:17:57Z

0

Datatype should be JSON.

Check this video here: https://www.youtube.com/watch?v=fEYx8dQr_cQ

You should be fine then.

answered Sep 19, 2015 at 20:17

Fabian Lurz

2,0396 gold badges26 silver badges55 bronze badges

Collectives™ on Stack Overflow

Get data from JSON API and display it in HTML

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related