ng-repeat not displaying data when fetch via factory service - angularjs

Need help to understand my mistake/ to display data on page.
I gone through almost every question on forum saying "ng-repeat not working". But still not able to find out the answer.
(Please note: First time I tried to fetch data by creating factory service with $http)
Please take a look at my below JavaScript code (Module, Controller and factory defined at one place)
//App declaration
var myApp = angular.module("appLeadsLogRpt", []);
//Controller declaration
myApp.controller('controllerLeadsLogRpt', ['dataService', fncontrollerLeadsLogRpt]);
function fncontrollerLeadsLogRpt(dataService) {
var vm = this;
//Table headers
vm.TableHeaders = ["Lead Id", "Source", "Create Date", "Status", "Contact Id", "Customer Name", "AssignedTo", "Mail Content", "Closed Reason", "Last Lead Note"];
dataService.getAllData()
.then(getData,null)
.catch(showError);
function getData(data) {
vm.LeadsLogRptData = JSON.parse(data);
//console.log(JSON.parse(data));
}
function showError(errMsg) {
console.log(errMsg);
}
}
//Factory Service to fetch data
myApp.factory('dataService', ['$http', DataService]);
function DataService($http) {
return {
getAllData: GetAllData
};
function GetAllData() {
return $http({
method: 'get',
url: 'DataHandler.ashx?method=leadsReport&listId=504473'
})
.then(sendResponseData)
.catch(sendError)
}
function sendResponseData(response) {
return response.data;
}
function sendError(response) {
return response.status;
}
}
</script>
And my Html like below:
<div id="DvContent" style="width:100%" data-ng-app="appLeadsLogRpt">
<div style="width:100%;" data-ng-controller="controllerLeadsLogRpt as vm1">
<input type="text" id="txtJsonData" value='<%=jsonLeadsLogRpt %>' style="display:none" />
<div><h3>Leads Log Report</h3></div>
<div style="text-align:right;margin-bottom:2px;padding-right:2px;">
<img src="/mp_images/excelicon.gif" border=0 width=22 height=22 alt="Open in Excel">
</div>
<div id="divExportToExcel">
<table style="width:100%" id="tblLeadLogRpt" class="table table-bordered">
<thead>
<tr style="background-color:#CCCCCC">
<th data-ng-repeat="item in vm1.TableHeaders" class="ng-cloack">{{item}}</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="item1 in vm1.LeadsLogRptData">
<td class="ng-cloack">{{item1.A_LeadId}}</td>
<td class="ng-cloack">{{item1.B_Source}}</td>
<td colspan="8"></td>
</tr>
<tr data-ng-if="LeadsLogRptData.length==0"><td colspan="10">Data Not Found</td></tr>
</tbody>
</table>
</div>
</div>
</div>
If I assign hard coded data return by server to ng-repeat it works fine
Please let me know what I am doing wrong.
One more question.
In factory I fetch data by calling get method of $http
If I want to call it by Post method, how do I pass params?
In Jquery, I doing it following way.
$.ajax({
url: 'AbcdHandler.ashx',
type: 'POST',
data: {
'method': 'ABCData',
'StartDate': startDate,
'EndDate': endDate
},
success: function (result) {
return JSON.parse(result);
},
error: OnError
});
Thanks in advance for reading and helping.
My latest observation:
when I write data on console, got this. (take a look on function getData(data))
[{"A_LeadId":"426429","B_Source":"LabX"},{"A_LeadId":"429369","B_Source":"LabX"},{"A_LeadId":"430586","B_Source":"Info"},{"A_LeadId":"430589","B_Source":"Info"},{"A_LeadId":"433848","B_Source":"LabX"},{"A_LeadId":"448592","B_Source":"Info"},{"A_LeadId":"451795","B_Source":"Bid"},{"A_LeadId":"453008","B_Source":"Low Bid"},{"A_LeadId":"453009","B_Source":"Low Bid"},{"A_LeadId":"453010","B_Source":"Low Bid"},{"A_LeadId":"455736","B_Source":"Info"},{"A_LeadId":"455743","B_Source":"Info"},{"A_LeadId":"457030","B_Source":"Info"},{"A_LeadId":"457052","B_Source":"LabX"},{"A_LeadId":"461503","B_Source":"Manually Entered"}]
If I copy this and directly assign to vm.LeadsLogRptData, system shows me output on screen properly.
e.g. vm.LeadsLogRptData = [{"A_LeadId":"426429","B_Source":"LabX"},......];
One more thing. When I check length of data, it shows me 621. ({{vm.LeadsLogRptData.length}})
Actually there are only 15 curly brackets pair ({}) and system should show me length as 15
Hope I explain/describe my issue correctly.
(Need something which converts my data properly in Json format)
Thanks,
I got answer
Just use eval with Json.parse and system start displaying data properly
e.g. vm.LeadsLogRptData = eval(JSON.parse(data));
Anyone please explain me the logic behind this?
Thanks to every one who read and replied so far.

