Empty data is adding in Table.
I am not able to retrieve data from Json file using Angular Js. I am trying to get the Json data from URL using click function in angular Js and also when click the button add empty tr in table.
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(data) {
$scope.students = data;
});
}
});
<!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 = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="{% static 'waste/angular.min.js'%}"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="{% static '/bootstrap/js/app_ang.js'%}"></script>
<div class="col-sm-12" ng-controller="tablejsonCtrl">
<button class="clickbutton" value="10" 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="stuednt in students">
<td>{{stuednt.name}}</td>
<td>{{stuednt.price}}</td>
<td>{{stuednt.description}}</td>
<td>{{stuednt.calories}}</td>
<td>{{stuednt.isbest}}</td>
</tr>
</table>
</div>
</body>
</html>
$http.get(url).then(function(response, data){
$scope.students = response.data;
});
You need to pass a response alongside the data that you are fetching.
controller
$http.get(URL).then(function(response) {
$scope.students= response.data;
});
html
<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>
json price and calories values should be in double quotes
{
"breakfast_menu":
{
"food": [
{
"name": "Belgian Waffles",
"price": "$5 .95",
"description": "Two of our famous Belgian Waffles with plenty of real maple syrup",
"calories": "650",
"isbest": "false"
},
{
"name": "Strawberry Belgian Waffles",
"price": "$7 .95",
"description": "Light Belgian waffles covered with strawberries and whipped cream",
"calories": "900",
"isbest": "true"
}]
}
}
Related
Hello I am learning angular 1 and I have problem at the very beggining.
I'm trying to display data with table in ng-repeat using controller. Angular in app stops working at all even {{ 2 + 2 }} on bottom of page doesn't work. I can't find the reason why.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>SZYBKI START Z BRACKETS</title>
<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="bootstrap.min.css">
</head>
<body ng-app="aplikacja">
<div class="container" ng-controller="kontrolerTabeliSkoczkow">
<h1 class="text-center">Klasyfikacja skoczków narciarskich</h1>
<br />
<div class="input-group">
<span class="input-group-addon">Szukaj: </span>
<input type="text" class="form-control" placeholder="np. Adam Małysz" />
</div>
<br />
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th ng-repeat="naglowek in [
'Imię', 'Rok urodzenia', 'Narodowość'
]">{{ naglowek }}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="skoczkowie in skoczkow">
<td>{{skoczek.Name}}</td>
<td>{{skoczek.Nation}}</td>
<td>{{skoczek.rank}}</td>
</tr>
</tbody>
</table>
</div>
</div>
{{ 2+2 }}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script>
var app = angular.module('aplikacja', []);
app.contoller( 'kontrolerTabeliSkoczkow' , ['$scope', function( $scope ) {
$scope.skoczkowie = [
{
"Name": "HIRSCHER Marcel",
"Nation": "AUT",
"rank": 1
},
{
"Name": "JANSRUD Kjetil",
"Nation": "NOR",
"rank": 2
}
]
}];
</script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="bootstrap.min.js"></script>
</body>
</html>
You forgot to close the controller.
<script>
var app = angular.module('aplikacja', []);
app.contoller( 'kontrolerTabeliSkoczkow' , ['$scope', function( $scope ) {
$scope.skoczkowie = [
{
"Name": "HIRSCHER Marcel",
"Nation": "AUT",
"rank": 1
},
{
"Name": "JANSRUD Kjetil",
"Nation": "NOR",
"rank": 2
}
]
}]);
</script>
(The ')' at the very end)
Also, I would declare Jquery BEFORE angular
It's typo mistake, change
app.contoller(...)
to
app.controller(...)
and close properly:
app.controller("kontrolerTabeliSkoczkow" , ['$scope', function( $scope ) { ... }]);
see link jsfiddle
A parenthesis is missing just between the ]} and ; at the end of your controller
Furthermore, I do not recommand using this notation, just don't declare dependencies in your controller, I recommand doing it this way :
app.controller("kontrolerTabeliSkoczkow", function($scope){
/*anything you want to put in it*/
});
You don't get confused by parenthesis, brackets and stuff, just declare your dependencies in your module, not in your controller
i am using angualr nvD3 directory for bullet chart. i want to dispaly the data in the form of bullet chart in a table.
var app = angular.module('plunker', ['nvd3']);
app.controller('MainCtrl', ['$scope','$http', function ($scope, $http ) {
$scope.LoadInit = function () {
//alert('1');
$scope.jsondata = [{'transactionName': '1',
'actualVolume':'150',
'expectedVolume':'300'
},
{
'transactionName': '2',
'actualVolume':'250',
'expectedVolume':'300'
}
]
$scope.transactionData= $scope.jsondata;
.finally(function(){
$scope.data1 = {
//"title": "Revenue",
//"subtitle": "US$, in thousands",
"ranges": [0,100,1300],
"measures": [record.actualVolume],
"markers": [record.expectedVolume]
};
});
$scope.options1 = {
chart: {
type: 'bulletChart',
transitionDuration: 1
}
};
};
$scope.LoadInit();
}]);
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>Angular-nvD3 Bullet Chart</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.css"/>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.js"></script>
<script src="https://rawgit.com/krispo/angular-nvd3/v1.0.4/dist/angular-nvd3.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div class="panel-body" style="margin-top: 10px">
<table class="table text-center">
<thead>
<tr>
<th> tname</th>
<th> volume</th>
<th>graph</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="record in transactionData">
<td>{{record.transactionName}}</td>
<td>{{record.actualVolume}}</td>
<td><nvd3 options="options1" data="data1"></nvd3></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
but i am not getting the data when i tried to use bullet chart, other wise i am getting data. when i am using http call for data rather than json object, following error is coming.click here for error page
Here is a simplified version of what I think you were trying to achieve. I don't quite get the .finally() function in your code, so what I do instead is map $scope.jsondata to $scope.transactionData, creating a chartData property within each item, so that when you ng-repeat over them, you can feed each of the nvd3 bullet charts its own data object.
I believe the errors you were getting were caused by the fact that you were trying to feed string values of actualVolume and expectedVolume to nvd3, so I fixed that by converting them to Number values instead:
chartData: {
ranges: [100, 150, Number(record.expectedVolume)*1.5],
measures: [Number(record.actualVolume)],
markers: [Number(record.expectedVolume)]
}
See the rest below... Hope this helps you.
var app = angular.module('plunker', ['nvd3']);
app.controller('MainCtrl', ['$scope', function ($scope) {
$scope.jsondata = [
{
'transactionName': '1',
'actualVolume':'150',
'expectedVolume':'300'
},
{
'transactionName': '2',
'actualVolume':'250',
'expectedVolume':'300'
}
];
$scope.transactionData = $scope.jsondata.map(function(record) {
return {
transactionName: record.transactionName,
actualVolume: record.actualVolume,
expectedVolume : record.expectedVolume,
chartData: {
ranges: [100, 150, Number(record.expectedVolume)*1.5],
measures: [Number(record.actualVolume)],
markers: [Number(record.expectedVolume)]
}
};
});
$scope.options1 = {
chart: {
type: 'bulletChart',
transitionDuration: 500
}
};
}]);
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>Angular-nvD3 Bullet Chart</title>
<link data-require="nvd3#1.8.1" data-semver="1.8.1" rel="stylesheet" href="https://cdn.rawgit.com/novus/nvd3/v1.8.1/build/nv.d3.css" />
<script data-require="angular.js#1.3.9" data-semver="1.3.9" src="https://code.angularjs.org/1.3.9/angular.js"></script>
<script data-require="d3#3.5.3" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script>
<script data-require="nvd3#1.8.1" data-semver="1.8.1" src="https://cdn.rawgit.com/novus/nvd3/v1.8.1/build/nv.d3.js"></script>
<script src="https://rawgit.com/krispo/angular-nvd3/v1.0.4/dist/angular-nvd3.js"></script>
</head>
<body ng-controller="MainCtrl">
<div class="panel-body" style="margin-top: 10px">
<table class="table text-center">
<thead>
<tr>
<th> tname</th>
<th> volume</th>
<th>graph</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="record in transactionData">
<td>{{record.transactionName}}</td>
<td>{{record.actualVolume}}</td>
<td class="table-cell-chart">
<nvd3 options="options1" data="record.chartData"></nvd3>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
In my angularjs application have an array of objects as shown below :
$scope.rowData = [{
"expNum": "678",
"itemHr": "10",
"highRe": "C"
}, {
"expNum": "978",
"itemHr": "3",
"highRe": "Y"
}]
Now on a click event I need to update 'itemHr' of each object in the array to some new value let say (25). I don't want to create new Array of object rather modify the existing only. If we can use angularjs utilities to do it or underscore library, both are fine for me. can any one help me with that.
Why not vanila js with for loop?
for(var i = 0; i<$scope.rowData.length; i++)
{
$scope.rowData[i].itemHr = 25;
}
or underscore
_.each($scope.rowData, function(item){ item.itemHr = 25;});
or angular
angular.forEach($scope.rowData,function(item){ item.itemHr = 25; });
var app = angular.module("myApp", ['ui.bootstrap']);
app.controller("maincontroller", function($scope) {
$scope.rowData = [{
"expNum": "678",
"itemHr": "10",
"highRe": "C"
}, {
"expNum": "978",
"itemHr": "3",
"highRe": "Y"
}];
$scope.update = function(){
for(var i = 0; i<$scope.rowData.length; i++)
{
$scope.rowData[i].itemHr = 25;
}
}
});
<!doctype html>
<html lang="en" ng-app="myApp" ng-controller="maincontroller">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.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="script.js"></script>
<script data-require="angular-bootstrap#0.12.0" data-semver="0.12.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.min.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div>
<table class="table table-hover table-bordered" >
<tbody >
<tr ng-repeat="row in rowData">
<td>
{{row.expNum}}
</td>
<td>
{{row.itemHr}}
</td>
<td>
{{row.highRe}}
</td>
</tr>
</tbody>
</table>
</div>
<input type="button" class="btn btn-danger" ng-click="update()" value="Update ItemHr to 25">
</body>
</html>
angular.forEach($scope.rowData, function(item,index){
item["itemHr"] = "25";
})
I have been trying to use Angular-ui-sortable to reorder the rows in an Angular-datatables. Reorder is not happening. However, if i try with normal table, it is working fine. If possible please help me out (any input or direction).
With normal table it is working - //jsfiddle.net/pmspraju/La4vqb8b/
With angular-datatable it is NOT - http://jsfiddle.net/pmspraju/4o9fzwqz/
Plunker - http://plnkr.co/edit/XVnaNLuMWQTnYlrGwHdF?p=preview
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.1/css/jquery.dataTables.css" />
</head>
<body ng-app="datatablesSampleApp">
<div ng:controller="controller">
<label>list: {{list1}}</label>
<table datatable="ng" dt-options="dtOptions" dt-column-defs="dtColumnDefs" style="width:auto;" class="table table-bordered">
<thead>
<tr>
<th>Index</th>
<th>id</th>
<th>Value</th>
</tr>
</thead>
<tbody ui:sortable ng-model="list">
<tr ng-repeat="lang in list1" class="item" style="cursor: move;">
<td>{{$index}}</td>
<td>{{lang.id}}</td>
<td>{{lang.value}}</td>
</tr>
</tbody>
</table>
<hr>
</div>
<script data-require="jquery#1.10.1" data-semver="1.10.1" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="//cdn.datatables.net/1.10.1/js/jquery.dataTables.js"></script>
<script type="text/javascript" data-require="angular.js#1.2.15" data-semver="1.2.15" src="http://code.angularjs.org/1.2.15/angular.js"></script>
<script type="text/javascript" src="https://rawgithub.com/l-lin/angular-datatables/dev/dist/angular-datatables.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.min.js"></script>
<script src="script.js"></script>
</body>
</html>
JavaScript:
(function(angular) {
'use strict';
angular.module('datatablesSampleApp', ['datatables','ui']).
controller('controller', function($scope, DTOptionsBuilder, DTColumnDefBuilder, DTColumnBuilder) {
$scope.dtOptions = DTOptionsBuilder.newOptions()
.withPaginationType('full_numbers')
.withDisplayLength(2)
.withOption('order', [1, 'desc']);
$scope.dtColumnDefs = [
DTColumnDefBuilder.newColumnDef(0).notSortable(),
DTColumnDefBuilder.newColumnDef(1).notSortable(),
DTColumnDefBuilder.newColumnDef(2).notSortable()
];
$scope.list1 = [{
"id": "1",
"value": "angular"
}, {
"id": "2",
"value": "meteor"
}];
});
})(angular);
Thanks in advance for your inputs.
Haven't tried it yet but give it a call.
$scope.dtOptions = DTOptionsBuilder.newOptions()
.withPaginationType('full_numbers')
.withDisplayLength(2)
.withOption('order', [1, 'desc'])
.withOption('rowReordering', true); // Try to add this in your options
You need to add JQuery UI script in your HTML.
Try adding:
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
Below this line of code:
<script data-require="jquery#1.10.1" data-semver="1.10.1" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
Ok, there're many similar questions, i went through some and get me more confused, btw i started learning angular 1 about 2 weeks ago.
in browser, /mypath/status.html works fine, it sends "testJson" to node server, then
displays data to the webpage
now i have /mypath/index2.html, which ng-include status.html, it won't
trigger "testJson" in the server code
status.html
<!DOCTYPE html>
<html ng-app="HelloModule">
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
</head>
<body ng-controller="HelloCtrl">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/
angular.js"></script>
<script src="statusApp.js"></script>
<table>
<tr>
<th>Code</th>
<th>Country</th>
<th>Population</th>
</tr>
<tr ng-repeat="country in countries | orderBy: 'code' ">
<th>{{country.code}}</th>
<th>{{country.name}}</th>
<th>{{country.population}}</th>
</tr>
</table>
</body>
</html>
statusApp.js
var app = angular.module('HelloModule', []);
app.controller('HelloCtrl', function($scope, HelloService) {
//$scope.countries = [{code : "US", name : "United States", population : "11223344"}];
HelloService.getJson().then(function(result) {
$scope.countries = result;
}, function(error) {
alert("Error");
} );
});
app.factory('HelloService', function($http, $q) {
return {
getJson: function() {
var deferred = $q.defer();
var browserProtocol = 'http';
var port = ':1234';
var address = 'localhost';
var server = browserProtocol + '://' + address;
var url = server + port + '/testJson';
//$http.get('http://localhost:7778/testJson').success(function(data) {
$http.get(url).success(function(data) {
deferred.resolve(data);
}).error(function(){
deferred.reject();
});
return deferred.promise;
}
}
});
index2.html which is not working,
i don't see this line
console.log("returning Json data");
triggered in the server
<!DOCTYPE html>
<html ng-app>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.
min.js"></script>
<div class="container">
<div ng-include="" src="'status.html'"></div>
</div>
</body>
</html>
server side
app.get('/testJson', function(req, res)
{
console.log("returning Json data");
res.json( [{code : "US", name : "United States", population : "11223344"
}] );
});
The status.html that you want to include is :
<table ng-controller="HelloCtrl" >
<tr>
<th>Code</th>
<th>Country</th>
<th>Population</th>
</tr>
<tr ng-repeat="country in countries | orderBy: 'code' ">
<th>{{country.code}}</th>
<th>{{country.name}}</th>
<th>{{country.population}}</th>
</tr>
</table>
Right ?
EDIT
And ng-include works like this :
<div class="container">
<div ng-include="'status.html'" ></div>
</div>