How to make Json get method

Hi!
I am trying to resolve a JSON Get request to my app, but I couldn’t do it no matter what.
I even tried to link to a direct json file in the www route but nothing.

Update

I got the issue fixed by using $resource thank’s to gamrziou. The app works fine when using a local JSON file
I am now able to receive JSON Rest requests, but the service treats every character as an object itself.

My sercvices.js is now like:

angular.module('starter.services', [])
.factory('Recettes', ['$resource',
    function($resource){
      return $resource('http://localhost/celia/web/getproduit/v100:produit', {}, {
        'query': { method:'GET', isArray:false }
        });
    }]
  );

The controller:

.controller('DashCtrl', function($scope,Recettes, prod) {
  $scope.produits = Recettes.query();
})

And here is the request-response headers:

Request header Using a chrome extension

CSP: active
User-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/43.0.2357.134 Safari/537.36
Content-Type: text/plain; charset=utf-8 
Accept: */*
Accept-Encoding: gzip, deflate, sdch
Accept-Language: fr-FR,fr;q=0.8,en-US;q=0.6,en;q=0.4,ar;q=0.2

Response header

Date: Tue, 21 Jul 2015 08:24:50 GMT 
Server: Apache/2.4.12 (Win32) OpenSSL/1.0.1l PHP/5.6.8 
X-Powered-By: PHP/5.6.8
Cache-Control: no-cache 
Content-Length: 248
Keep-Alive: timeout=5, max=100
Connection: Keep-Alive
Content-Type: application/json

Finally the recieved JSON:

"[{"id":2,"nom":"test32","marque":{"nom_marque":"Aucune Marque"},"est_autorise":false,"description":"TEST"},{"id":1,"nom":"none","marque":{"nom_marque":"Aucune Marque"},"est_autorise":true,"description":"none"}]"

To explain more when the page loops through “produits” in my view, it generates 248 elements same as the Content-Length: 248 in the respond header.

So you want your service to act as a cache by calling the API only once?

Why don’t you use cache option of $http?

You may want to consider using $resource rather than $http, higher level of abstraction dedicated to REST resources.

1 Like
$http.jsonp(url)

Does that work?

Also why a factory and not a service? You can cache it with different ways, http has his own cache method and you have plugins to manage cache. You can even do it manually if you preffer.

1 Like

Thank you for your support guys, I got the first problem working by adding a resolve in the app.js

resolve: {
          prod: function($http){
            return $http.get('test.json')
            .then(function(response){
              return response.data;
            })
          }
        }

But as you guys mention this solution dosen’t work with RESTful services, and it will be called every time the user calls the correspondant view.

here is my server get link:

http://localhost/celia/web/getproduit/v100

and here is the request-responce headers:

Request headers

CSP: active
User-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/43.0.2357.134 Safari/537.36
Content-Type: text/plain; charset=utf-8 
Accept: */*
Accept-Encoding: gzip, deflate, sdch
Accept-Language: fr-FR,fr;q=0.8,en-US;q=0.6,en;q=0.4,ar;q=0.2

Response headers

Date: Tue, 21 Jul 2015 08:24:50 GMT 
Server: Apache/2.4.12 (Win32) OpenSSL/1.0.1l PHP/5.6.8 
X-Powered-By: PHP/5.6.8
Cache-Control: no-cache 
Content-Length: 248 
Keep-Alive: timeout=5, max=100
Connection: Keep-Alive
Content-Type: application/json 

I am new to angular and can’t figure out the way to implement the job in a service or by using the $resource.

Topic Updated
The issue now is in the json request decoding