How can i read external json file in Azure-devops-extension development?

Question

I am trying to read json file inside "index.html" file of the project, since for azure devops extension we already have require.js library, hence wanted to use the same capability of it to import "config.json" file inside "index.html" file.

my index.html file look somewhat like this :

init block

VSS.init({
        explicitNotifyLoaded: true,
        usePlatformScripts: true,
        setupModuleLoader: true,
        moduleLoaderConfig: {
          paths: {
            "Static": "static"
          }
        }
});

require block

VSS.require(
        ["TFS/WorkItemTracking/Services", "Static/config"],
        function (_WorkItemServices, ConfigJson) {

        VSS.ready(function(){
            VSS.register(VSS.getContribution().id, function () {
              return {
                // Called when the active work item is modified
                onFieldChanged: function (args) {
                  console.log(
                    "inside onfield : " +
                      JSON.stringify(ConfigJson)
                  );
                }
                ....
              };
            });

            VSS.notifyLoadSucceeded();
        })
});

My vss-extension.json file :

File block

"files": [
    {
      "path": "static/config.json",
      "addressable": true,
      "contentType": "application/json"
    },
    ....
  ]

I am always getting require.js Script error: https://requirejs.org/docs/errors.html#scripterror

Took reference from:

Hi @Sankalp Sinha. Is there any update about this ticket? Feel free to let me know if the answers could give you some help. Just a remind of [this](https://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work). — Kevin Lu-MSFT, Oct 19 '20 at 04:08
Hi @Kevin Lu-MSFT thanks for your response , I already reffered to that post previously but I wanted to reuse the capability of already available require js , I resolved the problem by converting config.json to config.js and used AMD and entered the object inside define like this define({ }); — Sankalp Sinha, Oct 20 '20 at 16:43

score 0 · Accepted Answer · answered Oct 16 '20 at 06:50

I am afraid that you couldn't directly get the content of the json file.

But you could try to use the HTTP request to get the content.

Please refer to the following sample:

 onFieldChanged: function (args) {
                        var request = new XMLHttpRequest();
                        request.open('GET', 'config.json', true);
                        request.send(null);
                        request.onreadystatechange = function () {
                            if (request.readyState === 4 && request.status === 200) {
                                var type = request.getResponseHeader('Content-Type');
                                                console.log( "inside onfield : " + JSON.stringify(request.responseText));
                            }
                        }

Check out these two tickets for details.

Loading a JSON file in a VSTS extension

read local JSON file into variable

score 0 · Answer 2 · answered Oct 26 '20 at 07:43

Is VSS using unmodified RequireJS? If yes, then you can use JSON plugin, which will help:

https://github.com/millermedeiros/requirejs-plugins

Using it is pretty simple, you just have to add a prefix json! when specifying a json file as a dependency:

VSS.require(
        ["TFS/WorkItemTracking/Services", "json!Static/config"],
        function (_WorkItemServices, ConfigJson) {

        VSS.ready(function(){
            VSS.register(VSS.getContribution().id, function () {
              return {
                // Called when the active work item is modified
                onFieldChanged: function (args) {
                  console.log(
                    "inside onfield : " +
                      JSON.stringify(ConfigJson)
                  );
                }
                ....
              };
            });

            VSS.notifyLoadSucceeded();
        })
});

@SankalpSinha great. In case of any problems you can catch me here. Happy to help — Damian Dziaduch, Nov 18 '20 at 13:47

How can i read external json file in Azure-devops-extension development?

2 Answers2