I need to code an AngularJS page which displays some JSON data coming from a REST Service.
The REST service when invoked displays this JSON example data:
[{"key":"ABX1234","value":"Network Hub"}]
Here is the HTML page that I'm using to retrieve the data:
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script>
function Hello($scope, $http) {
$http.get('http://host/json').
success(function(data) {
$scope.json = data;
});
}
</script>
</head>
<body>
<div ng-controller="Hello">
<p>The ID is {{json.key}}</p>
<p>The content is {{json.value}}</p>
</div>
</body>
</html>
Unfortunately nothing is displayed as json.key or json.value. Can you help me to find out what is the issue ?
Thanks!
It should be like this:
<div ng-controller="Hello">
<div ng-repeat="json in json">
<p>The ID is {{json.key}}</p>
<p>The content is {{json.value}}</p>
</div>
</div>
You are getting array of objects. It needs to be iterated.
Related
I am trying to call one angular js function using controller. I am using code:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DevPortal</title>
<script src="js/angular.min.js"></script>
<script src="js/controllers/app.js"></script>
</head>
<body ng-app="devportal">
<div ng-include="'templates/login_menu.html'"></div>
</body>
</html>
app.js
var app = angular.module('devportal', []);
app.controller('AppController', function($scope, $http) {
return{
getuserloginmenu : function(){$http.get('/getuserloginmenu').then(function(response){$scope.loginmenu=response.data;})},
getuserloginmenu1 : function(){$http.get('/getuserloginmenu1').then(function(response){$scope.loginmenu1=response.data;})}
};
});
login_menu.html
<div ng-controller="AppController as ctrl">
<div on-init="ctrl.getuserloginmenu()">
<p ng-repeat="menu in loginmenu">{{menu}}</p>
</div>
</div>
My rest service is working properly and returns String array. I am not able to call/get the rest service data in html.
Your code seems legit, the only thing making noise (at least for me) is the on-init you added to call the function. I think that's the problem.
Try
<div ng-controller="AppController as ctrl">
<div ng-init="ctrl.getuserloginmenu()">
<p ng-repeat="menu in loginmenu">{{menu}}</p>
</div>
</div>
And maybe.. To keep it clean: Change the syntax of the controller (even if it works)
var app = angular.module('devportal', []);
app.controller('AppController', function($scope, $http) {
$scope.getuserloginmenu = function(){$http.get('/getuserloginmenu').then(function(response){$scope.loginmenu=response.data;})};
$scope.getuserloginmenu1 = function(){$http.get('/getuserloginmenu1').then(function(response){$scope.loginmenu1=response.data;})};
});
Edit:
That's a missuse of ng-init. I'll leave the documentation of Angular for that matter
https://www.w3schools.com/angular/ng_ng-init.asp
But shortly, you want $scope.loginmenu to populate. You don't need to wait until the div loads. You can populate $scope.loginmenu right away when the controller inits.
View
<div ng-controller="AppController as ctrl">
<div>
<p ng-repeat="menu in loginmenu">{{menu}}</p>
</div>
</div>
Controller
var app = angular.module('devportal', []);
app.controller('AppController', function($scope, $http) {
$scope.getuserloginmenu = function(){$http.get('/getuserloginmenu').then(function(response){$scope.loginmenu=response.data;})};
$scope.getuserloginmenu1 = function(){$http.get('/getuserloginmenu1').then(function(response){$scope.loginmenu1=response.data;})};
$scope.getuserloginmenu();
});
I am trying to get any information with Angular from the local api that I have created in Ruby, Sinatra platform. I am sure that the api is running on the port 4567 since I can see the data if i access m it directly through web interface. When I do that I see this (just next to the number 0 there is like a small arrow so it is possible to minimize the details of the object):
0
id "1"
name "Company-A21"
address "Gany-A11"
If I want to see RAW data I get this:
[{"id":"1","name":"Company-A21","address":"Gany-A11"}]
On the "other side" I am running apache2 and this HTML file:
<!doctype html>
<html >
<head>
<title>Hello AngularJS</title>
<script src="hello.js"></script>
</head>
<body>
<div ng-controller="Hello">
<p>The ID is {{company.id}}</p>
<p>The content is {{company.name}}</p>
</div>
</body>
</html>
And the hello.js:
angular.module('demo', [])
.controller('Hello', function($scope, $http){
$http.get('http://localhost:4567/api/v1/companies/2').
then(function(response) {
$scope.company = response.data;
});
});
Why I can not see response?
I just started to practice Angular and I stuck here...
Your data is an array of objects so you'd output it like: {{company[0].id}}
You probably followed an example using ng-repeat which would look something like this:
<div ng-repeat="company in companies">
<p>The ID is {{company.id}}</p>
<p>The content is {{company.name}}</p>
</div>
https://jsfiddle.net/ojzdxpt1/21/
Use ng-init to execute your get request. Implement your api call under a method:
angular.module('demo', [])
.controller('Hello', function($scope, $http){
$scope.getCompany = function(){
$http.get('http://localhost:4567/api/v1/companies/2').
then(function(response) {
$scope.company = response.data;
});
}
});
and use it in ng-init:
<!doctype html>
<html >
<head>
<title>Hello AngularJS</title>
<script src="hello.js"></script>
</head>
<body>
<div ng-controller="Hello" ng-init="getCompany()">
<p>The ID is {{company.id}}</p>
<p>The content is {{company.name}}</p>
</div>
</body>
</html>
var app = angular.module("app", []);
app.controller('emp', ['$scope', 'empService', function($scope, empService){
$scope.doSearch = function(){
empService.findEmployeeById($scope.searchempno, function(r){
$scope.empno = r.empno;
$scope.ename = r.ename;
$scope.salary = r.salary;
$scope.dptno = r.dptno;
});
};
}]);
app.service('empService', ['$http', '$log', function($http, $log){
this.findEmployeeById = function(empno, cb){
$http({
url: 'employees.json' + empno,
method: 'GET'
}).then(function(resp){
cb(resp.data);
});
};
}]);
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body ng-app="app">
<div ng-controller="emp">
<form class="form-inline">
<div class="form-group">
<label>Enter Employee Number:</label>
<input type="text" class="form-control" ng-model="searchEmpno"/>
</div>
<button class="btn btn-primary" ng-click="doSearch()">Search</button>
</form>
<hr>
<div class="row">
<div class="col-sm-2">Employee No</div>
<div class="col-sm-2">{{empno}}</div>
</div>
<div class="row">
<div class="col-sm-2">Employee Name</div>
<div class="col-sm-2">{{ename}}</div>
</div>
<div class="row">
<div class="col-sm-2">Salary</div>
<div class="col-sm-2">{{salary}}</div>
</div>
<div class="row">
<div class="col-sm-2">Deptno</div>
<div class="col-sm-2">{{dptno}}</div>
</div>
</div>
</body>
</html>
If I gave the number in input field like 1001 and click the search button. It will not show the details. I have checked the console, there is no error. My JSON file has been placed the same location of the HTML file.
Thanks,
SamBhishma
I have created an updated plunker here. First issue was what I mentioned in the comment. In your view, you are writing <input type="text" class="form-control" ng-model="searchEmpno"/>and in your controller, you're trying to access this variable as searchempno
Second issue is in your http request. You cannot pick and choose the data from json file based on the id. You have to get the entire JSON file, parse it and filter out the value if it matches your searchEmpno model value. I fixed it in the plunker.
Third issue, you are attaching plain values to your scope like $scope.empno , $scope.ename. Instead, you need to put such values into an object, so in your controller, put the matched employee object in the scope and in your view, reference it as {{obj.ename}} and so on.
Another thing, no need to return callbacks inside then. The clean way of handling successful, failed http calls is:
$http.get('url').then(function successCallback(response) {
// this callback will be called asynchronously
// when the response is available
}, function errorCallback(response) {
// called asynchronously if an error occurs
// or server returns response with an error status.
});
Read more about them here.
Take a look at the updated plunker to see if it matches your needs.
Problem is your model variable is wrong inside the view, try this
<input type="text" class="form-control" ng-model="searchEmpno"/>
DEMO
Here is my code and ng-repeat generated the list but not showing anything.
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body ng-app="myApp">
<div ng-controller="getHospitalCtrl">
<h3>my list</h3>
<ul>
<li ng-repeat="hospital in hospitals track by $index">
<p class="name">{{hospital.name}}</p>
<p class="location">{{hospital.address.city}}</p>
</li>
</ul>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
var app = angular.module('myApp',[]);
app.controller('getHospitalCtrl',function($scope, $http){
console.log('i m in getHospitalCtrl');
$http.get("url")
.then(function(response){
$scope.hospitals = JSON.stringify(response.data.data);
console.log($scope.hospitals);
//this console is printing the right json here
});
});
</script>
</body>
</html>
The json in console is like this
[{"_id":"57a5877bb23cda352156315a","userId":257,"name":"Fortis","email":"fortis#hospital.com","description":"Fortis description for testing","address":{"postalCode":"110088","state":"DL","city":"New Delhi","streetAddress":"s-fortis"},"coordinate":{"coordinates":[77.1545846,28.7164134],"type":"Point"}}]
Look at your code:
First you have
$scope.hospitals = response.data;
which initializes $scope.hospitals to what is returned in the http response.
But immediately after you have
$scope.hospitals = JSON.stringify($scope.hospitals.data);
So you're overwriting this value with a string. Using ng-repeat on a string doesn't make sense. ng-repeat is used to iterate over an array.
You should just have one initialization:
$scope.hospitals = response.data.data;
Input field contains JSON data set from some other script.I have to access in controller.How can I access it in controller.Code I am using something like this-
<html>
<head>
<title>Angular JS Controller</title>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app="" ng-controller="studentController">
Enter first name: <input class="get" type="text" ng-model="student">
</div>
<script>
function studentController($scope) {
console.log($scope.student);
}
</script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</body>
</html>
With Angular, the controller is who tells the View what the default value should be (not the other way around). The View would reflect that, and could update it (with ng-model), but it is initially set by the controller.
So, the controller knows because the controller sets it up:
.controller("studentController", function($scope){
$scope.student = "default name";
});