Maybe you should use params property of $http object, like:
function GetAllData() {
return $http({
method: 'GET',
url: 'http://localhost:12345/DataHandler.ashx',
params: {method: "leadsReport", listId: 504473}
})
.then(sendResponseData)
.catch(sendError)
}
If you want to perform POST request, you should use it like this:
function PostData() {
return $http({
method: 'POST',
url: 'http://localhost:12345/DataHandler.ashx',
data: {exampleData: exampleData}
})
.then(sendResponseData)
.catch(sendError)
}
Remember to change http://localhost:12345/ for your server URL.

Related

Unable to bind Json Data with Table Header using AngularJS

Im getting data in this format from api, but when i try binding it to table using angularjs it is creating empty space instead of values. Im also getting more then one table from some Api's please explain who to bind different datatables in different tables too. thanks
{"Table":
[{
"SchoolId":1,
"schoolname":"Microsoft",
"SCHOOLCODE":"29911583",
"WEBSITE":"JLR",
"USEREMAIL":"faucibus#aliquamiaculislacus.org",
"PHONE":"841-9331",
"ADDRESS1":"682-5760 Felis Street",
"ISACTIVE":0,
"PLANTYPE":3
}]
}
Angular Controller
SMSApp.factory('GetStudentService', function ($http) {
studobj = {};
studobj.getAll = function () {
var stud=[];
stud = $http({ method: 'Get', url: 'http://localhost:58545/api/Student?Studentid=1' }).
then(function (response) {
return response.data;
});
return stud;
};
return studobj;
});
SMSApp.controller('studentController', function ($scope, GetStudentService) {
$scope.msg = "Welcome from Controller";
GetStudentService.getAll().then(function (result) {
$scope.school = result;
console.log(result);
});
});
HTML Code
<tbody ng-controller="studentController">
<tr ng-repeat="schools in school track by $index">
<td>{{schools.SchoolId}}</td>
<td>{{schools.schoolname}}</td>
<td>{{schools.SCHOOLCODE}}</td>
<td>{{schools.WEBSITE}}</td>
<td>{{schools.USEREMAIL}}</td>
</tr>
</tbody>
WHAT I GET
Change in your Angular Controller :
SMSApp.controller('studentController', function ($scope, GetStudentService) {
$scope.msg = "Welcome from Controller";
GetStudentService.getAll().then(function (result) {
/********************* Changed Here ********************/
$scope.school = JSON.parse(result._body); // Or only JSON.parse(result)
$scope.school = $scope.school.table;
});
});
And your HTML Code :
<tbody ng-controller="studentController">
<tr ng-repeat="schools in school track by $index">
<td>{{schools.SchoolId}}</td>
<td>{{schools.schoolname}}</td>
<td>{{schools.SCHOOLCODE}}</td>
<td>{{schools.WEBSITE}}</td>
<td>{{schools.USEREMAIL}}</td>
</tr>
</tbody>
Naming the data school is confusing. Do instead:
GetStudentService.getAll().then(function (data) {
$scope.tableObj = data;
console.log(data);
});
<tbody ng-controller="studentController">
<tr ng-repeat="school in tableObj.Table track by school.SchoolId">
<td>{{school.SchoolId}}</td>
<td>{{school.schoolname}}</td>
<td>{{school.SCHOOLCODE}}</td>
<td>{{school.WEBSITE}}</td>
<td>{{school.USEREMAIL}}</td>
</tr>
</tbody>
From the Docs:
Best Practice: If you are working with objects that have a unique identifier property, you should track by this identifier instead of the object instance, e.g. item in items track by item.id. Should you reload your data later, ngRepeat will not have to rebuild the DOM elements for items it has already rendered, even if the JavaScript objects in the collection have been substituted for new ones. For large collections, this significantly improves rendering performance.
— AngularJS ng-repeat API Reference
Just replace your result with result.Table in your controller because if you properly see your response it is inside "Table" named array. Try this you should be able to see your records
SMSApp.controller('studentController', function ($scope, GetStudentService) {
$scope.msg = "Welcome from Controller";
GetStudentService.getAll().then(function (result) {
$scope.school = result.Table;
console.log(result);
});
});
Note: I have replaced your API call in the jsfiddle link with the response mentioned in the question.
JSFiddle Link : http://jsfiddle.net/zu8q7go6/9/

