how to load local json file in single page application with angularjs

Question

I'm building a what called mini single page application which all the logic is in the client side and i'm using Angular for that. my problem is to load a JSON file which is not stored at any server but in my project tree - each time that i'm trying to load the file i'm getting 404.3 error code (tried with several browsers) - there is no issue with my call as i tried to call to a JSON file that stored on webserver and it worked wonderful - the only problem is when i'm trying to call to a local JSON. this is my call:

app.controller("myCtrl", function ($scope, $http) {
$http.get('/Data/names.json')
.success(function (data, status, header, config) {
    console.log("file loaded");
    console.log(data);
    console.log(status);
    console.log(header);
    console.log(config);

})
.error(function (data, status, header, config) { 
    console.log("ERROR file didn't load");
    //console.log(data);
    //console.log(status);
    //console.log(header);
    //console.log(config);
 })

});

solved by adding web.config file to my project with the following lines:

<system.webServer> <staticContent> <mimeMap fileExtension=".json" mimeType="application/json" /> </staticContent> </system.webServer>

Answer 1

Solved by adding web.config file to my project with the following lines:

<system.webServer>
<staticContent>
  <mimeMap fileExtension=".json" mimeType="application/json" />
</staticContent>