Pass json to angular controller - angularjs

i want to pass a json file or object to an angular controller to use it with ng-repeat.
My json object is stored in my index.js file and written to data.json. My controller.js file looks like the following:
var fs = require('fs');
var jobs = fs.readFile('out/data.json', 'utf-8', (err, data) => {
if (err) throw err;
});
angular.module('slrm', [].controller('slrmctrl', function($scope) {
$scope.data = jobs.data;
}));
And thats my html file:
<table class="table">
<thead>
<th scope="col">#</th>
<th scope="col">JOBNAME</th>
<th scope="col">USER</th>
<th scope="col">NODE</th>
<th scope="col">CPUS</th>
<th scope="col">START</th>
<th scope="col">STATE</th>
</thead>
<tbody ng-app="slrm" ng-controller="slrmctrl">
<tr ng-repeat="x in data | orderBy : 'JOBID'">
<td>{{ x.JOBID }}</td>
<td>{{ x.NAME }}</td>
<td>{{ x.USER }}</td>
<td>{{ x.NODELIST }}</td>
<td>{{ x.CPUS }}</td>
<td>{{ x.STATE }}</td>
<td>{{ x.REASON }}</td>
</tr>
</tbody>
</table>
<script src="js/controller.js"></script>
Now I have 2 questions. Im providing this html with:
app.get('/', function (req, res) {
res.sendFile(__dirname + '/view/index.html');
});
var server = app.listen(3000, function() {
console.log('Server running');
};
Is the controller.js file even imported? because bootstrap.css is not imported somehow.
The other Question is if the line
$scope.data = jobs.data;
is even working? Should I read the file or use the exported object from index.js? How do I export only this one object?
I built this from scratch because im very new to js and stuff.
Thank you!

I think the issue lies in your module and controller declaration.
When declaring a module, you have to instantiate it first, by passing it's dependencies.
angular.module('slrm', []);
Afterwards, you can attach a controller to the module
angular.module('slrm').controller('slrmctrl', function($scope) {
$scope.data = jobs.data;
}));
Secondly, instead of reading the data.json object externally and passing it to controller, why don't you read the data inside your controller?
angular.module('slrm').controller('slrmctrl', ['$scope', '$http', function($scope, $http) {
$http.get('out/data.json')
.then(function(response) {
$scope.data = response.data;
});
}]);
EDIT to show example of timer (polling) implementation
angular.module('slrm').controller('slrmctrl', ['$scope', '$http', '$timeout', function($scope, $http, $timeout) {
$scope.refreshInterval = 900; // Sec (15 Minutes)
$scope.getData = function () {
$http.get('out/data.json')
.then(function(response) {
$scope.data = response.data;
return $timeout($scope.getData, $scope.getTimeLeftToRefresh());
});
};
$scope.getTimeLeftToRefresh = function () {
var now = new Date();
var timeLeftToRefresh = ($scope.refreshInterval - (now.getMinutes() * 60 + now.getSeconds()) % $scope.refreshInterval) * 1000;
return timeLeftToRefresh;
};
// Initial call to start the loop
$scope.getData();
}]);

Related

Can't access $scope variables after changing view with $location.path

