Alternative way to fetch value from a local json file using $http

Question

I want to load countries list from a countries json file stored locally. I have included the file in index.html as:

<!-- Including Json -->
<script src="json/countries.json"></script>

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

[  
   {  
      "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"
   }
]

To just name a few countries.

I could successfully parse the data and populate it to the UI from my controller referring the $htttp.get() service of angular as suggested by @jaime:

     //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;
                    });

It works well, no doubt about it. But is there another alternative to achieve this functionality? Without using the $http.get()? I came accross angular.fromJson(), 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 https://stackoverflow.com/a/12091134/1904479. is there any other alternative which doesn't require jquery, Instead uses angular or ionic code?

@dreamweiver Nothing wrong, just curious to know an alternative other than http calls, also the reason as to why go for http call. — Kailas, Mar 09 '16 at 08:04
well if it is static data always then you can just create a factory method with hard coded json response and return it . `angular.module('conciergeApp.services') .factory('CurrentUser', function() { return { id: 1, hotel_id: 1, } });` — dreamweiver, Mar 09 '16 at 09:32
@Kailas — How do you expect to get the data from a web server without using an HTTP request? That's how browsers and web servers communicate with each other! — Quentin, Mar 09 '16 at 09:44
The "jQuery alternative" (`$.getJSON`) is just a jQuery method for making an HTTP request. — Quentin, Mar 09 '16 at 09:45
`` — You've not provided a `type` attribute, so you are telling the browser to expect JavaScript in the response, not JSON. That will either do nothing or throw an error. Don't do that. — Quentin, Mar 09 '16 at 09:46
@Quentin Please correct me if I'm wrong, actually you need not have a web request for a resource you already have locally, right? — Kailas, Mar 09 '16 at 09:46
@Kailas — Define "locally". Are you asking about running the web page from a local directory instead of an HTTP server? — Quentin, Mar 09 '16 at 09:47
No, i meant to say the json file is in the www folder. It doesn't reside on server side but client side. — Kailas, Mar 09 '16 at 09:49
If it's on the client side, how can you write a path from the HTML document to it in the ` — Quentin, Mar 09 '16 at 09:54

score 2 · Accepted Answer · answered Mar 21 '16 at 06:44

Actually, we can use it, by declaring it in a constants file as:

Step 1) Create a file constants.jsand add the json object into it:

var ConstantsCountries  =  [  
       {  
          "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"
       }
    ]

Step 2: Include the js file in the index.html as:

<!-----Constants Classes---->
    <script src="Constants/Constants.js"></script>

Step 3: Use it in your controller as:

.controller('CountriesCtrl', function ($localStorage,$rootScope,$location,$ionicLoading,$ionicHistory,$timeout) { 
    $scope.countries = ConstantsCountries;
    console.log(angular.toJson($scope.countries));
}))

Why not use angular constants? Hence, "global variable (`ConstantsCountries`) is evil" — kmhigashioka, Mar 21 '16 at 08:34

Alternative way to fetch value from a local json file using $http

1 Answers1