Unable to pull the data from restful webservices in angular js - javascript

My html page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Invoice Automation</title>
<!-- CSS -->
<link href="style/css/transdmin.css" rel="stylesheet" type="text/css" media="screen" />
<!-- JavaScripts-->
<script type="text/javascript" src="style/js/jquery.js"></script>
<script type="text/javascript" src="style/js/jNice.js"></script>
<script src="angular.min.js"></script>
<script src="controllers.js"></script>
</head>
<body ng-app="helloApp" ng-controller="HttpController">
<div id="wrapper" >
<header id='banner'>
<h1>Invoice Automation tool</h1>
</header>
<ul id="mainNav">
<li>USERS</li>
<li>EMAILS</li>
<li>ROLES</li>
<li>APPROVALS</li>
<li>HIERARCHY</li>
<li class="logout">PREFERENCES</li>
<li class="logout">LOGOUT</li>
</ul>
<div id="containerHolder" >
<div id="container" >
<div id="sidebar" >
<ul class="sideNav">
<li>Users details</li>
<li><a href="Create User.html" >Create Users</a></li>
</ul>
</div>
<!-- // #sidebar -->
<!-- h2 stays for breadcrumbs -->
<h2>Users » User details</h2>
<div >
<form>
<div id="main" >
<form action="" class="jNice">
<ul id="subnav">
<li>New</li>
<li>View</li>
<li>Edit</li>
<li>Delete</li>
</ul>
<TABLE>
<TR>
<TD></TD>
<TD><strong>Email Account </strong></TD>
<TD><strong>First Name</strong></TD>
<TD><strong>Last Name</strong></TD>
<TD><strong>Active from</strong></TD>
<TD><strong>Active to</strong></TD>
</TR>
<TR ng-repeat="profile in profiles">
<TD><input type="checkbox"></TD>
<TD><p>{{profile.id}}</p></TD>
<TD>{{profile.createdBy}}</TD>
<TD>{{profile.creationDate}}</TD>
<TD>{{profile.endDate}}</TD>
<TD>{{profile.roleDesc}}</TD>
</TR>
</TABLE>
</div>
<!-- // #main -->
<div class="clear" ></div>
</div>
<!-- // #container -->
</div>
<!-- // #containerHolder -->
<p id="footer">Home</p>
</div>
<!-- // #wrapper -->
</body>
</html>
My Controller file is
var helloApp = angular.module("helloApp", []);
helloApp.controller("HttpController", [ '$scope', '$http',
function($scope, $http) {
$http({
method : 'GET',
url : '/roles/listall'
}).success(function() {
$scope.profiles = data;
}).error(function() {
alert( "failure");
});
} ])
While I was trying to display through the browser I was unable to pull the data from the server. Instead of showing the actual data it was showing hardcoded data like shown below
**Email Account First Name Last Name Active from Active to
{{profile.id}}
{{profile.createdBy}} {{profile.creationDate}} {{profile.endDate}} {{profile.roleDesc}}**


