Having trouble parsing a JSON http request

Question

I referenced code from tutorials on w3schools.com. I don't know what I could be doing wrong, but when I test the site, I get no output. None whatsoever. I'll post the code below.

<!DOCTYPE html>
<html>
    <body>
        <p id="par1"></p>
        <script>
            var xmlhttp = new XMLHttpRequest();
            var url = "http://xproshowcasex.api.channel.livestream.com/2.0/livestatus.json?callback=status";

            xmlhttp.onreadystatechange=function() {
                //readyState 4: request finished and response is ready
                //status 200: "OK"
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    myFunction(xmlhttp.responseText);
                }
            }
            //var 'url' is defined above
            xmlhttp.open("GET", url, true);
            xmlhttp.send();

            function status(response) {
                var arr = JSON.parse(response);

                if (arr.isLive = true) {
                    document.getElementById("par1").innerHTML = "live"; 
                } else {
                    document.getElementById("par1").innerHTML = "offline";
                }
            }
        </script>
    </body>
</html>

I checked the console log on chrome and is gave me this error:

XMLHttpRequest cannot load http://xproshowcasex.api.channel.livestream.com/2.0/livestatus.json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

I have looked on the forums for livestream as well as other places and no one can offer me a solid solution. Hopefully someone here can. Thanks for the help!

--Edit--

I have searched this site and have not found a solution for my problem. If anyone knows where there may be a solution, please post a link, but as far as I know, there is none. As we all know, different code has different problems, so i would appreciate an answer rather than a [Duplicate] marking.

You're running into the AJAX same-origin policy. You can't use AJAX to access a web site in a different domain. There are many questions here that answer how to deal with this. — Barmar, Aug 29 '14 at 02:01
Have you tried adding `xmlhttp.setRequestHeader("Accept","application/json");`? Add it just before: "`xmlhttp.onreadystatechange`". Also, take a look at this; it may come in handy: [Simple cross-domain XHR boilerplate](https://gist.github.com/yanyaoer/1407857) — Mr. Polywhirl, Aug 29 '14 at 02:03
I just tried it and I got this error in the console: Uncaught InvalidStateError: Failed to execute 'setRequestHeader' on 'XMLHttpRequest': The object's state must be OPENED. — Danny, Aug 29 '14 at 02:09
@Danny: The following example will work. I used jQuery for the easy-factor... http://pastebin.com/ViqguYfk — Mr. Polywhirl, Aug 29 '14 at 03:21
@Mr.Polywhirl That question uses jQuery, so its solution won't work. — Barmar, Aug 29 '14 at 08:34
@Mr.Polywhirl I followed your link but the if statement was set to alert and display the status. I have changed it to the following, but it always runs the first if statement even if the isLive status is false. I can't figure it out so a bit more help would be appreciated. Thanks! — Danny, Aug 30 '14 at 17:25
@mr.polywhirl nevermind, I got it working so far. I even have it set up for multiple streams. I'll edit my question to show the answer. Thanks for the help! — Danny, Aug 30 '14 at 18:10

score 1 · Accepted Answer · edited Aug 31 '14 at 19:52

<!DOCTYPE html>
<html>
<head>
<meat charset="utf-8">
<title>test</title>


<script src="https://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>

<!--Livestream status script-->
<!-- CAN BE PLACED IN BODY -->
<script type="text/javascript">
$(document).ready(function () {

function getCrossDomainJson(url, callback) {
    $.ajax({
        url: "http://query.yahooapis.com/v1/public/yql?callback=?",
        data: {
            q: 'select * from xml where url="' + url + '"',
            format: "json"
        },
        dataType: "jsonp",
        success: callback
    });
}

/*INSERT STREAM NAME INBETWEEN 'x' eg. http://xSTREAMNAMEx.channel-api.livestream-api.com/2.0/getstream*/
getCrossDomainJson("http://xhellgateospreyx.channel-api.livestream-api.com/2.0/getstream", function(data) {
    console.dir(data);

    if (data && data.query && data.query.results && data.query.results.channel) {
        var statusTest = data.query.results.channel.isLive;


        if (statusTest == "true") {
            document.getElementById("par1").innerHTML = "online";
        }

        else {
            document.getElementById("par2").innerHTML = "offline";
        }

    }
});

});
</script>

<!-- end of script -->

<body>

//par1 will change to online if stream is online; par2 will remain as unaffected
//par2 will change to offline if stream is offline; par1 will remain as unaffected
//I separated the p tags for testing purposes, but they can be combined
//if you do so, change the id in the if/else statements
<p id="par1">unaffected</p>
<p id="par2">unaffected</p>




</body>
</html>

If you want more than one stream status, select the code from 'getCrossDomainJson' down to the first '});' and paste in between the two '});' and replace the stream name and the tag in 'getElementById'. Thanks to everyone who helped me with this problem! Hope this helps someone else.

Having trouble parsing a JSON http request

1 Answers1