Angular rest call is returning an undefined response object attribute

Question

Angular rest call is returning an undefined response object attribute

When attempting to retrieve the attribute of a response object, it is returning as "undefined".

var app = angular.module('angularjs-starter', []);
app.controller('MainCtrl', function($scope, $http) {


    $scope.addNewChoice = function () {
        console.log('aaaa');
        $http.get("http://api.nexmo.com/verify/json?api_key=569b1af&api_secret=d0de241&number=918650298011&brand=MyApp").success(function(response) {$scope.res = response.data;});
        console.log(res.request_id);
        console.log(res.status);
        console.log(res.error_text);

    };


});

Result in web console:

aaaa
angular.min.js:102 ReferenceError: res is not defined

Any suggestions on what might be going wrong in my code?

javascript angularjs rest

Answer 1

Answer №1

Your console.log statements are in the wrong place - they should be inside the $http callback function to ensure they run after the request is complete. You also need to refer to $scope.res instead of just res.

$http.get("http://api.nexmo.com/verify/json?api_key=56a9b1af&api_secret=d30de241&number=919650298011&brand=MyApp").success(function(response) {
    $scope.res = response.data;
    console.log($scope.res.request_id);
    console.log($scope.res.status);
    console.log($scope.res.error_text);
});

Answer 2

Your console.log statements are in the wrong place - they should be inside the $http callback function to ensure they run after the request is complete. You also need to refer to $scope.res instead of just res.

$http.get("http://api.nexmo.com/verify/json?api_key=56a9b1af&api_secret=d30de241&number=919650298011&brand=MyApp").success(function(response) {
    $scope.res = response.data;
    console.log($scope.res.request_id);
    console.log($scope.res.status);
    console.log($scope.res.error_text);
});

Angular rest call is returning an undefined response object attribute

Answer №1

Similar questions

Tips for sending props to Material UI components

Prevent the box from closing automatically after submitting a form using jQuery

Can we disable hydration warnings for all nested children within a component in NextJS?

Enhancing Page Content Dynamism: Making Elements Static

What could be causing my dropdown links to malfunction on the desktop version?

Iterate over the contents within the div tag

Having trouble displaying the API response data on the screen in Next.js

The user score tracking database, cataloging personal scoring history

Importing Vue and Vuex modules from separate files

attempting to retrieve the selected values from within an iframe

Unable to deploy Azure App Service due to difficulties installing node modules

JavaScript Function for Finding the Time Difference Between Two Dates (in Years, Days, Hours, or Less than One Hour)

Use jQuery to display the first 5 rows of a table

Creating a JavaScript function to automatically hide a dropdown menu after a specific duration

Import components exclusively from the root/app directory in Angular 2

Avoiding unnecessary DOM updates in VueJS

What is the best way to route a localpath to a different page including parameters in Nuxt Js?

AngularJS form: Collecting and saving radio button group choices in an array or posting selections to the server

What is the necessity for an additional item?