Is your success callback getting the DATA ? Try logging it in console for your reference ?
May be you can try with this instead as the callback is having the data in the signature.
}).success(function(data) {
console.log(data);
$scope.profiles = data;
}

Related

Angular ng-repeat cant get value of object

I have an array of jsons that have this structure:
[{
'playlist_name': 'abced',
'playlist_id': 123
}, {
'playlist_name': 'abcde',
'playlist_id': 123
}]
I want to insert this jsons in this div:
<div class="horizontal-tile" ng-repeat="todo in todos">
<div class="tile-left" style='min-height:100px;width:100px;'>
<div class="background-image-holder">
<img alt="image" class="background-image" src="img/project-single-1.jpg">
</div>
</div>
<div class="tile-right bg-secondary" style='min-height:100px;width: calc(100% - 100px);'>
<div class="description" style="padding:10px;">
<h4 class="mb8">{{ todo.playlist_name }}</h4>
</div>
</div>
</div>
And i iterate over the todo in todos that i get in this scope
Todos.get(12175507942)
.success(function(data) {
$scope.todos = data;
});
I get the data fine, however i can't seem to get the value playlist_name.
I print the data and i get this.
[Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object]
with, each object being:
$$hashKey:"005"
playlist_id:"0DAlm2gb8DrtyRSXEKw07h"
playlist_name:"Rocola On The Go"
__proto__:Object
the code for the Todos.get
angular.module('todoService', [])
// super simple service
// each function returns a promise object
.factory('Todos', ['$http',function($http) {
return {
get : function(id) {
return $http.post('/api/getPlaylists',{"id":id});
},
create : function(todoData) {
return $http.post('/api/todos', todoData);
},
delete : function(id) {
return $http.delete('/api/todos/' + id);
}
}
}]);
I show the controllers code:
angular.module('todoController', [])
// inject the Todo service factory into our controller
.controller('mainController', ['$scope','$http','Todos', function($scope, $http, Todos) {
$scope.formData = {};
$scope.loading = true;
// GET =====================================================================
// when landing on the page, get all todos and show them
// use the service to get all the todos
Todos.get(12175507942)
.success(function(data) {
console.log(data);
$scope.todos = data;
$scope.loading = false;
});
// CREATE ==================================================================
// when submitting the add form, send the text to the node API
$scope.createTodo = function() {
// validate the formData to make sure that something is there
// if form is empty, nothing will happen
if ($scope.formData.text != undefined) {
$scope.loading = true;
// call the create function from our service (returns a promise object)
Todos.create($scope.formData)
// if successful creation, call our get function to get all the new todos
.success(function(data) {
$scope.loading = false;
$scope.formData = {}; // clear the form so our user is ready to enter another
$scope.todos = data; // assign our new list of todos
});
}
};
// DELETE ==================================================================
// delete a todo after checking it
$scope.deleteTodo = function(id) {
$scope.loading = true;
Todos.delete(id)
// if successful creation, call our get function to get all the new todos
.success(function(data) {
$scope.loading = false;
$scope.todos = data; // assign our new list of todos
});
};
}]);
And i will show the view page:
<!doctype html>
<!-- ASSIGN OUR ANGULAR MODULE -->
<html ng-app="scotchTodo">
<head>
<!-- META -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Optimize mobile viewport -->
<title>Node/Angular Todo App</title>
<!-- load bootstrap -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/theme.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/custom.css" rel="stylesheet" type="text/css" media="all" />
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
<link href='http://fonts.googleapis.com/css?family=Lato:300,400%7CRaleway:100,400,300,500,600,700%7COpen+Sans:400,500,600' rel='stylesheet' type='text/css'>
<!-- SPELLS -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
<!-- load angular -->
<script src="js/controllers/main.js"></script>
<!-- load up our controller -->
<script src="js/services/todos.js"></script>
<!-- load our todo service -->
<script src="js/core.js"></script>
<!-- load our main application -->
</head>
<!-- SET THE CONTROLLER -->
<body ng-controller="mainController">
<div class="main-container">
<section>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 text-center">
<h4 class="uppercase mb16">Tus Playlists<br></h4>
<p class="lead mb80"><br></p>
</div>
</div>
<div class="row">
<div class="col-sm-10 col-sm-offset-1 col-md-offset-2 col-md-8">
<div class="horizontal-tile" ng-repeat="todo in todos">
<div class="tile-left" style='min-height:100px;width:100px;'>
<div class="background-image-holder">
<img alt="image" class="background-image" src="img/project-single-1.jpg">
</div>
</div>
<div class="tile-right bg-secondary" style='min-height:100px;width: calc(100% - 100px);'>
<div class="description" style="padding:10px;">
<h4 class="mb8">{{ todo.playlist_name }}</h4>
</div>
</div>
</div>
<p class="text-center" ng-show="loading">
<span class="fa fa-spinner fa-spin fa-3x"></span>
</p>
</div>
</div>
</div>
</section>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/parallax.js"></script>
<script src="js/scripts.js"></script>
</body>
</html>
and here is the core.js
angular.module('scotchTodo', ['todoController', 'todoService']);

Your code is working fine as per the code given in OP.
DEMO
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', function($scope) {
$scope.todos = [{
'playlist_name': 'abced',
'playlist_id': 123
}, {
'playlist_name': 'abcde',
'playlist_id': 123
}];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<div class="horizontal-tile" ng-repeat="todo in todos">
<div class="tile-left" style='min-height:100px;width:100px;'>
<div class="background-image-holder">
<img alt="image" class="background-image" src="img/project-single-1.jpg">
</div>
</div>
<div class="tile-right bg-secondary" style='min-height:100px;width: calc(100% - 100px);'>
<div class="description" style="padding:10px;">
<h4 class="mb8">{{ todo.playlist_name }}</h4>
</div>
</div>
</div>
</div>

ng-controller doesn't work for kendo tabstrip tab content

ng-controller doesn't work for kendo tabstrip tab content. Please check my code below.
<!--tabstripCtrl.js-->
angular.module('tabstripApp',[]);
var app = angular.module('tabstripApp');
app.controller('tabCtrl',['$scope',function($scope){
$('#tabstrip').kendoTabStrip({
contentUrls:[
'views/gridview1.html',
'views/gridview2.html',
'views/gridview3.html',
]
});
}]);
<!--grid1Ctrl.js-->
var app = angular.module('tabstripApp');
app.controller('grid1Ctrl',['$scope',function($scope){
$scope.grid1 = "grid1";
}]);
<!--index.html-->
<html>
<head>
<link rel="stylesheet" href="css/kendo.common.min.css">
<script src="js/jquery.min.js"></script>
<script src="js/angular.min.js"></script>
<script src="js/angular-route.min.js"></script>
<script src="js/kendo.all.min.js"></script>
<script src="controllers/tabstripCtrl.js"></script>
<script src="controllers/gridCtrl.js"></script>
</head>
<body ng-app="tabstripApp" ng-controller='tabCtrl'>
<div id='tabstrip'>
<ul>
<li class="k-state-active">grid1</li>
<li>grid2</li>
<li>grid3</li>
</ul>
<div ng-controller="grid1Ctrl"></div>
<div ng-controller="grid2Ctrl"></div>
<div ng-controller="grid3Ctrl"></div>
</div>
</body>
</html>
<!--gridview1.html-->
<div>
<span>{{grid1}}</span>
</div>
Since each tab content is very complex, so I create separate html file to maintan them. But, the grid1Ctrl, grid2Ctrl and grid3Ctrl binding don't work, any ideas?

<div ng-controller="myController">
<div id="tabstrip" kendo-tab-strip="tabstrip">
<ul>
<li class="k-state-active">grid1</li>
<li>grid2</li>
<li>grid3</li>
</ul>
<div ng-controller="grid1Ctrl">
{{grid1}}
</div>
<div ng-controller="grid2Ctrl">
{{grid2}}
</div>
</div>
</div>
DEMO

Angular JS Error: No module detected

I'm starting work on a members section of my website, using AngularJS.
v0.1.0.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title><?php echo ucfirst($_SERVER['PHP_AUTH_USER']); ?>'s dashboard</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script src="../jquery-2.1.4.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="app.js" type="text/javascript"></script>
</head>
<body ng-app="usr" ng-controller="userControll as users" ng-init=<?php echo "'users.setUser(" . $_SERVER['PHP_AUTH_USER'] .")'"?>><!-- since I'm using server auth, to transfer to angular-->
<div style="background-color: #000000; color: #c0c0c0;">
<div class="container">
<img ng-src="{{users.user.icon}}" alt="avatar" />
<h1>{{users.user.name}}</h1>
<i>#<?php echo $_SERVER['PHP_AUTH_USER']; ?></i>
</div>
</div>
<div class="container">
<h1>Dashboard</h1>
<!--Nav tabs-->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Home</li>
<li role="presentation">Profile</li>
<li role="presentation">Settings</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade in active" id="home"><h1>Home</h1><br>{{users.user.data}}</div>
<div role="tabpanel" class="tab-pane fade" id="profile">
<h2>{{users.user.name}}</h2>
<hr>
<span style="color: gray">Coming soon</span>
</div>
<div role="tabpanel" class="tab-pane fade" id="settings">
<h2>Settings</h2>
<span style="color: gray">Coming soon</span>
<hr>
<h3>About</h3>
<i>v0.1.0<br>© Imagifight Studios 2015</i>
</div>
</div>
</div>
</body>
</html>
app.js
(function(){
var app = angular.module('usr', []);
var userData = $.ajax({
dataType: 'json',
url:'user-data.json'
})
.done(function(data) {
$.each(function(data){
$.parseJSON(data);
});
}).fail(console.error('Damn. Didn\'t work.'));
app.controller('userControll', function(){
this.setUser = function(u){
this.user = userData[u];
}
})
})();
user-data.json
{
"imagifight": {
"name": "Imagifight",
"email": "imagifight#gmail.com",
"status": "owner",
"icon": "icons/imagifight.png"
}
}
Throws error:
Damn.Didnt work
(anonymous function) # app.js:11
Can't see where the ajax went wrong. No syntax errors either. Maybe I'm missing something here, I don't know. Any ideas on how to fix?

You have a problem with Quote. Escape it as
console.error('Damn. Didn\'t work.')

You have ' inside the console error.
Change: console.error('Damn. Didn't work.')
To: console.error('Damn. Didn\'t work.')

why my code does work on chrome and not once compile using cordova

i'm working on a project using cordova / eclipse / kendo ui and i'm going through a weird behave ...
i developed a sample of test to show you ..
when i try to run that sample on google chrome, it does work, but once compiled and running on my phone (which is a nexus 4 by the way even if it doesnt really matter i think ..) it doesnt work...
in this example, we have something simple, a menu with three items and a view which differs depends on what button you click on.
on google chrome, it works, i mean when i click on the first button, it shows "first", same for second and so on ..
when i compile the project with eclipse and run it on my phone, the message is the same whatever the button i clicked on ..
here is my sample of code :
html :
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link href="styles/kendo.common.min.css" rel="stylesheet" />
<link href="styles/kendo.default.min.css" rel="stylesheet" />
<link href="styles/kendo.mobile.all.min.css" rel="stylesheet" />
<link href="styles/index.css" rel="stylesheet" />
<!-- Librairies -->
<script src="lib/jquery.min.js"></script>
<script src="lib/kendo.all.min.js"></script>
<!-- Fonction d'init -->
<script src="init/cordovaInit.js"></script>
<!-- Controleurs -->
<script src="controlers/panelControler.js"></script>
<!-- EndScript -->
</head>
<body onload="onBodyLoad()">
<div data-role="view" id="drawer-home" data-layout="drawer-layout" data-title="search">
<div id="search">
<div id="first">
<p>first</p>
</div>
<div id="second">
<p>second</p>
</div>
<div id="third">
<p>third</p>
</div>
</div>
</div>
<div data-role="drawer" id="my-drawer" style="width: 270px" data-views="['/', 'drawer-home']">
<ul data-role="listview" data-type="group">
<li>Menu
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
</li>
</ul>
</div>
<div data-role="layout" data-id="drawer-layout" data-layout="overview-layout">
<header data-role="header">
<div data-role="navbar">
<a data-role="button" data-rel="drawer" href="#my-drawer" data-icon="drawer-button" data-align="left"></a>
<span>Test</span>
</div>
</header>
</div>
<script>
var app = new kendo.mobile.Application(document.body);
panelControler('first');
</script>
</body>
</html>
here is the very simple javascript i'm using to test :
function panelControler(action){
alert("panelControler");
if (action === 'first'){
alert("first show");
$("#first").show();
$("#second").hide();
$("#third").hide();
}
else if (action === 'second'){
alert("second show");
$("#second").show();
$("#first").hide();
$("#third").hide();
}
else if (action === 'third'){
alert("third show");
$("#third").show();
$("#second").hide();
$("#first").hide();
}
}

Check the second Q/A pair from the Kendo UI Mobile FAQ.

javascript for create tabs

I have a function in Javascript like this :
!function($) {
function add_tab(num, name){
var $newDiv = $("<div class='tab-pane' />")
.attr("id", "tab_"+name)
.html("Content " + name);
//.html("<div class='row'>");
$("#graphTabsContent").append($newDiv);
var $newLi = $("<li/>");
if(num==0){
$newLi.attr("class", "active");
}
var $newA = $("<a data-toggle='tab' />")
.attr("href", "#tab_"+name)
.html(name);
$newLi.append($newA);
$("#ul_tabs").append($newLi);
};
function update_graph_tabs(){
$.getJSON("call/json/get_role", {}, function(roles) {
$("#ul_tabs").empty();
$("#graphTabsContent").empty();
$.each(roles, function (key, role){
add_tab(key, role);
});
});
}
// Run
update_graph_tabs();
}(jQuery);
this function get the data from JSON and after it create tabs tabbable, in my HTML like this(http://getbootstrap.com/2.3.2/components.html#navs).
this is my HTML code :
<div class="row">
<div class="span3">
<div class="dropdown">
<select class="selectpicker btn-warning" id="groupe" data-style="btn-primary">
<option value="">Awaiting data...</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="span4"><div id="reportingContainer"></div></div>
<div class="span8">
<div id="dashboard">
<div id="combochart"></div>
<div id="control"></div>
</div>
</div>
</div>
<div class="tabbable" >
<ul id="ul_tabs" class="nav nav-tabs">
</ul>
<div class="tab-content" id="graphTabsContent">
</div>
</div>
Now, I want in every tab it to show me one chart that I code. For example, in my HTML O have this code that create one piechart and one combochart in my page but it is not in my tabs.

This may help you:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Twitter Bootstrap Basic Tab Based Navigation Example</title>
<meta name="description" content="Twitter Bootstrap Basic Tab Based Navigation Example">
<link href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap2.2.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="span6">
<ul class="nav nav-tabs">
<li class="active">
Home </li>
<li>Tutorials</li>
<li>Practice Editor </li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</body>
</html>
- See more at: http://www.w3resource.com/twitter-bootstrap/nav-tabs-and-pills-tutorial.php#sthash.a9cP7aDC.dpuf
Source: W3Resource

Categories

Resources