Just im trying to pass my data using Angular JS but im getting blank page
i choose this example http://www.w3schools.com/angular/tryit.asp?filename=try_ng_customers_sql
Then i tried from my local database like this
<div ng-app="myApp" ng-controller="customersCtrl">
<table>
<tr ng-repeat="x in names">
<td>#{{ x.id }}</td>
<td>#{{ x.name }}</td>
</tr>
</table>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("http://localhost/sample/public/foo")
.then(function (response) {
$scope.names = response.data.hotels;
});
});
</script>
My http://localhost/sample/public/foo out put is like below so what im doing wrong
"{"hotels":[{"id":1,"name":"Sanmira Renaissance"},{"id":2,"name":"Galadari Hotel"},{"id":3,"name":"Grand Oriental Hotel"},{"id":4,"name":"Fullmoon Garden Hotel"},{"id":5,"name":"Ramada Hotel \u2013 Colombo"},{"id":6,"name":"Taj Samudra"},{"id":7,"name":"Cinnamon Grand"},{"id":8,"name":"Cinnamon Lakeside"}]}"
There is a problem with your JSON which is not formated correctly, and change your controller like this,
app.controller("listController", ["$scope","$http",
function($scope, $http) {
$http.get('test.json').then(function (response){
$scope.hotels = response.data.hotels;
});
}]);
Working application
Related
I'm trying to update a $scope variable onClick that populates a table from a local JSON file. So far my code is
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope, $http) {
$scope.update = function () {
// Load JSON data to $scope
$http({
method: 'get',
url: '/JSON/Info.json'
}).then(function (response) {
console.log(response, 'res');
$scope.friendz = response.data[1];
},function (error){
console.log(error, 'can not get data.');
});
}
});
<div ng-controller="myCtrl" class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<button class="dropdown-item" ng-click="update()">Action</button>
</div>
<div ng-controller="myCtrl">
<table border="1">
<tr>
<th>Name</th>
<th>Fax</th>
<th>Phone</th>
<th>Address</th>
<th>Attention</th>
<th>Submission</th>
</tr>
<tr>
<td ng-bind="friendz.Payee.Name"></td>
<td ng-bind="friendz.Payee.Fax"></td>
<td ng-bind="friendz.Payee.Phone"></td>
<td ng-bind="friendz.Payee.Address"></td>
<td ng-bind="friendz.Payee.Attention"></td>
<td ng-bind="friendz.Payee.SubmissionDate"></td>
</tr>
</table>
</div>
When I click my update button in the dropdown menu, I see the response is logged in the console, but the table fails to update onClick. Is there a function that I need to call to update the page in an asynchronous fashion when I click my button? When I use the http get function outside of my scope.update function, it works fine on page load.
You're creating two separate instances of your controller, since you have ng-controller="myCtrl" twice in the template.
So he controller handling the click is not the same one that holds the data displayed by the table. And their scope are not the same either: each controller instance has its own scope.
I'm trying to show the data from my database using ng-repeat. However when I try to retrieve the equipment data under system. It shows it as a json format. How do i retrieve the other nodes under equipments? Need help.
My Angular
/*global angular*/
var app = angular.module('input', ['ngRoute', 'firebase']);
app.config(['$routeProvider', function ($routeProvider) {
'use strict';
$routeProvider.when('/input', {
templateUrl: 'input/input.html',
controller: 'inputCtrl'
});
}]);
app.controller('inputCtrl', ['$scope', '$firebaseObject', '$firebaseArray', function ($scope, $firebaseObject, $firebaseArray) {
'use strict';
$scope.message;
$scope.writeUserData = function (equipment, system) {
firebase.database().ref('data/' + $scope.system + '/equipments').child(equipment).set({
equipment: equipment
});
$scope.message = "Added"
};
var ref = firebase.database().ref();
var data = ref.child("data");
var list = $firebaseArray(data);
list.$loaded().then(function(data) {
$scope.data = data;
console.log($scope.data);
}).catch(function(error) {
$scope.error = error;
});
}]);
My Html
<tr data-ng-repeat="data in data">
<td class="select" align="center">
<div id="dd" class="wrapper-dropdown-3" tabindex="1">
<span>{{data.$id}}</span>
<ul class="dropdown">
<li>{{data.equipments}}</li>
</ul>
</div>
</td>
</tr>
have your tryed to change
data in data
to some thing like
d in data
also to iterate equipments you will need one more ng-repeat
<li ng-repeat= "equipment in d.equipments">{{data.equipments}}</li>
havent tested the code!
Alright I found a solution to my problem.
<tr data-ng-repeat="d in data">
<td class="select" align="center">
<div id="dd" class="wrapper-dropdown-3" tabindex="1">
<span>{{d.$id}}</span>
<ul class="dropdown">
<li data-ng-repeat="equipment in d.equipments"><a>{{equipment.equipment}}</a></li>
</ul>
</div>
</td>
</tr>
I tried with below code, but it is returning an empty row (more than 30+) of the table.
json
"[{\"COMPANY_ID\":\"1\",\"COMPANY_DESC\":\"11\",\"COMPANY_CURRENCY\":\"1\",\"ACTIVE\":true,\"IS_HEADOFFICE\":true,\"ACCOUNTING_SYSTEM_ID\":\"1\"},{\"COMPANY_ID\":\"2\",\"COMPANY_DESC\":\"2\",\"COMPANY_CURRENCY\":\"22\",\"ACTIVE\":false,\"IS_HEADOFFICE\":false,\"ACCOUNTING_SYSTEM_ID\":\"1\"}]"
Html
<tr ng-repeat = "company in companies track by $index"">
<td>{{ company.COMPANY_ID }}</td>
<td>{{ company.COMPANY_DESC }}</td>
<td>{{ company.COMPANY_CURRENCY }}</td>
</tr>
App
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("http://localhost:52087/api/accountmapping")
.success(function (response){
$scope.companies = angular.fromJson(response);
console.log(angular.fromJson(response));
});
});
</script>
use then instead of success. success is deprecated since angular version 1.4
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("http://localhost:52087/api/accountmapping")
.then(function (response){
$scope.companies = response.data;
console.log($scope.companies);
});
});
I try to mirror your codes but i don't find that error, please check my codes and tell me what i miss to show that error for me.
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
var myJsonAsText = '[{\"COMPANY_ID\":\"1\",\"COMPANY_DESC\":\"11\",\"COMPANY_CURRENCY\":\"1\",\"ACTIVE\":true,\"IS_HEADOFFICE\":true,\"ACCOUNTING_SYSTEM_ID\":\"1\"}, {\"COMPANY_ID\":\"2\",\"COMPANY_DESC\":\"2\",\"COMPANY_CURRENCY\":\"22\",\"ACTIVE\":false,\"IS_HEADOFFICE\":false,\"ACCOUNTING_SYSTEM_ID\":\"1\"}]';
var convertToJson = angular.fromJson(myJsonAsText);
console.log(convertToJson);
$scope.companies = convertToJson;
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="customersCtrl">
<ul>
<li ng-repeat = "company in companies track by $index"">
<p>COMPANY_ID: {{ company.COMPANY_ID }}</p>
<p>COMPANY_DESC: {{ company.COMPANY_DESC }}</p>
<p>COMPANY_CURRENCY: {{ company.COMPANY_CURRENCY }}</p>
<hr>
</li>
</ul>
</div>
I have updated the version of Angular. The problem has solved.
https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js
I just started learning Angular and I am having trouble retrieving data based on a http-get request. It works when I simply retrieve all movies, but not when I try to retrieve movies based on a search term (cfr. search.html). I hope someone can tell me where I went wrong, I really can't see it. Thank you in advance.
app.js:
var app;
(function() {
app = angular.module('imdb', ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider
.when('/search', {
controller: 'SearchController',
templateUrl: 'views/search.html'
})
.when('/movies', {
controller: 'MovieController',
templateUrl: 'views/movies.html' //works fine
})
.otherwise({
redirectTo: '/movies'
});
});
})();
SearchController.js
(function (app) {
app.controller('SearchController', ['$http', '$scope', function ($http, $scope) {
$scope.movies = [];
$scope.searchMovie = function(title) {
$http.get('https://angularbackend.azurewebsites.net/api/Movies/Search?title=' + title)
.success(function(data) {
$scope.movies = data;
});
};
}]);
})(app);
search.html
<div>
<form class="form" novalidate name="searchMovies" ng-submit="SearchController.searchMovie(title)" >
<input type="text" ng-model="title" class="form-control" placeholder="enter title">
<button type="submit" class="btn btn-primary btn-block">Search</button>
</form>
<table class="table">
<thead>
<tr>
<th>poster</th>
<th>title</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="movie in movies">
<td>{{ movie.title }}</td>
</tr>
</tbody>
</table>
</div>
Replace
SearchController.searchMovie(title)
by
searchMovie(title)
All expressions are always evaluated on the scope. So the first, incorrect one, will try to invoke the method searchMovie of $scope.SearchController, which doesn't exist.
Also note that success() is deprecated for quite some time now. Use then():
$http.get('https://angularbackend.azurewebsites.net/api/Movies/Search?title=' + title)
.then(function(response) {
$scope.movies = response.data;
});
You should also avoid using string concatenation to pass parameters. Those need to be encoded properly. So rather use
$http.get('https://angularbackend.azurewebsites.net/api/Movies/Search', {params: {title: title}})
.then(function(response) {
$scope.movies = response.data;
});
Hello I am trying to get a url from my api using the ngResource and I have a service that returns the resource. However when I call it inside my controller is gives me an error of Cannot read property 'query' of undefined.
Why is this happening?
This is my service :
(function() {
var app = angular.module('test');
app.service('ContactResource', ['$resource', function($resource) {
return $resource('/contacts/:firstname', {firstname: '#firstname'},
{
'update': {method: 'PUT'}
}
);
}]);
}());
This is my controller
(function() {
var app = angular.module('test');
app.controller('contactsCtrl', ['ContactResource', function($scope, Contacts, ContactResource) {
$scope.contacts = ContactResource.query();
}]);
}());
And this is my HTML
<table class="table table-bordered">
<thead>
<th>Firstname <input type="search" class="pull-right"></th>
</thead>
<tbody>
<tr ng-repeat="contact in contacts">
<td>
<a ng-href="/{{ contact.firstname }}">{{ contact.firstname }}</a>
</td>
</tr>
</tbody>
</table>
Here is your problem:
['ContactResource', function($scope, Contacts, ContactResource)
You need to also inject $scope and Contacts into the array, like this:
['$scope', 'Contacts', 'ContactResource', function($scope, Contacts, ContactResource)
Or Angular will think that 'ContactResource' is the same as $scope.