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

The ancient oracle of Delphi and the modern login portal of Microsoft

Utilize the JavaScript .send function to pass an array

Shader customization and dynamic window resizing with Three.js

What is the reason that the 400 status code consistently causes the enter catch block to execute when using axios?

Organize your file dependencies efficiently using NPM

A simple way to initiate an AJAX call once the page has completed loading is by using the `window.location.href` as the

Utilizing modals for form validation in Angular

Feeling lost about arrow functions in JavaScript

`Stop the JW Player from playing several videos simultaneously`

Check the dimensions of the image file entered using AngularJS on the client side

Include a character in a tube using Angular

Running a JavaScript asynchronous function and capturing the output using Selenium

Animated the height of a rectangle during initial loading and when the mouse hovers over or leaves

Accessing a local JSON data file via an AJAX call

Enhance your website with the jQuery autocomplete feature, complete with

Stop JavaScript Injection Attacks

Angular JS application failing to load in browser due to a simple issue

How to achieve a seamless iframe effect using CSS

Intranet User Interface Developed with AngularJS

What is the best way to iterate over my JSON data using JavaScript in order to dynamically generate cards on my HTML page?