Develop Reference

Dynamic data table in angular js

I want to create a dynamic data table in angular js which has first column with check box. The data would be in Json format as below,
$scope.items = [
{ "id": "1", "lastName": "Test1", "firstName": "Test", "email": "test1#example.com" },
{ "id": "2", "lastName": "Test2", "firstName": "Test", "email": "test2#example.com" },
{ "id": "3", "lastName": "Test3", "firstName": "Test", "email": "test3#example.com" },
{ "id": "4", "lastName": "Test4", "firstName": "Test", "email": "test4#example.com" },
{ "id": "5", "lastName": "Test5", "firstName": "Test", "email": "test5#example.com" }
];
The id would be a column with checkbox and all other columns will have the data in it.
The headers of the table are also dynamic and so does the column.

If the columns are dynamic
<table style="width:100%">
<tr ng-repeat="item in items | limitTo:1">
<th ng-repeat="(key,value) in item">{{key}}</th>
<td ng-repeat="(key,value) in item">
<div ng-show="key == 'id'">
<input type="checkbox" value={{value}} name="id" />
</div>
<div ng-show="key != 'id'">
{{value}}
</div>
</td>
</tr>
</table>
ng-repeat does JSON ordering for keys, To get ID first follow skipping the JSON ordering Skip JSON ordering (because your JSON has ID first after skipping JSON ordering you will get ID first)

How to remove or hide a key-value pair of an array in AngularJS

I have a collection of objects in an array like this:
[
{
"NAME": "John Doe",
"AGE": 25,
"CITY": "New York",
"COUNTRY": "USA",
"GROUP_ID": 1,
"ACTIVE": 1
},
{
"NAME": "Peter Parker",
"AGE": 44,
"CITY": "Los Angeles",
"COUNTRY": "USA",
"GROUP_ID": 2,
"ACTIVE": 1
},...
]
In my view I only want to display Name, Age, City and Country. Well, my question is how can I remove GROUP_ID and ACTIVE in every object of my collection? I was looking for a solution and found .slice() but I don't know exactly whether is it the right one and how to use this javascript function for each object in an array.
EDIT:
For more clarification. My view is defined like below:
<md-list-item ng-repeat="cItems in ::contentItems track by $index">
<span ng-repeat="(key, value) in cItems track by $index" flex="auto">
{{ ::value }}
</span>
<md-divider></md-divider>
</md-list-item>

You can use the following lines:
contentItems.forEach(function (entry) {
delete entry['GROUP_ID'];
delete entry['ACTIVE'];
});

As mentioned in comments there is no need to delete the keys. You can simple avoid displaying them.
Still if deleting is objective then use delete method
a.forEach(function(item){
delete(item['GROUP_ID']);
delete(item['ACTIVE'])
});
DEMO

Assuming your array is a variable named array:
for ( var i=0,l=array.length; i<l; i++ ) {
delete array[i]['GROUP_ID'];
delete array[i]['ACTIVE'];
}
if you're using ES6 you could also do:
for ( let item of array ) {
delete item['GROUP_ID'];
delete item['ACTIVE'];
}

You can simply remove properties of an object by using delete. I've added an array of properties to delete but you could delete them directly.
var data = [
{
"NAME": "John Doe",
"AGE": 25,
"CITY": "New York",
"COUNTRY": "USA",
"GROUP_ID": 1,
"ACTIVE": 1
},
{
"NAME": "Peter Parker",
"AGE": 44,
"CITY": "Los Angeles",
"COUNTRY": "USA",
"GROUP_ID": 2,
"ACTIVE": 1
}
];
var propertiesRemove = ['GROUP_ID', 'ACTIVE']
data.forEach(function(item){
propertiesRemove.forEach(function(prop){
delete item[prop];
});
});
console.log(data);
If you don't want to change your data and it's just a display issue you could render only the properties you want.
<md-list-item ng-repeat="cItems in ::contentItems track by $index">
<span flex="auto">{{cItems.NAME}}</span>
<span flex="auto">{{cItems.AGE}}</span>
<span flex="auto">{{cItems.CITY}}</span>
<span flex="auto">{{cItems.COUNTRY}}</span>
<md-divider></md-divider>
</md-list-item>

