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.
Related
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)
My original project had only one level of JSON data but it has grown and I need a second nested layer.
From what I researched it seemed that I could simply take the original object.name and append it with the new member level I needed to create like object.members.name. However this spits back an error undefined.
Clearly something is wrong or missing and I've been scratching my head for a while now.
I checked my JSON formatting a bunch of times and ran it through a validator (which checked out OK), no errors show up in the console and any search I make seems to bring up a much more complicated scenario then mine. I can't seem to narrow down what the problem is.
Any help or direction is much appreciated!
Here are the code blocks:
Non working multi level
Working single level
Non working multi level JSON data version
var obj =
{
"results": [
{
"members": [
{
"name": "John Smith",
"state": "NY",
"phone": "555-555-1111"
},
{
"name": "Mary Jones",
"state": "PA",
"phone": "555-555-2222"
},
{
"name": "Edward Edwards",
"state": "NY",
"phone": "555-555-3333"
},
{
"name": "Abby Abberson",
"state": "RI",
"phone": "555-555-4444"
}
]
}
]
};
$(obj.results).each(function(k,object){
var output = $("div.output");
output.append(object.members.name + " ");
output.append(object.members.phone + "<br />");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="output"></div>
Working single level JSON data version
var obj = {
"results": [
{
"name": "John Smith",
"state": "NY",
"phone": "555-555-1111"
},
{
"name": "Mary Jones",
"state": "PA",
"phone": "555-555-2222"
},
{
"name": "Edward Edwards",
"state": "NY",
"phone": "555-555-3333"
},
{
"name": "Abby Abberson",
"state": "RI",
"phone": "555-555-4444"
}
]
};
$(obj.results).each(function(k,object){
var output = $("div.output");
output.append(object.name + " ");
output.append(object.phone + "<br />");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="output"></div>
Nest your each statements?
var obj = {
"results": [{
"members": [{
"name": "John Smith",
"state": "NY",
"phone": "555-555-1111"
},
{
"name": "Mary Jones",
"state": "PA",
"phone": "555-555-2222"
},
{
"name": "Edward Edwards",
"state": "NY",
"phone": "555-555-3333"
},
{
"name": "Abby Abberson",
"state": "RI",
"phone": "555-555-4444"
}
]
}]
};
$(obj.results).each(function(k, result) {
var output = $("div.output");
$(result.members).each(function(index, member) {
output.append(member.name + " ");
output.append(member.phone + "<br />");
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="output">
</div>
Of course, I'd avoid using names like 'object' or 'obj' -- use result and member instead. Far more mnemonic. You'll know exactly what it refers to.
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;
});
});
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;});
}
DEMO
I have following array : -
var data = [{
"recordno": "001",
"firstname": "Brock",
"middlename": "Edward",
"lastname": "Lesnar",
"gender": "male",
"dateofbirth": "1980-01-01T20:20:19.198Z",
"dateofdeath": null,
"status": "archive"
}, {
"recordno": "002",
"firstname": "John",
"middlename": "E",
"lastname": "Cena",
"gender": "male",
"dateofbirth": "1980-01-01T20:20:19.198Z",
"dateofdeath": null,
"status": "archive"
}];
I want to show it in Table format in my HTML. My issue is the table header & the row data do not match. You can check the fiddle for demo.
What i am doing wrong?
You don't have to do anything in the function.
JS FIDDLE UPDATE
JS
function TableController($scope) {
$scope.rows = data;
}
HTML
<div ng-app="" ng-controller="TableController">
<table>
<tr>
<th ng-repeat='(key, value) in rows[0]'>{{key}}</th>
</tr>
<tr ng-repeat='row in rows'>
<td ng-repeat='cell in row'>{{cell}}</td>
</tr>
</table>
</div>