Emulate getting Jira JSON data via web link in browser with JavaScript

Question

I'm not exactly sure how to ask this question. I don't have easy access to my company site to try this using normal AJAX calls, so I'd need to resolve cross domain issues as well as possibly change settings on our Jira server. Since I'm home all week this week ostensibly on vacation, but a bit bored before Thanksgiving, I thought I'd play around with this so I can get a jump on the project I just got assigned this past Friday.

Using the Jira Rest API, if I drop https://jira.atlassian.com/rest/api/2/projectinto a browser (Chrome) and press enter, I get valid JSON data back in the browser. Granted you have to have valid Jira credentials as well as be already logged onto the site for this to work (otherwise you just get [] for a response), but for the experimentation I'm doing that's OK. I'm just trying to generate some valid data that I can massage into a form.

How can I do this in JavaScript in an automated fashion so the returned JSON goes into a variable that I can use for subsequent data manipulation? Ideally this should work on our real Jira site, but I'm fine if it just works on the sites linked in this question, as I said I'm just doing some experimentation trying to read project data and associated properties.

I've tried (cite):

$.getJSON("https://jira.atlassian.com/rest/api/2/project?callback=?", function(result){
   //response data are now in the result variable
   alert(result);
});

I've also tried to simply eval() the string into a variable, but that doesn't work either.

My eventual project will most likely be in jQuery / jQuery Mobile, but a straight JS answer is fine, I can translate that into jQuery later if it becomes necessary.

EDIT:

Here is the HTML I'm using to test this and suggestions being made, pretty much straight out of https://html5boilerplate.com/:

<!doctype html>
<html class="no-js" lang="">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="apple-touch-icon" href="apple-touch-icon.png">
    <!-- Place favicon.ico in the root directory -->

    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">
    <script src="js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body>
    <!--[if lt IE 8]>
        <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->

    <!-- Add your site or application content here -->
    <p>Hello world! This is HTML5 Boilerplate.</p>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.3.min.js"><\/script>')</script>
    <script src="js/plugins.js"></script>
    <script src="js/main.js"></script>
    <script type="text/javascript">
        var result = $.get("https://jira.atlassian.com/rest/api/2/project");
        console.log(result);
    </script>
</body>

Why not just call it using AJAX and then handle the return value? — Sergio S, Nov 25 '15 at 20:48
When I try doing that I get: `Refused to execute script from 'https://jira.jira.atlassian.com/rest/api/latest/project?callback=jQuery111307598869814537466_1448485455829&_=1448485455830' because its MIME type ('application/json') is not executable, and strict MIME type checking is enabled.` And like I said, I don't have (easy) access to the Jira server from home, so I can't change any settings. — delliottg, Nov 25 '15 at 21:06
What about just `$.get(`...? On what line do you get this error? Try removing the `?callback=?` also — Arg0n, Nov 25 '15 at 21:13
Using $.get or $.post, I receive: `XHR failed loading: GET "https://jira.atlassian.com/rest/api/2/project?callback=?".` — delliottg, Nov 25 '15 at 21:21
Removing the `?callback=?`, I get a different error: `XMLHttpRequest cannot load https://jira.atlassian.com/rest/api/2/project. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. The response had HTTP status code 500.` — delliottg, Nov 25 '15 at 21:26
Try setting `dataType` to `"jsonp"` in config for the request. — Arg0n, Nov 25 '15 at 21:43
I'm pretty sure all of these requests are hitting the [Same-Origin Policy](https://en.wikipedia.org/wiki/Same-origin_policy) which is why they're failing. There must be some way to emulate just entering a URL into a browser and hitting enter? — delliottg, Nov 25 '15 at 22:09

score 0 · Answer 1 · edited May 23 '17 at 11:59

So using AJAX / .get, etc was the wrong approach (at least for this experiment, it's the right answer for when I have access to the JIRA server).

What I found that worked was using:

location.href = "https://jira.atlassian.com/rest/api/2/project";
var data = JSON.parse(document.getElementsByTagName('body')[0].innerText);
console.log(data);

This is not a perfect answer because it replaces the body of the web page with the JSON response from JIRA, but it allowed me to move forward. I found several different methods to try in this SO post.

Here's the whole web page:

<!doctype html>
<html class="no-js" lang="">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="apple-touch-icon" href="apple-touch-icon.png">
    <!-- Place favicon.ico in the root directory -->

    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">
    <script src="js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body>
    <!--[if lt IE 8]>
        <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->

    <!-- Add your site or application content here -->
    <p>Get JIRA data</p>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.3.min.js"><\/script>')</script>
    <script src="js/plugins.js"></script>
    <script src="js/main.js"></script>
    <script type="text/javascript">
        location.href = "https://jira.atlassian.com/rest/api/2/project";
        var data = document.getElementsByTagName('body')[0].innerText;
        console.log(data);
    </script>
</body>
</html>

The reason it doesn't work as well as it might is you still have to go after the fact & get the data in the console:

var data = JSON.parse(document.getElementsByTagName('body')[0].innerText);

But that gives you an array of JIRA objects that you can then manipulate.

Adding this SO question to the answer because it contains useful information about solving CORS (Cross Origin Resource Sharing).

Emulate getting Jira JSON data via web link in browser with JavaScript

1 Answers1