Actually to display required information in angular we don't need to remove other elements from array in template we can go with limited information.
ANGULAR CODE
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.records = [
{
"NAME": "John Doe",
"AGE": 25,
"CITY": "New York",
"COUNTRY": "USA",
"GROUP_ID": 1,
"ACTIVE": 1
},
{
"NAME": "Peter Parker",
"AGE": 44,
"CITY": "Los Angeles",
"COUNTRY": "USA",
"GROUP_ID": 2,
"ACTIVE": 1
}
]
});
Angular Template
<body ng-app="myApp" ng-controller="myCtrl">
<ul ng-repeat="record in records">
<li>{{record.NAME}}</li>
<li>{{record.AGE}}</li>
<li>{{record.COUNTRY}}</li>
</ul>
But as you are asking following procedure will answer your question.
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$data = [
{
"NAME": "John Doe",
"AGE": 25,
"CITY": "New York",
"COUNTRY": "USA",
"GROUP_ID": 1,
"ACTIVE": 1
},
{
"NAME": "Peter Parker",
"AGE": 44,
"CITY": "Los Angeles",
"COUNTRY": "USA",
"GROUP_ID": 2,
"ACTIVE": 1
}
];
$scope.records = $data.map(function(item){
delete(item['GROUP_ID']);
delete(item['ACTIVE']);
return item;
});
});

Angular JS: How to use ng-repeat for complex objet

I have a complex object coming from the web service as shown below, how to display PatientId and description, if anyone have any good idea, please help me thru it.:
$scope.myData = {"PatientSearchResponse": {
"pageNumber": 1,
"pageSize": 50,
"patDataBean": [
{
"gender": {
"code": "male",
"description": "Male",
"type": "gender"
},
"patDateofBirth": "1997/06/19",
"patFirstName": "aman",
"patLastName": "elvis",
"patSurvivalStat": {
"code": "A",
"description": "Alive",
"type": "patient_status"
},
"patientIdentifier": {
"OID": "589a9cf6-4513-49e1-bd5c-c7363849ed93",
"organizationId": {
"PK": 54,
"siteName": "CTRP"
},
"patientId": "1"
}
},
{
"gender": {
"code": "male",
"description": "Male",
"type": "gender"
},
"patDateofBirth": "2001/07/18",
"patFirstName": "Elvis",
"patLastName": "Harvey",
"patSurvivalStat": {
"code": "dead",
"description": "Dead",
"type": "patient_status"
},
"patientIdentifier": {
"OID": "151d0222-3726-40ee-8f69-0a6800727607",
"organizationId": {
"OID": "83d09227-9c65-4d7b-94da-baaf5c07b38a",
"siteName": "Texas"
},
"patientId": "100"
}
}]}}
In my HTML I am using ng-repeat as:
<td ng-repeat="(key, value) in grid.columns">
<div>
<p >{{row[key]}}</p>
</div>
</td>
my JS file as:
myDataContainer = $scope.myData.PatientSearchResponse.patDataBean;
$scope.grid.columns = {patientIdentifier: "Patient Id",patFirstName: "First Name",patLastName: "Last Name",patDateofBirth: "Date of Birth",patSurvivalStat: "Description"};
angular.forEach(myDataContainer, function (values, index) {
$scope.grid.rows.push(values);
});

Why you can just do this :
<td ng-repeat="pat in myData.PatientSearchResponse.patDataBean">
{{pat.patientIdentifier}} - {{pat.patSurvivalStat.description}}
</td>

Try this man:
angular.module('app', [])
.controller('Controller', ['$scope', function($scope) {
$scope.myData = {"PatientSearchResponse": {
"pageNumber": 1,
"pageSize": 50,
"patDataBean": [
{
"gender": {
"code": "male",
"description": "Male",
"type": "gender"
},
"patDateofBirth": "1997/06/19",
"patFirstName": "aman",
"patLastName": "elvis",
"patSurvivalStat": {
"code": "A",
"description": "Alive",
"type": "patient_status"
},
"patientIdentifier": {
"OID": "589a9cf6-4513-49e1-bd5c-c7363849ed93",
"organizationId": {
"PK": 54,
"siteName": "CTRP"
},
"patientId": "1"
}
},
{
"gender": {
"code": "male",
"description": "Male",
"type": "gender"
},
"patDateofBirth": "2001/07/18",
"patFirstName": "Elvis",
"patLastName": "Harvey",
"patSurvivalStat": {
"code": "dead",
"description": "Dead",
"type": "patient_status"
},
"patientIdentifier": {
"OID": "151d0222-3726-40ee-8f69-0a6800727607",
"organizationId": {
"OID": "83d09227-9c65-4d7b-94da-baaf5c07b38a",
"siteName": "Texas"
},
"patientId": "100"
}
}]}}
}]);
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-controller="Controller">
<table>
<tr>
<th>Id</th>
<th>Description</th>
</tr>
<tr ng-repeat="m in myData.PatientSearchResponse.patDataBean">
<td>{{m.patientIdentifier.patientId}}</td>
<td>{{m.patSurvivalStat.description}}</td>
</tr>
</table>
</body>
</html>

