How do I access a custom JSON file through jquery?

Declan Murphy August 18, 2015

I have a javascript file that needs to read data from a json file and use the data it reads. I know that I need to have the json file on the same server as the instance and javascript file requesting it but I'm not sure how to go about this.

So my question is two-fold.

  1. Where do I store the json file in my plugin so that it can be read by the instance after starting it using atlas-run?
  2. What url do I use in the ajax request in my javascript file to read this json file?

The following is my method for retrieving the json data:

// Read info messages from JSON file
    function getJson(){
        var myObject = [];
        AJS.$.ajax({
            url: "NEED HELP HERE",
            type: 'get',
            dataType: 'json',
            async: false,
            success: function(data) {
                myObject = data;
            }
        });
        return myObject;
    }


And this is a snippet of the method where I make use of the json data:

function getMsg(){
        var msg = "";
        var issueStatus = AJS.$('#status-val').text();
        issueStatus = $.trim(issueStatus);
        var issueAssignee = AJS.$('#assignee-val').text();
        issueAssignee = $.trim(issueAssignee);
        var msgArray = getJson();
        if(issueStatus === "Submitted"){
            if (user === issueAssignee){
                 msg = msgArray.Submitted[0].assigneeMsg;
            }
            else {
                msg = msgArray.Submitted[0].generalMsg;
            }
        }
        return msg;
}

 

Finally, here is my json file:

 

{
    "Submitted":[
        {
            "assigneeMsg":"This is a new translation job. As a TL-Approver, you are required to provide an estimated delivery date and a price for the job upon transitioning the issue.",
            "generalMsg":"This job has been submitted to TranslationLoft for review. Upon review, TranslationLoft will reply with a quote containing the price and estimated delivery date."
        }
    ],
    "tl-quoted":[
        {
            "assigneeMsg":"TranslationLoft have approved the job for translation and have quoted an estimated delivery date and the cost to complete the job. As a Client-Approver, you have the option of accepting or rejecting this quote. If you choose to reject the quote, please leave a comment detailing your reasons. Once rejected, TranslationLoft can choose to requote the job if possible but may decide to close the job before progressing further. Upon acceptance of the quote, TranslationLoft will be able to progress with the job as stated.",
            "generalMsg":"The quote has been sent to the client for review. Please wait for the client to respond with their acceptance or rejection of the quote."
        }
    ],
    "client-accepted":[
        {
            "assigneeMsg":"The quote has been accepted by the client and translation can begin.",
            "generalMsg":"Acceptance of the quote has been delivered to TranslationLoft. Please wait while the job is transitioned and translation begins."
            }
    ],
    "Client-Rejected":[
        {
            "assigneeMsg":"The quote has been rejected by the client. Please provide a new quote or close the job with a reason for the closure.",
            "generalMsg":"Rejection of the quote has been delivered to TranslationLoft. Please wait while TranslationLoft reviews the quote and makes their decision regarding a requote."
        }
    ]
}

1 answer

Comments for this post are closed

Community moderators have prevented the ability to post new answers.

Post a new question

2 votes
Tomasz Stec
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
August 18, 2015

Hi,

If you operate on immutable JSON and you are not going to change it programmatically just put it under the resources directory in your plugin:


where-to-put-json.PNG

Then you need to declare it in atlassian-plugin.xml as downloadable resource, for example:

<web-resource key="some-key" name="The name of resources">
<!-- if you put it in for instance "others" directory then-->
<resource type="download" name="your-json-file-name.json" location="others/your-json-file-name.json"></resource>
</web-resources>

if you have trouble about atlassian-plugin.xml declarations read this: Web resource plugin module

If everythings go right after atlas-run you can get your JSON using url of this pattern:

http://<hostname>:<port>/<context_path_if_any>/download/resources/<fully_qualified_plugin_name_with_package>:<plugin_module_key>/<reource_name>
if your computer name is: PC
and you start JIRA as you start JIRA using atlas-run --product jira on default port 2990
and your plugin name is com.example.my-awsome-plugin
the url for your JSON would be:
http://PC:2990/jira/download/resources/com.example.my-awsome-plugin:some-key/your-json-file-name.json

 

