Angular method $http.get is failing to function as intended

Question

Angular method $http.get is failing to function as intended

This is the HTML and JavaScript code I have written.

<!DOCTYPE html>
<html ng-app>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script src="js/angular.js"></script>
    <script src="js/app.js"></script>
</head>
<body ng-controller="MainController">
    Name: {{user.login}}   
</body>
</html>

Here is my JavaScript function for MainController.

var MainController = function($scope, $http) {
    var onUserComplete = function(response) {
        $scope.user = response.data;
    };

    $http.get("https://api.github.com/users/sfshameem5")
    .then(onUserComplete);

    $scope.message = "Hello, Angular!";
}

I am hoping to display the user's login name with {{user.login}}, but it's not showing up as expected.

javascript angularjs

Answer 1

Answer №1

Try this solution for your code: Instead of:

$scope.user = response;

Use:

$scope.user = response.data;

The following code snippet is currently operational.

Here is the HTML:

<!DOCTYPE html>
    <html ng-app="app">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
            <script src="https://code.angularjs.org/angular-1.0.1.js"></script>
    </head>
    <body ng-controller="MainController">
        Name: {{user.login}}
    </body>
    </html>

And for your JavaScript file:

var app = angular.module('app', []);
app.controller('MainController', function($scope, $http) {
    $http({
        method: "GET",
        url: "https://api.github.com/users/sfshameem5",
    })
            .success(function(response) {
                $scope.user = response;
             })
            .error(function(response) {
                console.log("Failed fetching data:" + response);
            });
});

Answer 2

Try this solution for your code: Instead of:

$scope.user = response;

Use:

$scope.user = response.data;

The following code snippet is currently operational.

Here is the HTML:

<!DOCTYPE html>
    <html ng-app="app">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
            <script src="https://code.angularjs.org/angular-1.0.1.js"></script>
    </head>
    <body ng-controller="MainController">
        Name: {{user.login}}
    </body>
    </html>

And for your JavaScript file:

var app = angular.module('app', []);
app.controller('MainController', function($scope, $http) {
    $http({
        method: "GET",
        url: "https://api.github.com/users/sfshameem5",
    })
            .success(function(response) {
                $scope.user = response;
             })
            .error(function(response) {
                console.log("Failed fetching data:" + response);
            });
});

Answer 3

Answer №2

Utilizing $http's GET method

$http({
   method:"get",
   url:"https://api.github.com/users/sfshameem5"
   }).success(function(response){
      $scope.user=response.data
   }).error(function(err){
      console.log(err)
   })

Answer 4

Utilizing $http's GET method

$http({
   method:"get",
   url:"https://api.github.com/users/sfshameem5"
   }).success(function(response){
      $scope.user=response.data
   }).error(function(err){
      console.log(err)
   })

Angular method $http.get is failing to function as intended

Answer №1

Answer №2

Similar questions

Tips on creating a keypress function for a div element with the contenteditable attribute

Is there a way to dynamically change the height in jQuery/JavaScript?

Issue in Angular Material: The export 'MaterialComponents' could not be located in './material/material.module'

getting rid of the angular hash symbol and prefix from the anchor tag

Passing props to children in the Next JS Layout component is a crucial aspect of

Utilizing Node.js ORM2 callback functions with custom parameters

Assistance needed with dynamically resizing a background image

An element generated through JavaScript fails to display on the webpage

Activate an event on a separate webpage using jQuery or JavaScript

I had hoped to remove just one item, but now the entire database is being erased

Comparing Chutzpah and Karma test runners: Understanding the distinctions

How can we show a div element when hovering over another element using css-in-js?

Determine whether a component is linked to an event listener

TRPC fails to respond to the passed configuration or variables (e.g., when enabled is set to false)

How can we eliminate the modal-open class in Angular when transitioning to a different URL?

HTML5 on its own versus the dynamic duo of jQuery Mobile and AngularJS

What is preventing me from loading js and css files on my web pages?

Transform the given text into components applicable to AngularJS

Utilizing query parameters as variables in rewrites with Next.js

Error message: When attempting to create dynamic inputs in React, an error occurs stating that instance.render is not