I'm trying to access data that is on the $scope on a view where the app lands after clicking a button but it seems as if after using $location.path(url) to do the redirection the APP cannot see a variable that exists on the $scope anymore.
Form with the button:
<form ng-submit="getBrokenProbes()">
<table class="table table-striped">
<tr>
<th>Bmonitor</th>
<th>Select Bmonitor</th>
</tr>
<tr ng-repeat="bmonitor in bmonitors">
<td>
<span>{{bmonitor.domainName}}</span>
</td>
<td>
<button class="btn btn-primary" ng-click="getBrokenProbes(bmonitor)">Request</button>
</td>
</tr>
</table>
</form>
Controller:
app.controller('logmeinValidationCtrl', ['$scope','$http', '$location', function($scope,$http, $location){
$scope.bmonitors = {};
$scope.brokenProbes = {};
$http.get('http://localhost/getBmonitors').success(function (data) {
$scope.bmonitors = data;
console.log($scope.bmonitors);
});
$scope.getBrokenProbes = function(bmonitor) {
let url = 'http://localhost/getBrokenProbes';
$http.post(url, bmonitor).then(function (response) {
$scope.brokenProbes = response.data.hosts;
console.log($scope.brokenProbes);
$scope.showBrokenProbes();
})
};
$scope.showBrokenProbes = function () {
$location.path('/logmeinValidationResult')
}
}]);
I'm trying to show that data in a different view but $scope.brokenProbes is not available in logmeinValidationResult.html (the page where I land after $location.path) so it just shows an empty table.
logmeinValidationResult.html
<table class="table table-striped">
<tr>
<th>Probe name</th>
</tr>
<tr ng-repeat="probe in brokenProbes">
<td>
<span>{{probe.description}}</span>
</td>
</tr>
</table>
New page controller:
app.controller('logmeinValidationResultCtrl', ['$scope', function($scope){
console.log($scope.brokenProbes); //This yields undefined
}]);
I) The variable $scope.brokenProbes belongs to the controller logmeinValidationCtrl where is defined...
In order to use it inside another controller, you should pass it - broadcast.
OR
II) Another (Better) solution is when the user gets redirected to logmeinValidationResult, you can call the API, get the data and assign to $scope.brokenProbes variable.
In that case,
your old controller should look like this:
app.controller('logmeinValidationCtrl', ['$scope','$http', '$location', function($scope,$http, $location){
$scope.bmonitors = {};
$http.get('http://localhost/getBmonitors').success(function (data) {
$scope.bmonitors = data;
console.log($scope.bmonitors);
});
$scope.getBrokenProbes = function(bmonitor) {
$location.path('/logmeinValidationResult/' + bmonitor); // Pass bmonitor to the result here so you can call the api with that parameter later on
};
}]);
And your here is how your new page controller should look like:
app.controller('logmeinValidationResultCtrl', ['$scope','$http', '$routeParams', function($scope,$http, $routeParams){
$scope.brokenProbes = [];
let url = 'http://localhost/getBrokenProbes';
let bmonitor = $routeParams.bmonitor; // Get passed bmonitor value from the route params
$http.post(url, bmonitor).then(function (response) {
$scope.brokenProbes = response.data.hosts;
console.log($scope.brokenProbes);
})
}]);
And don't forget to register route param bmonitor to your $routeProvider or whatever you use...

Getting error data not found using bootstrap datatable with angularjs

I used all possible dependencies available on net but couldn't able to solve the issue.
Back End code is written using ASP .NET and MVC returns Json data.
Below is my controller Code
var app = angular.module('myTaskFormApp', [])
app.controller('MyTaskController', function ($scope, $http, $location, $window) {
$scope.TaskModel = {};
$scope.message = '';
$scope.result = 'colour-default';
$scope.isViewLoading = false;
$scope.List = null;
$scope.List1 = null;
var TaskNo = getQueryVariable('TaskNo');
getallData();
//******=========Get All Resources=========******
function getallData() {
debugger;
$http.get('/Dashboard/GetMyTasks?TaskNo=0').then(function (data, status, headers, config) {
$scope.List = data.data;
$('.dataTable-length').dataTable();
}, function (data, status, headers, config) {
$scope.errors = [];
$scope.message = 'Unexpected Error while saving data!!';
console.log($scope.message);
});
};
});
I tried using datatable='ng' even that din't work.
Below is my HTML Code.
I'm getting data but at last I'm getting
No data found
.
As I click the table to sort my data; all data is wiped out.
Anchor tag is also not working in the link. The link never hits the controller.
<table class="table table-striped table-bordered tab-pane dataTable-length" cellspacing="0" width="100%">
<thead>
<tr>
<th>Task Name</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="TaskModel in List | filter : paginate | filter:search" ng-class-odd="'odd'">
<td>{{TaskModel.TaskName}}</td>
<td>{{TaskModel.Status}}</td>
</tr>
</tbody>
</table>
Im getting Data Not found at bottom of table

Updating model without scope in AngularJS

