Trying to parse JSON data from url api

Question

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<script src="jquery.js"></script>
<script language="JavaScript" type="text/javascript" src="/js/jquery-1.2.6.min.js"></script>
<script language="JavaScript" type="text/javascript" src="/js/jquery-ui-personalized-1.5.2.packed.js"></script>
<script language="JavaScript" type="text/javascript" src="/js/sprinkle.js"></script>
<script>
    $(document).ready(function() {
    $.getJSON('https://api.uclassify.com/v1/uclassify/sentiment/classify/?readKey=zp3PVGoy6XnZ&text=hello', function(Results) {
document.write(Results.negative);
});
});
</script>
</head>
</html>

I donot know why the code is not getting executed this is the first time i am trying to do this and have no clue what to do.

You probably shouldn't use `document.write()` in an asynchronous callback function. — Barmar, Sep 14 '16 at 21:30
See http://stackoverflow.com/questions/8656509/document-write-in-jsonp-callback — Barmar, Sep 14 '16 at 21:31

score 0 · Answer 1 · answered Sep 14 '16 at 21:44

Looks like the server doesn't allow CORS.

function sendRequest(callback) {
    var xmlHttp = new XMLHttpRequest();
    xmlHttp.onreadystatechange = requestHandler;
    xmlHttp.open('GET', 'https://api.uclassify.com/v1/uclassify/sentiment/classify/?readKey=zp3PVGoy6XnZ&text=hello', true);
    xmlHttp.setRequestHeader('content-type', 'application/json');
    xmlHttp.send();

    function requestHandler() {
        if (xmlHttp.readyState === 4) {
            if (xmlHttp.status === 200) {
                var response = JSON.parse(xmlHttp.responseText);
                if (2 === response.status) {
                    if (callback) return callback(null, responseText);
                } else {
                    if (callback) return callback(new Error(response.statusText), null);
                }
            } else {
                if (callback) return callback(new Error(xmlHttp.statusText || 'HTTP STATUS ' + xmlHttp.status), null);
            }
        }
    }
}

window.onload = function() {
    sendRequest(function(err, response) {
        var output = document.querySelector('#output');
        if (err) return output.innerHTML = err;
        output.innerHTML = JSON.stringify(response);
    });
};

<link href="//cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" rel="stylesheet"/>
<div class="container" id="output"></div>

score 0 · Answer 2 · answered Sep 14 '16 at 21:46

Try checking your browser developer tools and check for any suspicious messages. This is what I got.

XMLHttpRequest cannot load https://api.uclassify.com/v1/uclassify/sentiment/classify/?readKey=zp3PVGoy6XnZ&text=hello. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access. The response had HTTP status code 405.

Please refer to https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS for more details.

A resource makes a cross-origin HTTP request when it requests a resource from a different domain than the one which the first resource itself serves. For example, an HTML page served from http://domain-a.com makes an src request for http://domain-b.com/image.jpg. Many pages on the web today load resources like CSS stylesheets, images and scripts from separate domains.

For security reasons, browsers restrict cross-origin HTTP requests initiated from within scripts. For example, XMLHttpRequest follows the same-origin policy. So, a web application using XMLHttpRequest could only make HTTP requests to its own domain. To improve web applications, developers asked browser vendors to allow XMLHttpRequest to make cross-domain requests.

Trying to parse JSON data from url api

2 Answers2