Would be more practical to make columns an array of objects with standardized keys
$scope.grid.columns = [
{property : 'patientIdentifier', heading : "Patient Id"},
{property : 'patFirstName', heading : "First Name"},
{property : 'patLastName', heading : "Last Name"},
{property : 'patDateofBirth', heading : "Date of Birth"},
{property : 'patSurvivalStat', heading : "Description"}
]
Then use those to set both headings and content
<table>
<thead>
<tr>
<th ng-repeat="col in grid.columns">{{::col.heading}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in myData.patDataBean">
<td ng-repeat="col in grid.columns">{{::item[col.property]}}</td>
</tr>
</tbody>
</table>

Unable to Create table through json object using Angularjs

Click here to see For Converted Json Object
Please Read My question very clear
Hi in my code below I am trying to convert xml Data to Json Object. using converted Json Object i am trying to create a table using angularjs.
so here the problem is i am able to bind complete converted json object {{employeeList}} but failed to load individual atttribute of json object i.e.,{{employee.EmpId}}. finally from my observation i found when the converted json object is directly asigned to
$scope.Employees="Employee": [ {"EmpId": "4", "Name": "Chris", "Sex": "Male", "Phone": [ { "_Type": "Home", "__text": "564-555-0122" }, { "_Type": "Work", "__text": "442-555-0154" } ], "Address": { "Street": "124 Kutbay", "City": "Montara", "State": "CA", "Zip": "94037", "Country": "USA" } } ] }
the output is what I expected, but when I assign the direct result
i.e,$scope.Employees=response.data;It is not working what might be the issue.here the response.data is nothing but success function result we get here
<script>
var app = angular.module('httpApp', []);
app.controller('httpController', function ($scope, $http) {
$http.get("File1.xml",
{
transformResponse: function (cnv) {
var x2js = new X2JS();
var aftCnv = x2js.xml_str2json(cnv);
return aftCnv;
}
})
.then(function (response) {
$scope.Employees = response.data;
console.log($scope.Employees);
});
});
</script>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ng-app="httpApp">
<div ng-controller="httpController">
<div ng-repeat="employeeList in Employees">
{{employeeList}}
<table>
<tr ng-repeat="employee in Employees.Employee">
<td>{{employee.EmpId}}</td>
<td>{{employee.Name}}</td>
<td>{{employee.Phone._Type}}</td>
<td>{{employee.Phone.__text}}</td>
<td>{{employee.Address.Street}}</td>
<td>{{employee.Address.State}}</td>
<td>{{employee.Phone.Zip}}</td>
<td>{{employee.Phone._text}}</td>
<td>{{employee.Address.Country}}</td>
</tr>
</table>
</div>
</div>
Click here..For Converted Json Object

Here is a simple example based on the json provided:
HTML
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="myApp">
<head runat="server">
<title></title>
</head>
<body ng-controller="myController">
<div>
<table>
<thead>
<tr>
<th>EmpId</th>
<th>Name</th>
<th>Sex</th>
<th>Phone</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="employee in json.Employee">
<td>{{employee.EmpId}}</td>
<td>{{employee.Name}}</td>
<td>{{employee.Sex}}</td>
<td>{{employee.Phone[0].__text}}</td>
<td>{{employee.Address.Street}}</td>
</tr>
</tbody>
</table>
</div>
<script src="scripts/angular.js"></script>
<script src="scripts/app.js"></script>
</body>
</html>
JavaScript
(function () {
angular.module('myApp', [])
.controller('myController', function ($scope) {
$scope.json = { "Employee": [{ "EmpId": "4", "Name": "Chris", "Sex": "Male", "Phone": [{ "_Type": "Home", "__text": "564-555-0122" }, { "_Type": "Work", "__text": "442-555-0154" }], "Address": { "Street": "124 Kutbay", "City": "Montara", "State": "CA", "Zip": "94037", "Country": "USA" } }] };
})
}());

You should change your code to this.
<div ng-app><div ng-controller="httpController">
<div>
<table>
<tr ng-repeat="employee in Employees.Employee">
<td>{{employee.EmpId}}</td>
<td>{{employee.Name}}</td>
<td>{{employee.Phone._Type}}</td>
<td>{{employee.Phone.__text}}</td>
<td>{{employee.Address.Street}}</td>
<td>{{employee.Address.State}}</td>
<td>{{employee.Phone.Zip}}</td>
<td>{{employee.Phone._text}}</td>
<td>{{employee.Address.Country}}</td>
</tr>
</table>
</div>

