Alternative way to fetch value from a local json file using $http
<p>I want to load countries list from a countries json file stored locally. I have included the file in <code>index.html</code> as:</p>

<pre><code>&lt;!-- Including Json --&gt;
&lt;script src="json/countries.json"&gt;&lt;/script&gt;
</code></pre>

<p>The Json file is saved in json folder with name countries.json, the file contents are as:</p>

<pre><code>[  
   {  
      "country_id":"1",
      "country_name":"Afghanistan"
   },
   {  
      "country_id":"2",
      "country_name":"Albania"
   },
   {  
      "country_id":"3",
      "country_name":"Algeria"
   },
   {  
      "country_id":"4",
      "country_name":"American Samoa"
   },
   {  
      "country_id":"5",
      "country_name":"Andorra"
   },
   {  
      "country_id":"6",
      "country_name":"Angola"
   },
   {  
      "country_id":"7",
      "country_name":"Anguilla"
   },
   {  
      "country_id":"8",
      "country_name":"Antarctica"
   },
   {  
      "country_id":"9",
      "country_name":"Antigua and Barbuda"
   },
   {  
      "country_id":"10",
      "country_name":"Argentina"
   },
   {  
      "country_id":"11",
      "country_name":"Armenia"
   },
   {  
      "country_id":"12",
      "country_name":"Aruba"
   },
   {  
      "country_id":"13",
      "country_name":"Australia"
   },
   {  
      "country_id":"14",
      "country_name":"Austria"
   },
   {  
      "country_id":"15",
      "country_name":"Azerbaijan"
   },
   {  
      "country_id":"16",
      "country_name":"Bahamas"
   },
   {  
      "country_id":"17",
      "country_name":"Bahrain"
   },
   {  
      "country_id":"18",
      "country_name":"Bangladesh"
   },
   {  
      "country_id":"19",
      "country_name":"Barbados"
   },
   {  
      "country_id":"20",
      "country_name":"Belarus"
   },
   {  
      "country_id":"21",
      "country_name":"Belgium"
   },
   {  
      "country_id":"22",
      "country_name":"Belize"
   },
   {  
      "country_id":"23",
      "country_name":"Benin"
   },
   {  
      "country_id":"24",
      "country_name":"Bermuda"
   }
]
</code></pre>

<p>To just name a few countries.<br><br></p>

<p>I could successfully parse the data and populate it to the UI from my controller referring the <code>$htttp.get()</code> service of angular as suggested <a href="https://stackoverflow.com/questions/13020821/how-to-load-json-into-my-angular-js-ng-model">by @jaime</a>:</p>

<pre><code>     //Getting the base url inorder to tell app where to find countries json
     var baseUrl = $location.absUrl().substring(0, $location.absUrl().indexOf('www')); 

                    //Fetching the countries Json
                    return $http.get(baseUrl+'www/json/countries.json')

                    //On Fetching the countries lsit
                    .then( function(response){
                        $scope.countryList =  response.data;
                    });
</code></pre>

<p>It works well, no doubt about it. But is there another alternative to achieve this functionality? Without using the $http.get()? I came accross <a href="https://docs.angularjs.org/api/ng/function/angular.fromJson" rel="nofollow noreferrer">angular.fromJson()</a>, but it won't parse a file path as it requires it's argument to be a json object. Also I came across alternatives using jquery as in <a href="https://stackoverflow.com/a/12091134/1904479">https://stackoverflow.com/a/12091134/1904479</a>. is there any other alternative which doesn't require jquery, Instead uses angular or ionic code?</p>