Angularjs $scope.data not showing in html - javascript

I get the response from POST, it prints the data in the console but it doesn't show the data in the html page.
I have my controller, its just that the {{user}} doesnt show in html page
I can see the what it returns in the console,
angular.module('app.AllUsersCtrl', [])
.controller('AllUsersCtrl', function ($scope, $http, $cookies, $window, $state) {
$scope.getAccount = function (n) {
$http({
method: 'POST',
url: '/FYPapp/getAccount',
data: $.param({
username: n
}),
headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' }
}).success(function (data, status, headers, config) {
console.log(JSON.stringify(data));
$scope.user = JSON.stringify(data);
});
};
});
**Data Returns **
scripts.js:95 {"id":118,"firstname":"Lauren","lastname":"Smithss","description":"the Makup Chair the.....","enabled":true,"user":{"userid":21,"username":"theMak","email":"theMak22#mail.com","password":"995bf49114defd4f35d10e477135b89112ecdc2f25af6ab7969112842919ba4dc193b194f9485671","enabled":true},"followers":[],"username":"theMak"}
HTML: This is the html page
<link rel="stylesheet" type="text/css" href="static/app/css/css.scss">
<div class="mainDiv">
<h1> Profile Details</h1>
{{user}}
</div>

In your HTML you need to define our controller with ng-controller and also the ng-app which will be your module name.
Then you will need to make the data call.
After that you can directly assign the data to scope like this:
$scope.user = data;

As it appears you're using a controller alias, ie
.state('profile', {
url: "/profile",
templateUrl: '/views/profile.html',
controller: 'AllUsersCtrl',
controllerAs: 'allusers' // this one here
})
You should be assigning methods and properties to the controller instance, eg
.controller('AllUsersCtrl', ['$http', function($http) {
var ctrl = this;
this.getAccount = function(n) {
$http(...).then(function(response) {
ctrl.user = response.data;
});
};
}])
and in your template...
<img ng-click="allusers.getAccount(something)"...
and
<h1>Profile Details</h1>
<!-- for debugging -->
<pre>{{allusers.user | json}}</pre>
<!-- or for prod -->
<p>{{allusers.user.firstname}} {{allusers.user.lastname}}</p>

You are missing ng-controller in your html templates.
<h1> Profile Details</h1>
{{user}}

Related

How to get $scope.someStuff response values into variable?

This is my angular controller:
angular
.module('hameedApp', [])
.controller('hameedController', function($scope, $http) {
$http({
method: 'GET',
url: 'json.php'
}).then(function(response) {
$scope.contacts = response.data;
}).catch(function(response) {
console.log('error');
})
});
This is my html from body tag:
<table class="table">
<tr>
<th>Name</th>
<th>Phone No</th>
<th>Email</th>
</tr>
<tr ng-repeat="contact in contacts">
<td>{{contact.name}}</td>
<td>{{contact.gsm}}</td>
<td>{{contact.email}}</td>
</tr>
</table>
<script>
var test = {{contacts}}
console.log(test);
</script>
I want to get above {{contacts}} full array json data in one variable called "test".
is it possible?
Angular concept is anything you put in $scope is not directly accessible in non-angular code. What you can do is, you can assign it to any global variable using window object like below.
angular
.module('hameedApp', [])
.controller('hameedController', function($scope, $http) {
$http({
method: 'GET',
url: 'json.php'
}).then(function(response) {
$scope.contacts = response.data;
window.contacts = response.data;
}).catch(function(response) {
console.log('error');
})
});
Now you can access that contacts anywhere in angular as well as non-angular code.
Edited
As you want to get the contacts in non-angular code, you have to use callback mechanism to tell your non-angular code about updated value. See below
In you <head>, add a new method in window like this
<head>
<script>
....
....
window.updateContacts = function(contacts) {
console.log(contacts);
}
....
....
</script>
</head>
Now you can use this callback from angular code, like below
angular
.module('hameedApp', [])
.controller('hameedController', function($scope, $http) {
$http({
method: 'GET',
url: 'json.php'
}).then(function(response) {
$scope.contacts = response.data;
window.updateContacts(response.data);
}).catch(function(response) {
console.log('error');
})
});

