enter image description hereI am not able Retrieve data from Json file using Angular Js.
Am trying to get the Json data from URL using click function in angular Js and also when click the button add empty tr td in table.
<!doctype html>
<html lang="en" ng-app="sampleapp">
<head>
{% load staticfiles %}
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="{% static 'bootstrap/js/angular.min.js'%}"></script>
<script type="text/javascript" src="{% static 'bootstrap/js/jquery.min.js'%}"></script>
<script src="{% static 'bootstrap/js/bootstrap.min.js'%}" type="text/javascript"></script>
<script type="text/javascript" src="{% static '/bootstrap/js/app_ang.js'%}"></script>
</head>
<body >
<div class="col-sm-12" ng-controller="tablejsonCtrl">
<button class="clickbutton" ng-click="jsonclick();">Show-json</button>
<table rule="all" class="table table-bordered table-hover ">
<tr>
<th>Name</th>
<th>Price</th>
<th>Description</th>
<th>Calories</th>
<th>isbest</th>
</tr>
<tr ng-repeat="value in students.breakfast_menu.food">
<td>{{value.name}}</td>
<td>{{value.price}}</td>
<td>{{value.description}}</td>
<td>{{value.calories}}</td>
<td>{{value.isbest}}</td>
</tr>
</table>
</div>
</body>
</html>
var app =angular.module('sampleapp', [])
app.controller("tablejsonCtrl", function ($scope, $http) {
$scope.jsonclick = function () {
var url = "http://127.0.0.1:8000/static/waste/test.json";
$http.get(url).then(function(response) {
$scope.students = response.data;
});
}
});
Instead of use ".then" try with .success method, so replace this :
$http.get(url).then(function(response) {
$scope.students = response.data;
});
with this :
$http.get('url').success(function (response){
$scope.students= response;
});
You can use HTTP request in local.
Only works for Angular Versions above 1.6
$http.get('./path-to-JSON-file/../someFile.json').
then(function onSuccess(response) {
angular.extend(_this, data);
defer.resolve();
}).
catch(function onError(response) {
console.log(response);
});
for further research: CLICK HERE
Related
I am programming a crud application with a creation date. when I add a new object, the date is saved on the database with a good format :
Database
Now when the date is displayed on the table, it shows me like this :
enter image description here
I found a solution to show it as a good format with {{Rec.Date.slice(6,-2) | date:'dd/MM'}}
The issue is that when I tried to add a datepicker to make a seach with the date variable, the search does not match anything even if I give it a date already existed on the base. I am pretty sure that the issue is with date format but I don't find any solution to format it when the save of a new reclamation is done.
reclamations-by-date-controller.js :
(function () {
'user strict';
angular
.module('app')
.controller('ReclamationsByDateController', ['$scope', 'ReclamationsByDateService', function
($scope, ReclamationsByDateService) {
// Call GetAllReclamations function to init the table
GetAllReclamations();
// Get reclamation list function
function GetAllReclamations() {
var getRecData = ReclamationsByDateService.getReclamations();
getRecData.then(function (reclamation) {
$scope.reclamations = reclamation.data;
}, function () {
alert('Error in getting reclamations records');
});
}
$scope.changeSelect = function (dt) {
$scope.changeDate = moment(dt).format("DD/MM/YYYY");
}
$scope.today = function () {
$scope.dt = new Date();
};
$scope.today();
$scope.clear = function () {
$scope.dt = null;
};
$scope.open = function ($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.opened = true;
};
$scope.dateOptions = {
formatYear: 'yyyy',
startingDay: 1
};
$scope.formats = ['dd/MM/yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
$scope.format = $scope.formats[0];
}])
.service('ReclamationsByDateService', ['$http', function ($http) {
// Get Reclamations
this.getReclamations = function () {
return $http.get("/Reclamations/ReclamationsList");
};
}]);
})();
ReclamationsByDate.cshtml :
<div ng-controller="ReclamationsByDateController">
<pre>Please select a date: <em>{{dt | date:'fullDate' }}</em></pre>
<h4>DatePicker</h4>
<div class="row">
<div class="col-md-6">
<p class="input-group">
<input type="date" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-
open="opened" min-date="minDate" max-date="'2015-06-22'" ng-change="changeSelect(dt)" date-
disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event)">Search</button>
</span>
</p>
</div>
</div>
<pre>{{changeDate}}</pre>
<table class="table table-striped" show-filter="true" id="tblReclamations" style="width:100%">
<thead>
<tr>
<th>
Id
</th>
<th>
Date
</th>
<th>
Title
</th>
<th>
Status
</th>
<th>
Responsible
</th>
<th>
Comment
</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="Rec in reclamations | filter: {Date:changeDate}" ng-class-odd="'odd'" ng-
class-even="'even'" ng-style="{ 'background-color' : (Rec.Status == 'Pending') ? 'orange' : 'null'
}">
<td>{{Rec.RecId}}</td>
<td style="font-size: small; color:red;"><strong>{{Rec.Date}}</strong></td>
<td style="font-size: medium;"><strong>{{Rec.Title}}</strong></td>
<td style="font-size: small;"><strong>{{Rec.Status}}</strong></td>
<td>{{Rec.Responsible}}</td>
<td style="font-size: small;"><strong>{{Rec.Comment}}</strong></td>
</tr>
</tbody>
</table>
</div>
<script src="~/Scripts/app/controllers/reclamations-by-date-controller.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.js"></script>
<script>
</script>
_Layout.cshtml :
<link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-
ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet"
href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery.ui.all.css"
type="text/css" media="screen">
<link rel="stylesheet" href="/Content/bootstrap-datetimepicker.css" />
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
<script src="~/Scripts/modernizr-2.8.3.js"></script>
<script src="~/Scripts/jquery-3.0.0.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript" src="/scripts/bootstrap.min.js"></script>
<script type="text/javascript" src="/scripts/moment.min.js"></script>
<script type="text/javascript" src="/scripts/bootstrap-datetimepicker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.8.1/xlsx.full.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.5.0/jszip.js"></script>
<script src="//cdn.rawgit.com/rainabba/jquery-table2excel/1.1.0/dist/jquery.table2excel.min.js">
</script>
<script src="~/Scripts/angular.min.js"></script>
<script src="//cdn.jsdelivr.net/angular.ngtable/0.3.3/ng-table.js"></script>
<script src="~/Scripts/angular-route.min.js"></script>
<script src="~/Scripts/app/app.js"></script>
Thank you !
The problem is with your filter
ng-repeat="Rec in reclamations | filter: {Date:changeDate}"
You need to pass to Angular filter a Date object, but changeDate is not (since you set it to a custom string on your datepicker handler). That's why the search fails.
Change your handler as follows:
$scope.changeSelect = function (dt) {
$scope.changeDate = dt;
}
you can try this
<span>{{1288323623006 | date:'yyyy-MM-dd HH:mm:ss Z'}}</span><br>
You could make use of customFilter to format any dates.
I'm using momentjs library here.
(function () {
'use strict';
angular
.module('app.core') // use your module name here
.filter('humanizeFilter', ['moment', function (moment) {
return function (input) {
return moment(input).format('MMM D, YYYY, HH:mm');
};
}
]
);
})();
Then in your template, you can use as below:
<span>{{1592585639000 | humanizeFilter}}</span><br>
Hope this helps!!
Im learnign angularJs, and i want to import an array from a json on my controller Like that:
myApp.controller("demoCtrl", function ($scope, $http) {
var promise = $http.get("todo.json");
promise.then(function (data) {
$scope.todos = data;
});
});
and im using a table to display the data on todos:
<table class="table">
<tr>
<td>Action</td>
<td>Done</td>
</tr>
<tr ng-repeat="item in todos">
<td>{{item.action}}</td>
<td>{{item.done}}</td>
</tr>
</table>
and this results on the flowing html page:
<!DOCTYPE html>
<html ng-app="demo">
<head>
<title>Example</title>
<link href="../css/bootstrap.css" rel="stylesheet" />
<link href="../css/bootstrap-theme.css" rel="stylesheet" />
<script src="angular.js"></script>
<script type="text/javascript">
var myApp = angular.module("demo", []);
myApp.controller("demoCtrl", function ($scope, $http) {
var promise = $http.get("todo.json");
promise.then(function (data) {
$scope.todos = data;
});
});
</script>
</head>
<body ng-controller="demoCtrl">
<div class="panel">
<h1>To Do</h1>
<table class="table">
<tr>
<td>Action</td>
<td>Done</td>
</tr>
<tr ng-repeat="item in todos">
<td>{{item.action}}</td>
<td>{{item.done}}</td>
</tr>
</table>
</div>
</body>
The normal way of getting access to the json is from the data within the returned object from the http request - you are tying to use the entire returned object.
I use "response" as the return from the get request - then the data is "response.data". This is needed because there are other properties returned within the response object from the get request.
Try changing your promise to be as follows:
promise.then(function (response) {
$scope.todos = response.data;
});
Also you should be having a thead and th's and tbody in the table to show a more semantically correct table
<table class="table">
<thead>
<tr>
<th scope="col">Action</th>
<th scope="col">Done</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in todos">
<td>{{item.action}}</td>
<td>{{item.done}}</td>
</tr>
</tbody>
</table>
Promise return entire response in callback Data is in response.data
myApp.controller("demoCtrl", function ($scope, $http) {
var promise = $http.get("todo.json");
// Entire response in callback
promise.then(function (response) {
$scope.todos = response.data; // Data is in response.data
});
});
More: https://docs.angularjs.org/api/ng/service/$http
I am relatively new to Angularjs, and am building a website. When I try to inject todo.html into the body tags of index.html nothing happens. I am not getting any errors in the console. I have read many of the similar posts to mine, and have already tried
Remove the ng-include from the body of index.html
Moved the links for angualrjs and bootstrap from the body of index.html to the head
Originally I used Ng-route but it did not work, so I implemented ui-router
I have tried both ng-route and ui-router,and both run without any errors. I don't think it has anything to do with either.
index.html
<html ng-app="todoApp">
<head>
<!-- META -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"><!-- Optimize mobile viewport -->
<title>Todo App</title>
<!-- Angular ans JS links-->
<script src="vendor/angular/angular.min.js"></script>
<script src="vendor/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="app/app.js"></script>
<script src="app/services/todo.service.js"></script>
<script src="app/controllers/todo.controller.js"></script>
<!-- <script src="vendor/angular-route/angular-route.min.js"></script>-->
<!--Jquery and Bootstrap Links-->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://npmcdn.com/tether#1.2.4/dist/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/js/bootstrap.min.js" integrity="sha384-VjEeINv9OSwtWFLAtmc4JCtEJXXBub00gtSnszmspDLCtC0I4z4nqz7rEFbIZLLU"
crossorigin="anonymous"></script>
<!-- css links -->
<link href="vendor/bootstrap-css-only/css/bootstrap.min.css" rel="stylesheet"><!-- load bootstrap -->
<link rel="stylesheet" href="assets/css/todoApp.css">
<link rel="stylesheet" type="text/css" href="assets/css/Header-Picture.css">
</head>
<body >
<div ng-include="'app/views/header.html'"></div>
<!--<div ng-include="'app/views/footer.view.html'"></div>
-->
<ui-view></ui-view>
<!--<div ui-view></div>-->
</body>
</html>
App.js
var todoApp = angular.module('todoApp', [
'ui.router'
]);
todoApp.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('todo', {
url: "/",
templateUrl: 'views/todo.html',
controller: 'TodoController'
})});
todo.controller.js
todoApp.controller('TodoController', ['$scope', 'Todos', function TodoController($scope, Todos) {
$scope.formData = {};
console.log("in the TodoController");
// when landing on the page, get all todos and show them
Todos.get()
.success(function(data) {
$scope.todos = data;
});
// when submitting the add form, send the text to the spring API
$scope.createTodo = function() {
if(!$scope.todoForm.$valid) {
return;
}
Todos.create($scope.formData)
.success(function(data) {
$scope.formData = {}; // clear the form so our user is ready to enter another
$scope.todos.push(data);
});
};
// delete a todo after checking it
$scope.deleteTodo = function(id) {
Todos.delete(id)
.success(function(data) {
angular.forEach($scope.todos, function(todo, index){
if(todo.id == id) {
$scope.todos.splice(index, 1);
}
});
});
};
// when submitting the add form, send the text to the node API
$scope.saveTodo = function(todo) {
Todos.update(todo)
.success(function(data) {
$scope.editedTodo = {};
});
};
$scope.editedTodo = {};
$scope.editTodo = function(todo) {
$scope.editedTodo = todo;
}
$scope.revertTodo = function() {
$scope.editedTodo = {};
}
}]);
You should be using otherwise to force the first state to be loaded as below
app.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('todo', {
url: "/",
templateUrl: 'todo.html',
})
$urlRouterProvider.otherwise('/');
});
Your index.html will look like
<div ng-include="'app/views/header.html'"></div>
<ui-view>
</ui-view>
LIVE DEMO
I added the code posted by #Aravind to my project which I belive was an improvement on my own and was correct. But the issue was the file path to the todo.html. The file path in the original was views/todo.html
the correct path is app/views/todo.html
My original code:
todoApp.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('todo', {
url: "/",
templateUrl: 'views/todo.html',
controller: 'TodoController'
})});
Current Working Code
todoApp.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('todo', {
url: "/",
templateUrl: 'app/views/todo.html',
})
$urlRouterProvider.otherwise('/');
});
I am trying to load in a list of "donors" for my angular application. I get the data from an API, but I doesn't work the way I want it to. I get this error:
$resourceProvider <- $resource <- DonorerCtrl
In my DonorerCtrl class I have the following code:
angular.module("testApp").controller("DonorerCtrl",
function($scope, $http, $resource) {
console.log("Test fra donorerCtrl");
$scope.donorerResource = $resource("http://bloodadmin.cloudapp.net/api/users/:donorid"),
{id: "#donorid"}, { update: {method: "PUT"}};
$scope.donorerVisits = $scope.donorerResource.query();
$http (
{
method: "GET",
url: "http://bloodadmin.cloudapp.net/api/donors"
}).success(function(data) {
$scope.donorerVisits = data;
}).error(function() {
alert("error");
});
$scope.donorerVisits = [];
});
I try to load it in my HTML file with this code:
<div class="form-group col-lg-12">
<table class="table">
<thead>
<tr>
<th>Fornavn</th>
<th>Efternavn</th>
<th>Køn</th>
<th>Fødselsdag</th>
<th>Læs mere</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="visit in donorerVisits">
<td>{{visit.firstname}}</td>
<td>{{visit.lastname}}</td>
<td>{{visit.sex}}</td>
<td>{{visit.age}}</td>
<td><button class="btn btn-default">Læs mere</button></td>
</tr>
</tbody>
</table>
</div>
In my Index html I load in these JS files:
<!-- JS -->
<script src="libs/angular.js" type="text/javascript"></script>
<script src="libs/angular-ui-router.min.js" type="text/javascript"></script>
<script src="libs/angular-resource.js" type="text/javascript"></script>
<!-- Angular Custom -->
<script type="text/javascript">
angular.module("testApp", ['ui.router']);
</script>
<script src="js/controllers/HjemCtrl.js"></script>
<script src="js/controllers/DonorerCtrl.js"></script>
<script src="js/controllers/BlodCtrl.js"></script>
<script src="js/navigation.js"></script>
try:
angular.module("testApp", ['ui.router', 'ngResource']);
Here is my main page implementing routes with the help of demo module,
<!DOCTYPE html>
<html >
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div ng-app="demo">
<!--HEADER - NAVIGATION-->
<p align="center">
<b><u>My First AngularJS Demo App!</u></b></p>
<p align="center">
Data Binding | Expressions
</p>
<!--INCLUDE REFERENC AJS SCRITS-->
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/angular-route.js"></script>
<!--INCLUDE REFERENC AJS SCRITS-->
<script>
// Code goes here
var demo = angular.module('demo', ['ngRoute']);
demo.config(function ($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'Default.htm'
}).
when('/DataBinding', {
templateUrl: 'DataBinding.htm',
controller : 'myCtrl'
}).
otherwise({ templateUrl: 'main.html' });
})
</script>
<script>
var app = angular.module("myApp1", []);
app.controller("myCtrl", function ($scope) {
$scope.firstName = "Sachin";
$scope.lastName = "Tendulkar";
});
</script>
Now DataBinding.htm is making use of another module with in main page called myApp1. Here is DataBinding.htm code,
<div na-app="myApp1">
{{ firstName + " " + lastName }}
</div>
Expected output : When I click on Data Binding, page should display Sachin Tendulkar
DataBinding.htm this not working whn I click on DataBinding link! its just showing
{{ firstName + " " + lastName }} instead of actual values.
Any Help appreciated!