Get values from JSON without key in the table - angularjs

I am trying to get the data from a json without keys in to a table.
[
[
"valu10", //row1 col1
"valu11", //row1 col2
"valu12",
"valu13"
],
[
"valu20",
"valu21",
"valu22",
"valu23"
],
[
"valu30",
"valu31",
"valu32",
"valu33"
]
]
In my success block I was getting the data in alert box. How can I get these data in the angular table. I tried doing the following,
........
}).success(function(data, status, headers, config) {
var log = [];
var data1 = angular.fromJson(eval(data));
var rowList = data1;
$scope.rows = rowList;
}).error(function(data, status, headers, config) {
alert("error");
});
in html:
<table class="table table-striped">
<thead>
<tr>
<th ng-repeat="header in headers">{{header}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in rows">
{{item}}
</tr>
</tbody>
</table>

I've created a JSFiddle for you, hope that it will help you:
https://jsfiddle.net/oronbdd/h4sor3w4/1/
Angualr controller:
var app = angular.module('plunker', []);
app.factory('myService', function($http) {
return {
async: function() {
return $http.get('https://api.myjson.com/bins/368hv');
}
};
});
app.controller('MainCtrl', function( myService,$scope) {
$scope.data = "oron";
myService.async().then(function(d) {
$scope.data = d.data;
});
});
HTML:
<div ng-app="plunker">
<div ng-controller="MainCtrl">
JSON:{{data}}<br>
<br/>
ANSWER:
<table class="table table-striped">
<thead>
<tr>
<th ng-repeat="x in data">{{$index}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="array in data">
<td ng-repeat="item in array">
{{item}}
</td>
</tr>
</tbody>
</table>
</div>

Related

Not able to sort using Smart Table in angularJS

I am using smart table but I am not able to sort the table, the following is my code
<div ng-app="app">
<div ng-controller="app-controller">
<table st-table="EmployeeDetails" class="table table-striped table-hover" st-safe-src="EmployeeData">
<thead>
<tr>
<th st-sort="EmployeeName">Employee Name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="employee in EmployeeData">
<td class="col-xs-2">
<small>{{employee.EmployeeName}}</small>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<script type="text/javascript">
var app = angular.module('app', []);
app.controller('app-controller', ['$scope','$http', function ($scope,$http) {
$http.get('/Data/EmployeeDetails.json').success(function (data) {
$scope.EmployeeData = data;
}).error(function () {
alert('error');
});
}]);
</script>
can anyone let me know what exactly is wrong, i have referenced both angular.js and smart-table.js
<script src="../Scripts/angular.js"></script>
<script src="../Scripts/smart-table.js"></script>
You should use 'EmployeeDetails' at ng-repeat
JSFiddle
OK
<tr ng-repeat="employee in EmployeeDetails">
NG
<tr ng-repeat="employee in EmployeeData">
Thanks

How to prevent destroy data from DataTable with Angular

I'm try to implement DataTables with Angular, I'm googled and some many solutions is creating directives, its ok but is very old only "normal" way draw a DataTable, the problem is sorting or typing into search box my data is lost!! E.g:
And my code:
View
var myApp = angular.module('myApp', ['ngRoute','ui.utils']);
myApp.controller("CompanyController", function ($scope, $window, CompanyService) {
$scope.Companies = [];
$scope.Company = {};
$scope.dataTableOpt = {
//custom datatable options
"aLengthMenu": [[10, 50, 100, -1], [10, 50, 100, 'All']],
};
$scope.$watch("data", function (value) {
console.log("Data changed, refresh table:");
var val = value || null;
if (val) {
}
});
$scope.InitializeIndexView = function () {
var getAllProcess = CompanyService.GetAllCompanies();
getAllProcess.then(function (response) {
//console.log(response.data)
$scope.Companies = response.data;
},
function (response) {
console.log(response);
})
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<table id="company-table" class="table table-striped table-bordered" ui-jq="DataTable" ui-options="dataTableOpt">
<thead>
<tr>
<th>Id</th>
<th>Register time</th>
<th>Short Name</th>
<th>Long Name</th>
<th>Status</th>
<th>Owner Client</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in Companies">
<td>{{item._id}}</td>
<td>{{item.RegisterTime}}</td>
<td>{{item.LongName}}</td>
<td>{{item.ShortName}}</td>
<td>{{item.CompanyStatus}}</td>
<td>{{item.OwnerClient}}</td>
<td>Edit | Delete</td>
</tr>
</tbody>
</table>
Edit 1:
I follow these snippet and works fine because data is static: http://codepen.io/kalaiselvan/pen/RRBzda
Angular Js
var app = angular.module('myApp', ['datatables']);
app.controller("myCtrl", function ($scope, $http, DTOptionsBuilder, DTColumnBuilder) {
$scope.isDisabledupdate = true;
$scope.GetAllData = function () {
$http({
method: "get",
url: "http://localhost:8200/Employee/Get_AllEmployee"
}).then(function (response) {
$scope.employees = response.data;
}, function () {
alert("Error Occur");
})
};
$scope.vm = {};
$scope.vm.dtOptions = DTOptionsBuilder.newOptions()
.withOption('order', [0, 'asc']);
View Page
<div class="panel-body" ng-init="GetAllData()">
<div class="table-responsive">
<table class="table table-striped table-bordered" datatable="ng" dt-options="vm.dtOptions">
<thead>
<tr>
<th>S.no</th>
<th>
ID
</th>
<th>
City Name
</th>
<th>
Actions
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="Emp in employees">
<td>{{$index+1}}</td>
<td>
{{Emp.CId}}
</td>
<td>
{{Emp.CityName}}
</td>
<td>
<button type="button" class="btn btn-default btn" ng-click="getCustomer(Emp)"><i class="glyphicon glyphicon-pencil"></i></button>
<button type="button" class="btn btn-default btn" ng-click="deleteemp(Emp)"><i class="glyphicon glyphicon-trash"></i></button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<script src="~/Scripts/jquery-1.12.4.min.js"></script>
<script src="~/Scripts/jquery-ui.js"></script>
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/angular-datatables.min.js"></script>
<script src="~/Scripts/jquery.dataTables.min.js"></script>
<script src='https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js'></script>
I hope this code will help you....

how to create sub rows in angularjs?

I created a table using angular. Some rows in the table have child rows with the same properties as parent. I want to create the child rows whenever the user clicks on the parent row (parent rows would have a carrot sign that specifies there are some child rows). I am really new to angular and I need to see an example so that I can understand how it happens in angular. can anybody help?
here is my html:
<div data-ng-app="myModule">
<div data-ng-controller="myController">
<table>
<thead>
<tr>
<th></th>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="student in students">
<th>
<span data-ng-show="{{student.hasChildren}}">
<image data-ng-click="getChildren(student)" data-ng-src="image"></image>
</span>
</th>
<th>{{student.firstName}}</th>
<th>{{student.lastName}}</th>
</tr>
<tr data-ng-repeat="child in children">
<th></th>
<th>{{child.firstName}}</th>
<th>{{child.lastName}}</th>
</tr>
</tbody>
</table>
</div>
</div>
the "hasChildren" cell would have a carrot sign which will collapse and expand the children rows.
here is the js file:
var app = angular
.module("myModule", [])
.controller("myController", function ($scope, $http) {
$http({
method: 'GET',
url: contextPath + '/students'
})
.then(function (response) {
var students = response.data;
$scope.students = students;
});
$scope.getChildren = function(student){
var parentStudentId = student.id;
$http({
method: 'GET',
url: contextPath + '/students/children?studentId=' + parentStudentId
})
.then(function (response) {
var children = response.data;
$scope.children = children;
});
}
})
Take a look on that approach
<table>
<tbody ng-repeat="parent in parents">
<tr>
<td>
Parent ...
</td>
</tr>
<tr ng-show="SomeCarrotCondition(parent)" ng-repeat="child in parent.children">
<td>
Child...
</td>
</tr>
</tbody>
</table>
Code sample:
$scope.getChildren = function(student) {
studen.expanded = !student.expanded; // expand/collapse items
if (student.children) { // request a server only once to get the children
return;
}
var parentStudentId = student.id;
$http({
method: 'GET',
url: contextPath + '/students/children?studentId=' + parentStudentId
})
.then(function (response) {
student.children = response.data; // fill student children collection
});
}
HTML sample:
<div data-ng-app="myModule">
<div data-ng-controller="myController">
<table>
<thead>
<tr>
<th></th>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody data-ng-repeat="student in students">
<tr>
<th>
<span data-ng-show="{{student.hasChildren}}">
<image data-ng-click="getChildren(student)" data-ng-src="image"></image>
</span>
</th>
<th>{{student.firstName}}</th>
<th>{{student.lastName}}</th>
</tr>
<tr data-ng-repeat="child in student.children"
ng-show="student.expanded">
<th></th>
<th>{{child.firstName}}</th>
<th>{{child.lastName}}</th>
</tr>
</tbody>
</table>
</div>
</div>

ng-repeat add data to table rows

My aim is to get the table to display data like the one below. I manage to display the years on top and first vertical column(company) down but how do I get yield data for each company and display it in each row? ps. I am very new to angular.
<table>
<thead>
<tr><th></th><th>2015</th><th>2016</th><th>2017</th><th>2018</th><th>2019</th></tr>
</thead>
<tbody>
<tr><td>ABC</td><td>2.03</td><td>2.22</td><td>2.44</td><td>2.57</td><td>2.69</td></tr>
<tr><td>DEF</td><td>1.08</td><td>1.14</td><td>1.19</td><td>1.25</td><td>1.32</td></tr>
</tbody>
</table>
JSON
{
"years":[
2015,
2016,
2017,
2018,
2019
],
"yields":[
{
"company":"ABC",
"yield":{
"2015":2.03000,
"2016":2.22000,
"2017":2.44000,
"2018":2.57000,
"2019":2.69000
}
},
{
"company":"DEF",
"yield":{
"2015":1.08000,
"2016":1.14000,
"2017":1.19000,
"2018":1.25000,
"2019":1.32000
}
}
]
}
HTML
<table data-ng-controller="dividendController as divd">
<thead>
<tr>
<th></th>
<th data-ng-repeat="y in year">{{y}}</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="c in yields">
<td>{{c.company}}</td>
<td data-ng-repeat="n in divYield">{{n}}</td>
</tr>
</tbody>
</table>
CONTROLLER
(function (angular) {
'use strict';
angular.module('example', [])
.controller('dividendController', function ($scope, $http) {
$http.get("api/myapi/myexample")
.success(function (response) {
$scope.year = response.years;
$scope.yields = response.yields;
$scope.divYieldList = [];
$scope.company = [];
angular.forEach(response.yields, function (obj, index) {
$scope.company.push(obj.company);
$scope.divYield = [];
angular.forEach(obj.yield, function (yld, index) {
$scope.divYield.push(yld);
});
$scope.divYieldList.push($scope.divYield);
});
});
});
})(window.angular);
<div ng-init='TesData={"years":[2015,2016,2017,2018,2019],"yields": [{"company":"abc","yield":{"2015":2.03000,"2016":2.22000,"2017":2.44000,"2018":2.57000,"2019":2.69000} },{"company":"def","yield":{"2015":1.08000,"2016":1.14000,"2017":1.19000,"2018":1.25000,"2019":1.32000}}]};'>
<table>
<thead>
<tr>
<th></th>
<th data-ng-repeat="y in TesData.years">{{y}}</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="c in TesData.yields">
<td>{{c.company}}</td>
<td data-ng-repeat="n in c.yield">{{n}}</td>
</tr>
</tbody>
</table>
</div>

Ng-Click NOT working (Angular Datatables)

I have a problem with my angular datatables .
First, My code work very good, but after i add the code configure notSortable() for some colum , the ng-click of button is not working , and i can't fix it . Could you help me?
Here are my Code :
1> File index.html
<table datatable="ng" dt-options="dtOptions" dt-columns="dtColumns">
<thead>
<tr>
<th>ID</th>
<th>FirstName</th>
<th>LastName</th>
<th>Button</th>
</tr>
</thead>
<tbody>
<tr dt-rows ng-repeat="person in persons">
<td ng-bind="person.id"></td>
<td ng-bind="person.firstName"></td>
<td ng-bind="person.lastName"></td>
<td>
<input type="button" ng-click="doClick()">
</td>
</tr>
</tbody>
</table>
2>File app.js
(function(angular) {
'use strict';
angular.module('datatablesSampleApp', ['datatables']).
controller('simpleCtrl', function($scope, $http, DTOptionsBuilder, DTColumnBuilder) {
$scope.persons = [];
$http.get('data.json').success(function(persons) {
$scope.persons = persons;
});
$scope.doClick=function(){
alert("Clicked button !")
}
$scope.dtOptions = DTOptionsBuilder.newOptions().withPaginationType('full_numbers').withDisplayLength(40);
$scope.dtColumns = [
DTColumnBuilder.newColumn('id').withTitle('ID').notSortable(),
DTColumnBuilder.newColumn('firstName').withTitle('First name'),
DTColumnBuilder.newColumn('lastName').withTitle('Last name'),
DTColumnBuilder.newColumn('Button').withTitle('Button')
];
});
})(angular);
Don't use
<input type="button" ng-click="doClick()">
In stead of that try to use:
<button type="button" ng-click="doClick()">Send</button>
Be sure to specify the controller in your index.html with ng-controller='simpleCtrl'
I had the same issue, below is the solution that worked for me
**1. Step 1 is same , repeating for the sake of completeness**
<table datatable="ng" dt-options="dtOptions" dt-columns="dtColumns">
<thead>
<tr>
<th>ID</th>
<th>FirstName</th>
<th>LastName</th>
<th>Button</th>
</tr>
</thead>
<tbody>
<tr dt-rows ng-repeat="person in persons">
<td ng-bind="person.id"></td>
<td ng-bind="person.firstName"></td>
<td ng-bind="person.lastName"></td>
<td>
<input type="button" ng-click="doClick()">
</td>
</tr>
</tbody>
</table>
**Step2, In Controller, do the following**
(function(angular) {
'use strict';
angular.module('datatablesSampleApp', ['datatables']).
controller('simpleCtrl', function($scope, $http, DTOptionsBuilder, DTColumnBuilder) {
$scope.persons = []
$scope.init = function() {
$scope.dtOptions = DTOptionsBuilder.newOptions()
.withOption('aLengthMenu', [[-1], ['All']]) // Length of how many to show per pagination.
.withPaginationType('full_numbers')
.withBootstrap();
$http.get("data.json").then( function(result){
$scope.persons = result.data
});
}
$scope.init()
});
})(angular);

Resources