NodeJS + AngularJS $http get

I am using Nodejs and AngularJS and i am having a problem with filling a table in the front-end from a generated JSON file.
I have the below ejs file:
<% include layout %>
<div class="panel panel-info">
<div class="panel-heading">
<h3 class= "panel-title"> <%=title %></h3>
</div>
<br>
<div
data-ng-app="projectionsModule"
data-ng-controller="projectionsController">
<div class="container">
<%include projectionsGrid%>
</div>
</div>
<script src="/bower_components/angular/angular.min.js"></script>
<script src="../../javascripts/app/projections/projectionsModule.js"> </script>
<script src="../../javascripts/app/projections/projectionsService.js"></script>
<script src="../../javascripts/app/projections/projectionsController.js"></script>
and the projectionsGrid.ejs as of below:
<table
data-ng-show="projections.length > 0"
class='table table-striped table-hover'
>
<tr class="success">
<td>Name</td>
<td>Age</td>
</tr>
<tr data-ng-repeat="projection in projections">
<td>{{projection.Name}}</td>
<td>{{projection.Age}}</td>
</tr>
</table>
The controller is the following:
angular.module("projectionsModule")
.controller("projectionsController", projectionsController);
projectionsController.$inject = ['$scope', 'projectionsService'];
function projectionsController($scope, projectionsService) {
// $scope.projections = [];
getAllProjections();
function getAllProjections() {
projectionsService.getAllProjections().
success(function (response) {
$scope.projections = response.projections;
alert(response.projections);
// console.log(response.projections[0]);
})
}
}
and the Service :
angular.module("projectionsModule")
.factory("projectionsService", projectionsService);
projectionsService.$inject = ['$http'];
function projectionsService($http) {
return {
getAllProjections : function () {
return $http.get('/getAllProjections');
}
};
}
It seems that the
projectionsService.getAllProjections().
success(function (response) {
$scope.projections = response.projections;
does not work.
In the browser with Inspect all files are loaded correctly.
The json file is the below:
{
"projections": [
{
"name": "Alex",
"age": "18"
}
]
}
The printscreen i get when i run it:
enter image description here
Could someone please help mew cause i really do not know what else to do.
Thank you.
Print screen with error:
enter image description here
Please see related plunker.
You are using promises wrong. If you need explanation, ask me in a comment.
// Mandatory code for plunkr link
In your case, instead of returning an object, just make a $http call and delete the timeout. I'll let you do it, but if you need help, feel free to ask.
EDIT AFTER COMMENT you forgot to include $http as a dependency. You can also use $http.get, which is faster and (for me at least) easier to understand (see the documentation here)
angular.module("projectionsModule")
.factory("projectionsService", function($q, $http) {
return {
projectionFunction: projectionFunction
}
function projectionFunction() {
return $http.get('127.0.0.1:1337/getAllProjections', {
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
});
}
});
EDIT WITH SOLUTION You need to use $q to use promises. Take a look into it, you will use it very often with your http requests. Your function should look like this :
angular.module("projectionsModule")
.factory("projectionsService", function($q, $http) {
return {
projectionFunction: projectionFunction
}
function projectionFunction() {
var defer = $q.defer();
$http.get('127.0.0.1:1337/getAllProjections', {
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
}).then(function(success) {
defer.resolve(success);
}, function(error) {
defer.reject(error);
});
return defer.promise;
}
});
In your controller, you can then do something like that :
function getAllProjections() {
projectionsService.projectionFunction().then(function(success) {
$scope.projections = success.data.projections;
// do an alert(success) to see what is in it !
}, function(error) {
alert(error.data);
});
}

OData in AngularJS returns empty Array

coming from this working example: http://jsfiddle.net/h22f7596/ , I am trying to display the content of a json-file from my own OData Service in AngularJS.
HTML:
<div ng-repeat="Adressen in results">
{{Adressen.Street}}
<strong style="float:right">
{{Adressen.PLZ}}
</strong>
</div>
</div>
JS:
var myModule = angular.module("MyModule",['ODataResources']);
myModule.controller("MyController",function($scope,$odataresource){
$scope.results =
$odataresource("https://xsgeos0015309874trial.hanatrial.ondemand.com/s0015309874trial/xsgeo/geotabelle/geoDB/GeotabelleODataService.xsodata/Adressen", [],
{
odata:{
method: 'GET',
isArray: true,
transformResponse: function (data) {
return angular.fromJson(data).value;
}
}
})
.odata()
.format("json")
.filter("Street", "Kölner Straße")
.filter("Hausnummer", "22")
.take(5)
.query();
});
I dont know why no data is displayed, because in Chromes console, I can see that the OData request is transferred succesfully, but it is not displayed in my controller and when I look at console.log($scope.results) it shows me an empty array.
Please take a look at my example and tell me what I did wrong: http://jsfiddle.net/h22f7596/123/
Thank you in advance.
/edit: Updated Fiddle.
You were accessing the data wrong. If you would have printed the entire object you would have seen:
Object: {
d: {
results: {
....
}
}
}
Change your return to:
return angular.fromJson(data).d.results
Fiddle: http://jsfiddle.net/h22f7596/124/

Not fetching data with Angular JS

I'm trying to build an app with Angular JS that fetches data from a Django REST API.
I have this script
var userListApp = angular.module('userListApp', ['ngResource']);
userListApp.factory('Classroom', function($resource) {
return $resource('/classrooms/:id/',
{'query': {method: 'GET', isArray:false}}
);
});
userListApp.controller('UsersController', function($scope, Classroom) {
Classroom.query(function(data) {
$scope.classrooms = data;
});
});
and this is the html
<div ng-app="userListApp">
<div ng-controller="UsersController">
<table class="table table-striped">
<thead>
<tr>
<th>Classroom</th>
<th>School</th>
<th>Academic year</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="classroom in classrooms">
<td>{{classroom.classroom}}</td>
<td>{{classroom.school}}</td>
<td>{{classroom.academic_year}}</td>
</tr>
</tbody>
</table>
</div>
</div>
But I'm getting this error in the console
Error: $resource:badcfg
Response does not match configured parameter
Error in resource configuration for action query. Expected response to contain an array but got an object (Request: GET /classrooms)
(from the error reference page of Angular JS)
I was looking at some answers here on stackoverflow, and came to this one, and I tried to do what they say
userListApp.factory('Classroom', function($resource) {
return $resource('/classrooms/:id/',
{method: 'classrooms', id: '*'},
{'query': {method: 'GET', isArray:false}}
);
});
And I'm getting no error, but no data either. There are, however, some tables on the webpage, like if it's trying to "catch" something, here's a screenshot
UPDATE:
I've tried to put this line
return $resource('/classrooms/?format=json',
Instead of this
return $resource('/classrooms/:id/',
on the Angular app, and there's no data, but, if I go to developer tools on Network -> XHR, I get the json data
[{"school":{"id":1,"school_name":"IPSIA F. Lampertico","address":"Viale Giangiorgio Trissino, 30","city":"Vicenza"},"academic_year":"2015/2016","classroom":"1^A","floor":0,"students":[{"classroom":1,"first_name":"Stefano","last_name":"Rossi","gender":"M","birthday":"1998-06-22"},{"classroom":1,"first_name":"Luca","last_name":"Possanzini","gender":"M","birthday":"1999-11-22"}]
but, as I said, that data is not shown on the tables in the html.
UPDATE 2:
After adding "?format=json'" to the resource url, I get the exact amount of rows (in my data I have three classrooms, so I get three rows in the HTML table), but no data in it.
UPDATE 3:
I've added this line to debug the code
userListApp.controller('UsersController', function($scope, Classroom) {
Classroom.query(function(data) {
$scope.classrooms = data;
console.log(data); <--- NEW LINE FOR THE DEBUG
});
});
and now I get this, on the console log
Your data is not in the correct format. The data you posted has missing }] in the end. Recheck your server response.
I replicated the whole scenario on my machine and your code worked perfectly fine.
HTML: Same as yours.
Script:
var userListApp = angular.module('userListApp', ['ngResource']);
userListApp.factory('Classroom', function($resource) {
return $resource('http://localhost:9000/classrooms/1', //changed this line only.
{'query': {method: 'GET', isArray:false}}
);
});
userListApp.controller('UsersController', function($scope, Classroom) {
Classroom.query(function(data) {
$scope.classrooms = data;
});
});
http://localhost:9000/classrooms/1 returns just the data that you specified with }] appended at the end.
OUTPUT:

Angular can't see my Array change in the view

I'm using angularjs with Node-webkit and making a desktop application with nedb(as an embedded database).
My problem is that when i load (via a service) list of object from the database and try to show them in the view (using ng-repeat), the view can't see the loaded data (looks like it is not getting any update)
When i put a static data :
$scope.levels = [{_id:'abcd'},{_id:'efgh'}];
The view get it without any problems.
I've made some research and looks like that is somthing related to $apply
and $digest...I'm not sure.
Here my code:
//router
.state('level', {
url: '/level',
templateUrl:'frontend/components/level/views/level.html',
controller: 'LevelController'
})
The controller load the data from the DB asynchronously :
levelModule.controller('LevelController', function($scope,$rootScope,LevelService) {
// $scope.levels = [{_id:'abcd'},{_id:'eff'}];
$scope.levels = [];
LevelService.getAllLevels(function(lvs) {
console.log("tous "+JSON.stringify(lvs));
$scope.levels = lvs;
});
Here my service:
levelModule.factory('LevelService', function(DB_URL) {
var Datastore = require('nedb')
, path = require('path');
db = {};
db.levels = new Datastore({ filename:DB_URL+'/levels.db',autoload: true });
return {
getAllLevels : function(callback) {
db.levels.find({}, function (err, lvs) {
if(err)
console.log(err);
else
callback(lvs);
});
},
insertLevel: function(level,callback) {
db.levels.insert(level, function (err, lv) {
if(err)
console.log(err);
else
callback(lv);
});
},
upsertLevel: function(level,callback) {
db.levels.update({_id: level._id}, {_id: level._id,price: {t1:{},t2:{},t3:{}}}, { upsert: true }, function(err,numReplaced,lv){
if(err)
console.log(err);
else
callback(numReplaced,lv);
});
}
};
});
And finally my view:
<table class="table table-bordered table-hover">
<tr ng-repeat="level in levels">
<td>
{{level._id}}
</td>
<td>
<button ng-click="loadPrices(level)" type="button" class="btn btn-default" data-animation="am-fade-and-scale" data-template="frontend/components/level/views/level.edit.html" data-placement="center" bs-modal="modal">
<i class="fa fa-pencil-square-o"></i> Modifier
</button>
</td>
</tr>
</table>
Any help ?
You're using an old school callback, which takes place outside of the Angular digest. It's good that you got it working by calling $apply, but you should try modifying your service to return a Promise. Promises are the Angular way of performing async operations.
You can read up more about them at https://thinkster.io/a-better-way-to-learn-angularjs/promises and https://docs.angularjs.org/api/ng/service/$q.
Solved by putting $apply() in the asynchronous function :
LevelService.getAllLevels(function(lvs) {
$scope.levels = lvs;
$scope.$apply();
});

Resources