Read JSON data in Angular JS script and use that data further in JS only

Question

I have searched it a lot , in all cases , they usually want to show it on HTML directly , but my purpose is to use the data in Angular JS only.

angular.module('myApp').factory('UserService', ['$http', '$q', function($http, $q){

    var url ;
    $http.get('/HomeAccessService-1/static/js/data.json').then(function(response) {
        url = response.data;
        //alert(JSON.stringify(url.data));
        });
    //var REST_SERVICE_URI = 'http://localhost:8080/HomeAccessService-1/user/';
    var REST_SERVICE_URI = JSON.stringify(url.data);
    var factory = {
        fetchAllUsers: fetchAllUsers,
        createUser: createUser,
        updateUser:updateUser,
        deleteUser:deleteUser
    };

return factory;

    function fetchAllUsers() {
        var deferred = $q.defer();
        $http.get(REST_SERVICE_URI)
            .then(
            function (response) {
                deferred.resolve(response.data);
            },
            function(errResponse){
                console.error('Error while fetching Users');
                deferred.reject(errResponse);
            }
        );
        return deferred.promise;
    }

I want to use this url data in other methods , the data is actually a REST API URL which i put in data.json file

{"data":"http://someotherip:8080/Service/user/"}

It shows object Object when alert ,

I dont want to show it in HTML but to use the data in angular js methods.

i dont want to alert , i am using alert just to see the value , the aim is to use the url value , which is coming object Object — anshulkatta
– anshulkatta, Commented Mar 12, 2017 at 6:50
store the response in $scope variable and use it anywhere within the JS . $scope.url = response.data; — Ziyad PK
– Ziyad PK, Commented Mar 12, 2017 at 7:03

Siva Pasupathi · Accepted Answer · 2017-03-12 07:02:06Z

1

Alert is showing up before your response reach. Put alert inside request promise. You will get the response. and use json.stringify(response.data) to make a json string

edited Mar 12, 2017 at 7:02

answered Mar 12, 2017 at 6:59

Siva Pasupathi

5141 gold badge4 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

anshulkatta Over a year ago

when i use var REST_SERVICE_URI = JSON.stringify(url.data); outside the http call , i get error in UI - Cannot read property 'data' of undefined

Siva Pasupathi Over a year ago

$http.get("./data/data.json").then(function(response){ var data= response; console.log(data); });

Sajeetharan · Accepted Answer · 2017-03-12 06:51:54Z

0

You should call the alert inside the promise otherwise it will be undefined when you alert it,

  $http.get('/Service-1/static/js/data.json').then(function(response) {
        url = response.data;
        alert(JSON.stringify(url.data));
   });*/

Inorder to display the correct data, you should use JSON.stringify()

alert(JSON.stringify(url.data));

edited Mar 12, 2017 at 6:51

answered Mar 12, 2017 at 6:47

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

8 Comments

Sajeetharan Over a year ago

@anshulkatta use JSON.stringify as mentioned in the answer

anshulkatta Over a year ago

ok it works , but how do i pass this to another variable let say var REST_SERVICE_URI and use it in other methods inside that same angular js file ,

Sajeetharan Over a year ago

define a angular constant and assign the value and use it across the file

anshulkatta Over a year ago

i am doing this - var url ; $http.get('/HomeAccessService-1/static/js/data.json').then(function(response) { url = response.data; alert(JSON.stringify(url.data)); }); //var REST_SERVICE_URI = 'localhost:8080/HomeAccessService-1/user'; var REST_SERVICE_URI = JSON.stringify(url.data);

anshulkatta Over a year ago

but getting REST_SERVICE_URI is not defined at Object.fetchAllUsers in chrome console

|

Dhananjay C · Accepted Answer · 2017-03-16 07:08:39Z

0

You can do one of the two things 1. Add REST_SERVICE_URI = .. instead of that alert statement OR 2. Add those geturl call inside fetchAllUsers function and then do your next steps once you get resopnse.data

//// Add url part inside get response
var url;
var REST_SERVICE_URI;
$http.get('/HomeAccessService-1/static/js/data.json').then(function(response) {
    url = response.data;
    REST_SERVICE_URI = JSON.stringify(url.data);
});
...

//// OR do it in sync

function fetchAllUsers() {
    var deferred = $q.defer();
    $http.get('/HomeAccessService-1/static/js/data.json').then(function(response) {
      url = response.data;
      REST_SERVICE_URI = JSON.stringify(url.data);
      $http.get(REST_SERVICE_URI)
          .then(
          function (response) {
              deferred.resolve(response.data);
          },
          function(errResponse){
              console.error('Error while fetching Users');
              deferred.reject(errResponse);
          }
      );
    });
    return deferred.promise;
}

edited Mar 16, 2017 at 7:08

answered Mar 12, 2017 at 7:18

Dhananjay C

5979 silver badges36 bronze badges

6 Comments

anshulkatta Over a year ago

i am getting $scope is not defined

Dhananjay C Over a year ago

Did you added $scope as a dependency injection inside your code ?

Dhananjay C Over a year ago

Something like this---> app.controller('myCtrl', ['$scope', function($scope) { ... }]);

Dhananjay C Over a year ago

Ok just saw your upadated questiom where you added factory. When you call fetchAllUsers that time you dont have that 'url'

Dhananjay C Over a year ago

Exactly! You can do one of the two things 1. Add REST_SERVICE_URI = .. instead of that alert statement OR 2. add those geturl call inside fetchAllUsers function and then do your next steps once you get resopnse.dara

|

Afzal Patel · Accepted Answer · 2017-03-16 07:21:24Z

0

 $scope.jsondata=json.stringify(response.data)
     console.log(jsondata.url);

take all the json in one javascript variable then travarse that using loop or variable like jsondata.url and use it in ur future api call.

answered Mar 16, 2017 at 7:21

Afzal Patel

1441 silver badge6 bronze badges

Collectives™ on Stack Overflow

Read JSON data in Angular JS script and use that data further in JS only

4 Answers 4

2 Comments

8 Comments

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

8 Comments

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related