AngularJS: Call httpget on value change from textbox

I have a web service which returns json file on call with a parameter for the id of an entry. I have a angular method that returns the data returned from that method. I have no idea how to recall the service when the input of the id has changed as I want to recall that method when a new value has been supplied.
The parameter that I pass in for the Id is called Reference. The HTML returns object with a reference of 1234 but if I change the value I dont know how to recall the service.
This is what I have so far:
Angular:
var app = angular.module("myModule", [])
.controller("myController", function ($scope, $http) {
var res = $http({
method: 'GET',
url: 'AirPortrWebService.asmx/DashboardDetail',
params: { Reference : '1234' }
})
.then(function (response) {
$scope.booking = response.data
});
$scope.test = "Angular Method Called";
$scope.Reference = '1234';
});
Html
<!DOCTYPE html>
<html>
<head>
<script src="scripts/angular.js"></script>
<script src="app/NewAppTwo.js"></script>
</head>
<body ng-app="myModule" ng-controller="myController">
{{test}}
{{Reference}}
<br />
<br />
<input type="text" ng-model="Reference" ng-change="booking"/>
{{booking}}
</body>
</html>
Change ng-change="booking" to a function that is called everytime that models Refences changes:
$scope.getReference = function(referenceNumber){
$http({
method: 'GET',
url: 'AirPortrWebService.asmx/DashboardDetail',
params: { Reference : referenceNumber}
}).function (response) {
$scope.booking = response.data
});
}
<input type="text" ng-model="Reference" ng-change="getReference(Reference)"/>
try this :
var app = angular.module("myModule", [])
.controller("myController", function ($scope, $http) {
$scope.refresh = function(){
var res = $http({
method: 'GET',
url: 'AirPortrWebService.asmx/DashboardDetail',
params: { Reference : $scope.Reference }
})
.then(function (response) {
$scope.booking = response.data
});
}
$scope.test = "Angular Method Called";
$scope.Reference = '1234';
});
and html
<input type="text" ng-model="Reference" ng-change="refresh()"/>
ng-change call the given function each time the input change.
refresh() don't need a parameter because it use $scope.Reference

ionic retrive data from database with http request

I'm tring to learn how to use Ionic framework,
I've made a controller to get some data from a database using play 2.0 as web server.
This is my factory code :
.factory('Projects', function($http) {
var projects = [];
return {
getProjects: function() {
$http.defaults.headers.post['Content-Type'] = 'application/json';
return $http({
method: 'POST',
url: 'http://localhost:8101/getProjects',
dataType: 'json',
headers: { 'Content-Type': undefined }
}).success(function(data, status) {
projects= data;
return projects
}).error(function(arg) {
alert("error ");
});
}
}
})
and my controller :
.controller('RootsCtrl', function($scope, Projects, $http) {
$scope.projects= Projects.getProjects();
})
and here is my view :
<ion-view view-title="Projects">
<ion-content>
<ion-list>
<ion-item class="item-remove-animate item-avatar item-icon-right" ng-repeat="project in projects" type="item-text-wrap" >
<h2>{{project.try}}</h2>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
The web server only return some fake data by now.
I can't understand why, in my view, the value for project.try isn't show, but the row is present.
So if I have two values, in my html I can see two row, but without their "name".
Thanks
Factories are singletons and return an object that contains the members of the service.
.factory('Project', function($http, $log) {
return {
getProjects: getProjects
};
function getProject(){
var config = {
method: 'POST',
url: 'http://localhost:8101/getProjects',
headers: { 'Content-Type': undefined }
}
return $http(config).then(success).catch(failure);
}
function success(resp){
return resp.data;
}
function failure(error){
return error;
}
});
$http returns a promise.
//Controller
.controller('RootsController', function(Project){
var vm = this;
fetchProject();
function fetchProject(){
Project.getProject().then(success, failure);
}
function success(data){
vm.projects = data;
}
function failure(err){
// Error Handling
}
});
In your view:
<ion-item ng-repeat = "project in vm.projects">
{{project}}
</ion-item>
Also in your states:
controller: 'RootsController as vm' because Ionic has issues with controllerAs syntax.
Also you are not posting any data? And you can see just rows and not names because the project object exists but might not contain a key called try

