如何从API请求/响应中获取和使用JSON参数值

Question

I'm working on a website and want to display or hide a div-tag depending on a parameter value I can find in an API response.

The link to the API information I need is https://api.hitbox.tv/media/status/masta where "masta" is replaced by my channel-name. The response looks like this: {"media_is_live":"0","media_views":"2"}

I prefer to only use pure javascript, but tried the code below using AJAX but didn't work. I'm not familiar with javascript, jQuery and AJAX so maybe I did some wrong code writing as well. Any suggestions?:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script>
$(document).ready(function() {
    $.ajax({
        type: "GET",
        dataType: "json",
        url: "https://api.hitbox.tv/media/status/masta",
        data: "media_is_live",
        success: function(data){
            if(data == "0") {
                document.getElementById("player").style.visibility = "hidden";
            }
            else {
                document.getElementById("player").style.visibility = "visible";
            }
        }
    });
});
</script>

<div id="player">[LIVESTREAM-PLAYER]</div>

Answer 1

Your ajax call should look like this.

The media_is_live is in the result, not in your query.

$.ajax({
    type: "GET",
    dataType: "json",
    url: "https://api.hitbox.tv/media/status/masta",
    success: function(data){
        if(data.media_is_live == "0") {
            //Your code here
        }
        else {
            //Your code here
        }
    }
});

Answer 2

Try:

$(document).ready(function() {
    $.ajax({
        type: "GET",
        dataType: "json",
        url: "https://api.hitbox.tv/media/status/masta",
        success: function(data){
            if(data.media_is_live === "0") {
                document.getElementById("player").style.visibility = "hidden";
            }
            else {
                document.getElementById("player").style.visibility = "visible";
            }
        }
    });
});