I have been searching for answers for several hours and I think I need to add a separate question. I have the following table and controller:
<table class="table table-striped">
<thead>
<tr>
<th>value</th>
<th>datapoint</th>
</tr>
</thead>
<tr ng-repeat="obj in cont.objs">
<td>{{ obj.value }}</td>
<td>{{ obj.datapoint }}</td>
</tr>
</table>
<button>Next</button>
objects.controller.js
(function() {
'use strict';
angular
.module('app.objects')
.controller('ObjectsController', ObjectsController );
ObjectsController.$inject = ['objectsService', '$state', '$stateParams', '$uibModal', 'logger'];
function ObjectsController(objectsService, $state, $stateParams, $uibModal, logger) {
var cont = this;
activate().then( function successCallback(selectObjects) {
cont.objects = loadObjects(selectObjects._links.objects.href);
});
}
function loadObjects(uri) {
...
cont.objects = getObjects(uri)
return cont.objects;
}
...
I have a button 'Next' and when pressed, needs to update cont.objects by fetching new cont.objects from the api by calling loadObjects with the original uri + '/2'.
I thought maybe
<button ng-click="cont.loadObjects(cont.objects.next.href)">Next</button>
would work, but I get an error saying loadObjects is undefined. Any ideas?
Hope you had defined activate() function and to make this work use
controller As with the controller definition and make sure you are clicking the button after the success of activate() function .
https://toddmotto.com/digging-into-angulars-controller-as-syntax/
You're not binding that function to scope. You need to add that function inside of your controller and bind it.
function ObjectsController(objectsService, $state, $stateParams, $uibModal, logger) {
var cont = this;
cont.loadObjects = loadObjects;
function loadObjects(uri) {
cont.objects = getObjects(uri)
return cont.objects;
}
activate().then(function successCallback(selectObjects) {
cont.objects = loadObjects(selectObjects._links.objects.href);
});
}

How to get data from db using angularjs and entity framework in mvc

I am newbie in learning AngularJS. Can anyone help me to understand how to get data from database using angularjs and entity-framework in mvc5.
Let's say we have data table named: tbl_student {rollno, name} and we want all the students data from the database. So what should be the most understandable way for new learners.
Angular-Code
var myApp = angular.module("MyModule", []);
myApp.controller("DBcontroller", function ($scope, $http) {
$http.get("AngularController/AllStudents")
.then(function (response) {
$scope.students = response.data
})
})
Html-code in file named "Test.cshtml"
<body ng-app="MyModule">
<table ng-controller="DBcontroller">
<thead>
<tr>
<th>Name</th>
<th>City</th>
<th>Institute</th>
</tr>
</thead>
<tr ng-repeat="student in students">
<td>{{ student.Name }}</td>
<td>{{ student.City }}</td>
<td>{{ student.Institute }}</td>
</tr>
</table>
</body>
In MVC Controller
public class AngularController : Controller
{
// GET: Angular
public ActionResult Test()
{
return View();
}
public JsonResult AllStudents()
{
using (EducationContext context = new EducationContext())
{
var students = context.tbl_Student.ToList();
return Json(students, JsonRequestBehavior.AllowGet);
}
}
}
The reason why this probably isn't working is because in your get you are adding the word Controller after Angular.
That is unnecessary.
This should work:
var myApp = angular.module('MyModule', []);
myApp.controller('DBcontroller', function ($scope, $http) {
$http.get('/Angular/AllStudents') // added an '/' along with deleting Controller portion
.then(function (response) {
$scope.students = response.data
})
})
If you add this in web.config file Http Get will also work
<configuration>
<system.web>
<webServices>
<protocols>
<add name="HttpGet"/>
</protocols>
</webServices>
</system.web>
</configuration>
try to change from $http.get to $http.post
var myApp = angular.module('MyModule', []);
myApp.controller('DBcontroller', function ($scope, $http) {
$http.post('/Angular/AllStudents') // added an '/' along with deleting Controller portion
.then(function (response) {
$scope.students = response.data
});
});

Troubleshoot Angular Views when no error happens

I am beginning to learn Angular, and I am having this issue. I am getting data from a web service using REST, then passing this data to the controller as data.d.results, I check in developer tools and results.length is 11, all is fine. I modified my html to include ng-app,ng-controller. My HTML for the Controller wrapper looks like this:
<table ng-controller="ListsController as vm">
<thead>
<tr>
<td>Image</td>
<td>Product</td>
<td>Code</td>
<td>Available</td>
<td>Price</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="product in vm.products">
<td>
<img ng-src="{{product.ImageUrl.Url}}" title="{{product.Title}}" style="width: 50px;margin:2px;" />
</td>
<td>{{product.Title}}</td>
<td>{{product.ProductCode}}</td>
<td>{{product.ReleaseDate}}</td>
<td>{{product.Price | currency}}</td>
</tr>
</tbody>
</table>
and My controllerJS file looks like this:
(function () {
angular
.module("sitemanagerapp")
.controller("ListsController",
ListsController);
function ListsController() {
var vm = this;
var getProducts = getAllItems('Products');
getProducts
.done(function (data, status, jqXHR) {
vm.products = data.d.results;
})
.fail(function (jqXHR, status, error) {
LogError(error);
});
}
}());
I am checking in developer tools, and at the end, vm.products is populated with the data from the service. But why my table isn't filled with the data? How can I troubleshoot problems related to it? No errors are shown for me or anything.
I suppose your getProducts is not implemented with angular's $http or $resource.
In such case, to achieve your goal, you have to inject $scope into your controller even though you are using controllerAs syntax.
(function () {
angular
.module("sitemanagerapp")
.controller("ListsController",
['$scope', ListsController]);
function ListsController($scope) {
var vm = this;
var getProducts = getAllItems('Products');
getProducts
.done(function (data, status, jqXHR) {
vm.products = data.d.results;
$scope.$apply();
})
.fail(function (jqXHR, status, error) {
LogError(error);
});
}
})();

Resources