Obtaining a JSON object from a URL through 'GET' request using $resource in AngularJS

Question

Obtaining a JSON object from a URL through 'GET' request using $resource in AngularJS

Just starting out with AngularJS and struggling to understand web services as well. My current task involves fetching a JSON object from the following URL:

To retrieve the JSON object, I need to access:

I am completely lost on how to proceed... Any assistance in modifying my code would be greatly appreciated.

Thank you in advance! Below is the JavaScript code I have:

'use strict';

var services = angular.module('services', ['ngResource']);

services.factory('dataFactory', ['$resource','$http', '$log',
        function ($resource, $http, $log) {
                return {
                    getAllUsers: function(){
                        return  $resource('http://mylocalhostname.dev/users/list',{city_id:12}
                            ,{
                                locate: {method: 'GET', isArray: true, transformResponse: $http.defaults.transformResponse.concat(function(data, headersGetter)
                                  $log.info(data.UsersList[0]);
                                  return data.UsersList[0].userName;
                                })}
                            }
                        );
                    }
                } 
    }]);

Upon testing, I receive the following message in my console:

GET 200 OK 164ms angular.js (line 7772) (in red color) (an empty string)

javascript json web-services angularjs angularjs-service

Answer 1

Answer №1

(Although this question is quite old and still without a solution, it popped up at the top of my recent search results. Hopefully, I can help close this particular loop)

Here is a straightforward example of a controller fetching data from a basic factory. The factory uses $resource to access a file hosted locally and then returns the contents of that file back to the controller.

The factory:

'use strict';
angular.module('myApp')
  .factory('myFactory', ['$resource', function($resource) {
     return function(fileName){
       return $resource(fileName, {});
     };
  }]);

The controller:

'use strict';
var fileToGet = 'some/path/to/file.json';
angular.module('myApp')
    .controller('myController', function($scope, myFactory) {
   var getDefs = new myFactory(fileToGet).get(function(data) {
      $scope.wholeFile = data;
      // $scope.wholeFile now holds the complete JSON-formatted object

      $scope.someSection = data.section;
      // $scope.someSection now contains the "varX" and "varY" items

      $scope.myStringX = JSON.stringify(data.section.varX);
      // retrieves the stringified value 
   });
});

The JSON-formatted file:

{
  "someVar": "xyz",
  "someArray": [
    {
      "element0A": "foo",
      "element0B": "bar"
    },
    {
      "element1A": "man",
      "element1B": "chu"
    }
  ],
  "section": {
     "varX": 0,
     "varY": "yyyy"
  }
}

Answer 2

(Although this question is quite old and still without a solution, it popped up at the top of my recent search results. Hopefully, I can help close this particular loop)

Here is a straightforward example of a controller fetching data from a basic factory. The factory uses $resource to access a file hosted locally and then returns the contents of that file back to the controller.

The factory:

'use strict';
angular.module('myApp')
  .factory('myFactory', ['$resource', function($resource) {
     return function(fileName){
       return $resource(fileName, {});
     };
  }]);

The controller:

'use strict';
var fileToGet = 'some/path/to/file.json';
angular.module('myApp')
    .controller('myController', function($scope, myFactory) {
   var getDefs = new myFactory(fileToGet).get(function(data) {
      $scope.wholeFile = data;
      // $scope.wholeFile now holds the complete JSON-formatted object

      $scope.someSection = data.section;
      // $scope.someSection now contains the "varX" and "varY" items

      $scope.myStringX = JSON.stringify(data.section.varX);
      // retrieves the stringified value 
   });
});

The JSON-formatted file:

{
  "someVar": "xyz",
  "someArray": [
    {
      "element0A": "foo",
      "element0B": "bar"
    },
    {
      "element1A": "man",
      "element1B": "chu"
    }
  ],
  "section": {
     "varX": 0,
     "varY": "yyyy"
  }
}

Obtaining a JSON object from a URL through 'GET' request using $resource in AngularJS

Answer №1

Similar questions

The ng-model directive template in Angular JS fails to function properly when used inside the ng-switch directive

Dealing with models in Vue.js is proving to be quite a challenge

Having difficulties executing a JavaScript file in the command prompt

Attempting to store data types such as json, jsonb, hstore, xml, enum, ipaddr, etc. results in an error message indicating that the column "x" is of type json whereas the expression is of type character varying

Fill out the form field using an AJAX request

Steps to verify the functionality of an uploaded wcf service on a web server

A pair of variables combined within a set of single quotation marks

Pass the selected value from the view to the controller using filters

Keep clicking on the Protractor element until it becomes enabled

Submitting a nested object to a Spring MVC controller through JSON format

Tips for maintaining previously accessed data when utilizing useQuery

Obtain marker icons from a text column in a fusion table using the Google Maps API

"Utilizing jQuery and AJAX to manage identical-named option boxes with

Is it recommended to use django's render_to_string response with innerHTML?

Display the item for which the date is more recent than today's date

The method JSONObject.toString() will provide a snapshot of the data

What could be the reason for the malfunctioning of my express delete request?

What is the best way to assign a value to this.var within a function nested in the same class in JavaScript?

Submitting a form in React/Javascript: A step-by-step guide

The issue with ngFileUpload causing empty file posts on Safari