Having trouble connecting to the http json service in AngularJS

I recently started learning angularjs and I'm facing an issue with my code.

There seems to be a flaw in the code and I'm uncertain about it.

From a java perspective, the httpController has a nested function defined inside.

Below is the code snippet:

index.html

<!DOCTYPE html>
<html  >

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body>
    <div ng-app="myapp" ng-controller="HelloController">
        <h2>{{message}}</h2>
    </div>
    <div ng-app="httpService" ng-controller="httpController">
        <div>FirstName:{{user.name}}</div>
    </div>
</body>

</html>

Script.js

var app = angular.module("myapp", []);
app.controller("HelloController", function($scope) {
    $scope.message = "Hello, AngularJS";    
});

var httpApp=angular.module("httpService",[]);

httpApp.controller("httpController",function($scope,$http){

    var onUserComplete=function(response){
        $scope.user=""response.data"";
    }

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

}
);

Answer №1

It is important to note that only one ng-app will be automatically initialized on your page. Removing the first directive allows the second ngApp to function properly.

var httpApp = angular.module("httpService", []);

httpApp.controller("httpController", function($scope, $http) {

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

  $http.get("https://api.github.com/users/rob").then(onUserComplete);
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>

<div ng-app="httpService" ng-controller="httpController">
  <div>FirstName: {{user.name}}</div>
</div>

Remember, there is a typographical error in your callback function - remove the double quotes around response.data. Additionally, with Angular version 1.5.6, specifying dependencies or injecting the $http service is unnecessary for your code to function correctly.

Answer №2

https://example.com/code-sample

<body ng-app="httpService">

    <div  ng-controller="httpController">
        <div>FirstName: {{user.key}}</div>
    </div>
</body>

This code snippet is fully functional...give it a try!

Avoid using ng-app multiple times in your program as it may cause issues with the functionality

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to implement a series of delayed animations in jQuery that are connected

Imagine you have the following items: <div id="d1"><span>This is div1</span></div> <div id="d2"><span>This is div2</span></div> <div id="d3"><span>This is div3</sp ...

Challenge of integrating React Router with Express GET requests

I am struggling to understand how react router and express routes work together. This is what I currently have set up: app.get('*', function(req, res) { res.sendFile(path.resolve(__dirname) + '/server/static/index.html'); }); // ...

Creating reactive behavior with a Promise initiated within a constructor - A guide

I am facing an issue with my Thing class. In the constructor, there is an asynchronous operation using fetch. Once the fetch completes, the result is assigned to a field in the Thing object: class Thing { constructor() { this.image = null ...

What is the best way to guide users to different pages on the website without disrupting the socket connection?

I am looking to create a user-friendly web application utilizing socket.io and express. This website will consist of two main pages: the "Rooms" page and the individual "Room" page. The "Rooms" page allows users to input their name, create a new room, or j ...

Using Typescript to set a custom timeout duration based on a dynamic variable within a for loop

My function includes a timeout that changes every 3 seconds: setActiveImage(promotions) { for (let i = 0; i <= promotions.length - 1; i++) { setTimeout(()=> { this.activeImage = 'http://myrul/public/Commercials/' + promo ...

What's the reason for text-alignment not functioning properly?

After some testing, I have come up with the following code: .Greetings { width:100%; display:block; text-align:center; font-family: "Times New Roman", Times, serif; font-size:75px; color:#208CB7; } The objective was to center the text on the ...

What is the best way to ensure that the larger child divs always fit perfectly within the parent div?

Creating a Responsive Layout <div class="container"> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </div> CSS Styling .box1, .box2, .box3{ display: block; f ...

Exploring the Relationship between Parent and Child Scopes in AngularJS

point 1 I'm perplexed as to why I couldn't access the child controller property using {{$scope.parentcities}}. However, when I simply use {{parentcities}}, it works. Why is it that we cannot write $scope dot and then property name? <div ng-a ...

Attempting to send an array of files to a Meteor function

When calling a method within a submit button event, the code looks like this: 'submit #form': function(event, tmpl){ var files = null; if(event.target.fileInput) files = event.target.fileInput.files; console.log(f); Met ...

What could be causing the empty object return from the Async function in my Typescript code on Next JS?

Encountering issues with an async function. In the ../lib folder, I have a class for handling data from an API website. However, when attempting to load the API data within an async function, I encounter difficulties. The async function does not return a ...

What is the best way to utilize useRef on a component that is not accessible within React BigCalendar?

I'm currently working with React Big Calendar (https://github.com/intljusticemission/react-big-calendar) and facing a challenge with responsive styling. I need to detach the horizontal scrollbar (overflow-x) of a specific div, .rbc-agenda-view, and at ...

Why isn't $.post functioning properly in any instance?

I've been experiencing issues with my $.post calls throughout my code. Despite not sending requests to different domains, everything is localhosted. My Mac OS X 10.8 automatically defined my localhost alias as ramon.local, and I'm trying to make ...

Material selection through span in three.js is not functional

Initially, the span element was functioning properly for me. However, after setting up materialsLib and initMaterialSelectionMenus based on the documentation and examples, the span stopped working and now the model is not visible. Any assistance would be g ...

Change the text inside a container without losing any associated event listeners using JavaScript or jQuery

Here is the HTML code: <div id="div001"> This is ${Row.1}. <p>${Row.2} explain something else.</p> <p>${Row.3} welcome you. <span>${Hello.World}, this is a new world.</span></p> </div> My objective is ...

Encountering difficulty in adding content to a table using JavaScript. An error message appears stating that assignment to a function

I am utilizing ajax to retrieve an item from a web API, and then attempting to allocate attributes of that item to a table: function find() { var id = $('#contentID').val(); $.getJSON(uri + '/' + id) .done( ...

Variable in v-for loop is not properly declared

Currently, I am attempting to iterate through an array of objects retrieved from the backend and display these objects on the frontend. The Vue framework is throwing an error stating that "event" is not defined on the instance but referenced during render. ...

Issue with Jquery AJAX success function specifically in Firefox browser, while other functions in the script are functioning correctly

I have 4 scripts using ajax, but one of them isn't functioning properly in Firefox. Even the alert in success doesn't trigger anything. There are no error messages, just nothing happening. However, it works perfectly fine in IE and Chrome. Belo ...

Generating Placeholder Variables Within a v-for Iteration

Encountering a problem with Vue-JS involving v-for loops and v-model properties. I have an array of items: <input v-for="i in list" v-model="i.model" ... (other tags that use i) > </input> Accompanied by some JavaScr ...

An error of TypeError is being encountered in AngularJS

Hello, I am new to creating mobile apps with Ionic and Angular. Currently, I have a simple login form and a corresponding login button that triggers a controller. Here is the code snippet for the controller: angular.module('starter.controllers', ...

Manipulating elements with JavaScript to remove them, while ensuring that the empty space is automatically filled

Recently, I decided to enhance my understanding of JavaScript by experimenting with it on various websites. My goal was to use JavaScript to remove the right bar from a webpage and have the remaining body text automatically fill in the space left behind. ...