If you want to generate JSON programmatically for each client request you will need to implement rest plugin module

ad2. In your code should be then:

AJS.$.ajax({
url: AJS.contextPath()+"/download/resources/com.example.my-awsome-plugin:some-key/your-json-file-name.json",
...

 

oh and i would suggest set async flag for your ajax to true or do not declare it at all (default is true). Why? Check this out.

Declan Murphy August 27, 2015

@Tomasz Stec Thank you for your help. Apologies that I couldn't reply sooner but I had to focus on another area for a little while. I'm back to this now and I've tried integrating your suggestions but I'm having a problem. I'm not sure if the ajax call is failing to get the JSON or what but the array that I'm copying the data into seems to be empty. Here's what I have now: <code> // Read info messages from JSON file function getJson(){ AJS.$.ajax({ url: "jira/download/resources/com.my.plugin.plugin-name:info-msg-json/infoMsg.json", type: 'get', dataType: 'json', async: true, success: function(data) { myObject = data; console.log("Data : " + data); } }); } </code> <code> function getMsg(){ var msgArray = []; var msg = ""; var issueStatus = AJS.$('#status-val').text(); issueStatus = $.trim(issueStatus); var issueAssignee = AJS.$('#assignee-val').text(); issueAssignee = $.trim(issueAssignee); msgArray = myObject; console.log("---------Array Contents---------") for (var i = 0; i < msgArray.length; i++) { console.log("Index [" + i + "] : "); console.dir(msgArray); } console.log("--------------------------------"); </code> I also have the json file added as a web resource in atlassian-plugin.xml <code> <web-resource key="info-msg-json" name="Info Message Json"> <resource type="download" name="infoMsg.json" location="json/infoMsg.json"></resource> <context>atl.general</context> <context>atl.admin</context> </web-resource> </code> Can you see where I'm going wrong?

Declan Murphy August 27, 2015

@Tomasz Stec

Tomasz Stec
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
August 27, 2015

First of all check if you can see the infoMsg.json file content under url: http://<domain>:<port>/jira/download/resources/com.my.plugin.plugin-name:info-msg-json/infoMsg.json Im not sure but i think you forgot leading '/' (slash) in you ajax call. Try: ... url: AJS.contextPath()+ "/download/resources/com.my.plugin.plugin-name:info-msg-json/infoMsg.json", ... AJS.contextPath() will make sure it's correct.

Declan Murphy August 27, 2015

@Tomasz Stec Thank you for the reply. I have since added the missing forward slash. I have also used AJS.contextPath() and have checked to see if I can see the .json file using the url - I can. My array is still showing nothing however when I log it to the console. It seems to be an issue with my ajax call, as if it is failing. // Read info messages from JSON file function getJson(){ console.log("Context Path : " + AJS.contextPath()); AJS.$.ajax({ url: AJS.contextPath() + "/download/resources/com.atlassian.jira.tutorial.translationloft-jira:info-msg-json/infoMsg.json", type: 'get', dataType: 'json', async: false, success: function(data) { myObject = data; console.log(JSON.stringify(data, null, " ")); console.log(JSON.stringify(myObject, null, " ")); } }); return myObject; } I have tried both setting async to true and false and as you can see, I am trying to display the contents of both data and the myObject array that I'm passing the data too but to no avail.

Tomasz Stec
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
August 27, 2015

try it like this: AJS.$.ajax({ url : AJS.contextPath() + "/download/resources/com.atlassian.jira.tutorial.translationloft-jira:info-msg-json/infoMsg.json", success : function(data) { alert("success! data = "+data); }, dataType : "json" }); then if it succeed, try to add type: 'get' and other parameters

TAGS
AUG Leaders

Atlassian Community Events