How to POST data to php template in angular

New to angular, new to php, new to programming at all.
I'm using ui-router, and here's how it looks like:
.state('admin', {
url:'/admin',
templateUrl: 'admin/admin.php',
controller: 'AdminController'
})
.state('admin.auto', {
url: '/auto',
templateUrl: 'admin/states/auto.php',
controller: 'AdminAutoController'
})
.state('admin.auto.update', {
url: '/update',
templateUrl: 'admin/states/autoupdate.php',
controller: 'AdminAutoUpdateController'
})
Routing works fine, on my admin.auto view, I've got list of autos with "edit" and "delete" buttons. I get the list from MySQL database.
<div ng-repeat="auto in autos">
<p>{{auto.mark}}</p>
<button class="btn btn-primary" ng-click="updateAuto(auto.mark)">Edit</button>
<button class="btn btn-danger">Delete</button>
</div>
So now I need to post auto.id to auto update nested view, so i can select proper table row. At this point I'm struggling to post any data to update view, just to find out if it works, so here it is:
.controller('AdminAutoController', ['$scope', '$http', '$modal', function($scope, $http, $modal) {
$http.get('php/DBZ.php').success(function(data) {
$scope.autos = data;
});
$http({
url: "admin/states/autoupdate.php",
method: "POST",
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
data: $.param({id:"some id"})
}).success(function(data, status, headers, config) {
$scope.data = data;
}).error(function(data, status, headers, config) {
$scope.status = status;
});
}])
And, finally, my PHP:
<?php
$test = $_POST['id'];
echo $test;
?>
So, as a result, i get:
Notice: Undefined index: id on line 4
Sorry for my English, and thanks for any help!

Angular ng-repeat renders template before iterator is populated

When my ng page loads containing the ng-repeat markup below, it renders the IMG tag before the iterator is populated, but because no src value is present, that generates a 404 for the partial src.
<div ng-repeat="item in preview_data.items">
<h4>{{item.title}}</h4>
<img src="{{item.thumb}}" />
</div>
Then my controller kicks in and populates it with the right list of videos.
How do I stop the HTML from getting rendered until the controller is ready with the data?
The page is called by this route:
app.config(function ($routeProvider, $locationProvider ) {
$locationProvider.html5Mode(true);
console.log('config');
$routeProvider.when("/", {
templateUrl: "/templates/createFeed.html",
controller: "CreateFeedController"
});
});
which calls a factory to get a list of videos to preview from the backend api:
app.controller("CreateFeedController", function ($scope, $route, $sce, Preview) {
var keywords = decodeURIComponent($route.current.params.keywords);
$scope.preview_data = {
keywords: keywords
}
//pass parameters to web preview API
Preview.get(keywords, function (data) {
$scope.preview_data.items = data;
});
});
app.factory('Preview', function ($http) {
return{
get: function (keywords, next) {
$http({method: 'GET', url: '/api/preview/', json:true,
params: {keywords: keywords}}
).success(function (data) {
// prepare data here
//console.log(data);
next(data);
});
}
};
});
You must use the ng-src directive instead of the plain src attribute in your img tag.
From the Angular API for ng-src:
The browser will fetch from the URL with the literal text {{hash}} until Angular replaces the expression inside {{hash}}. The ngSrc directive solves this problem.
Check the ng-cloak directive.It's intended exactly for this.
http://docs.angularjs.org/api/ng.directive:ngCloak
As you know $http returns promise. Therefore your factory is async.
So factory should be like:
app.factory('Preview', function ($http, $q) {
return{
get: function (keywords, next) {
var deferred = $q.defer();
$http({method: 'GET', url: '/api/preview/', json:true,
params: {keywords: keywords}}
).success(function (data) {
deferred.resolve(data);
}).error(function() {
deferred.reject("Error ...");
});
//Returning the promise object
return deferred.promise;
}
};
});
And controller:
Preview.get(keywords) // returns promise
.then(function (result) {
$scope.preview_data.items = result;
}, function (result) {
alert("Error: No data returned");
});

Categories