There is another issue in your code. The response data resides in response.data, so besides your JSON being valid or not, you should use the following assignment:
$scope.Employees = response.data

Extra comment after my previous answer about response.data, because I don't see the right answer about your JSON object here yet, full answer:
ng-repeat expects a list of items, which you don't provide. Remove the encapsulating 'Employee' part from your JSON, like this:
$scope.Employees = [
{"EmpId": "4", "Name": "Chris", "Sex": "Male", "Phone": [ { "_Type": "Home", "__text": "564-555-0122" }, { "_Type": "Work", "__text": "442-555-0154" } ], "Address": { "Street": "124 Kutbay", "City": "Montara", "State": "CA", "Zip": "94037", "Country": "USA" } },
{"EmpId": "5", "Name": "Chris", "Sex": "Male", "Phone": [ { "_Type": "Home", "__text": "564-555-0122" }, { "_Type": "Work", "__text": "442-555-0154" } ], "Address": { "Street": "124 Kutbay", "City": "Montara", "State": "CA", "Zip": "94037", "Country": "USA" } }
]
(I've added an extra Employee with ID 5 here, but it will work with only one employee as well, as long it's a list, objects ({}) in a list ([]).
With this JSON object you can do the following:
<tr ng-repeat="employee in Employees">
<td>{{ employee.EmpId }}</td>
<td>{{ employee.Name }}</td>
<td>etc ...</td>
</tr>
Make sure your JSON is set up like this, encapsulating comma separated objects within a list.
Return this JSON format from your get request, and don't forget to fetch the data from response.data instead of response.

JSON parsing and displaying in different tables using Angular JS

I'm new to Angular JS here.
can any one please help me how to parse and display the Json Data in different tables using Angular JS
[
{
"id": 0,
"isActive": false,
"balance": 1025.00,
"picture": "http://www.placekitten.com/50/50",
"age": 25,
"name": "Daisy Mcneil",
"gender": "female",
"company": "Verbus",
"email": "daisymcneil#verbus.com",
"phone": "+1 (936) 586-3983",
"address": "849 Newkirk Placez, Laurelton, Nevada, 1086",
"registered": "2012-07-15T13:46:25 +07:00",
"friends": [
{
"id": 0,
"name": "Debra Blair"
},
{
"id": 1,
"name": "Henry Avila"
},
{
"id": 2,
"name": "Jody Stark"
}
],
"service": "cherry"
},
{
"id": 1,
"isActive": true,
"balance": -2884.00,
"picture": "http://www.placekitten.com/50/50",
"age": 23,
"name": "Schroeder Atkinson",
"gender": "male",
"company": "Twiggery",
"email": "schroederatkinson#twiggery.com",
"phone": "+1 (861) 449-2254",
"address": "259 Highland Avenue, Riner, Vermont, 905",
"registered": "1998-01-17T08:16:34 +08:00",
"friends": [
{
"id": 0,
"name": "Mendoza Figueroa"
},
{
"id": 1,
"name": "Lenore Morales"
},
{
"id": 2,
"name": "Winifred Bowen"
}
],
"service": "lemon"
}
]
I want to display each JSON object in the different table with a buttion which toggles the table in the html.
the above is the JSON data available...
thanks in advance.
The skeleton for the code is available here https://github.com/50Cubes/WebappTest

This is the code for index.html file -
<!doctype html>
<html>
<head>
<title>Page Title</title>
<script src="main.js"></script>
</head>
<body>
<div ng-app="MyApp">
<div ng-controller="ViewJson">
<table>
<th>
<td>id</td>
<td>isActive</td>
<td>balance</td>
<td>picture</td>
<td>age</td>
<td>name</td>
<td>gender</td>
<td>company</td>
<td>email</td>
<td>phone</td>
<td>address</td>
<td>registered</td>
<td>service</td></th>
<tr ng-repeat="post in posts">
<td>{{post.id}}</td>
<td>{{post.isActive}}</td>
<td>{{post.balance}}</td>
<td>{{post.picture}}</td>
<td>{{post.age}}</td>
<td>{{post.name}}</td>
<td>{{post.gender}}</td>
<td>{{post.company}}</td>
<td>{{post.email}}</td>
<td>{{post.phone}}</td>
<td>{{post.address}}</td>
<td>{{post.registered}}</td>
<td>{{post.service}}</td></tr></table>
</div>
</div>
</body>
</html>
This is the code for main.js file. Here I am assuming that the name of json file is posts.js -
var app=angular.module('MyApp',[]);
function ViewJson($scope, $http)
{$http({method: 'POST', url: 'js/posts.json'}).success(function(data)
{$scope.posts = data;});
}