Here's an example that doesn't require jQuery:

function loadJSON(path, success, error)
{
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function()
    {
        if (xhr.readyState === XMLHttpRequest.DONE) {
            if (xhr.status === 200) {
                if (success)
                    success(JSON.parse(xhr.responseText));
            } else {
                if (error)
                    error(xhr);
            }
        }
    };
    xhr.open("GET", path, true);
    xhr.send();
}

Call it as:

loadJSON('my-file.json',
         function(data) { console.log(data); },
         function(xhr) { console.error(xhr); }
);

If you want it as simple as it gets, then I would prefix your json content with

var jsonData = {"UIGroup": {"Parent": null, "Type": "public"}}....

which turns your file into a valid js file and then load it with

<script src="fakeData.json.js"></script>

after that, jsonData will have the required content because of literal object notation.

There is no way that you can load a json file into your page otherwise without ajax/httprequest.

Simple, fast, but bad for real project solution:

1. Rename myfile.json to data.js (name doesn't matter).
2. Create a variable in data.js and initialize it with your json var myData = {...your json...}
3. Add <script src="./data.js"></script> to your html file.
4. Now you can use myData variable from javascript with all data.

This solution is bad because you add a new variable in global scope and browser would still make a http request to get this .js file.

Also, If you want to make ajax requests to your local files, you can use http server. Take a look at very simple node js http-server.

Here's a way to do it without jQuery.

First create this function:

function loadJSON(callback) {   
  var xobj = new XMLHttpRequest();
  xobj.overrideMimeType("application/json");
  xobj.open('GET', '../news_data.json', true);
  xobj.onreadystatechange = function () {
    if (xobj.readyState == 4 && xobj.status == "200") {
      callback(JSON.parse(xobj.responseText));
    }
  };
  xobj.send(null);  
}

Then you can use it by simply calling something like this:

loadJSON(function(json) {
  console.log(json); // this will log out the json object
});

I found this by simply googling "read local json file javascript" (source)

Unfortunately, both XHR and the Fetch API are inextricably tied to HTTP, and cannot be used to load a resource from a relative path unless an HTTP server is involved. If you're loading your page via a file: URL, you won't be able to use XHR or Fetch to get that data.

There are only two methods available to you:

• Switch to JavaScript instead of regular JSON and use a <script> tag (as previously suggested to you in another answer)

• Allow the user to drag/drop the JSON file (or use <input type="file">) to get a File reference that you can then load.