I am new to angular js .I want to iterate the below json in different tr. Currently i am getting the data in a single row by using ng-repeat.Is there is any by which i can set the data in different rows
{
"id": 2,
"project": "wewe2012",
"date": "2013-02-26",
"description": "ewew",
}
Required Output:
<tr>
<td>Emp id</td>
<td>Emp id</td>
</tr>
<tr>
<td>Project</td>
<td>wewe2012</td>
</tr>
<tr>
<td>date</td>
<td>2013-02-26/td>
</tr>
<tr>
<td>description</td>
<td>ewew</td>
</tr>
You do not need to use ng-repeat as you are not iterating over an object literal structure. As long as your view is bound to your controller, you can do the following. For the purposes of this example, I will assume your object is called exampleObject.
Note: If your object literal was an array of structures, you could use ng-repeat and iterate over the object to produce a view, however in this case, it is not necessary.
There is a post here explaining how to iterate over an object to create a table.
Object
var exampleObject = {
"id": 2,
"project": "wewe2012",
"date": "2013-02-26",
"description": "ewew",
}
View
<tr>
<td>Emp id</td>
<td>{{exampleObject.id}}</td>
</tr>
<tr>
<td>Project</td>
<td>{{exampleObject.project}}</td>
</tr>
<tr>
<td>date</td>
<td>{{exampleObject.date}}/td>
</tr>
<tr>
<td>description</td>
<td>{{exampleObject.description}}/td>
</tr>
Related
I have a small problem I would like to set up a ng-repeat dynamic with the values I receive from my JSON object,
First, i made my th from my table with the keys
Secondly, i would like to do my td in dynamic (without putting the name of the key ex: obj.NOM, obj.TYPE ...)
I managed to do something with an Object.keys but logic is not good so I need some help
this is my JSON object ( i show you just the little piece of code that I have a problem )
"HEADER":[
{"NOM":"API-APP","TYPE":"string","DESCRIPTION":"Code application"},
{"NOM":"API-SIGNATURE","TYPE":"string","DESCRIPTION":"Signature de la requete API"},
{"NOM":"API-TIMESTAMP","TYPE":"integer","DESCRIPTION":"Timestamp en microseconde"}]
and this is my ng repeat
<span><b>HEADER</b></span>
<br>
<br>
<table class="table">
<th ng-repeat ="(key, itemHeader) in itemHead.HEADER[0] track by $index">{{key}}</th>
<tr ng-repeat ="(key, itemHeader) in itemHead.HEADER track by $index" >
<td>{{getFirstPropertyValue(itemHeader,$index)}}</td>
</tr>
</table>
I explain i made first a ng-repeat for th with the keys and I would like put my data (3 data per row) in td without put ( .NOM .TYPE .DESCRIPTION)
So I took the function object.key which works very well but that makes me just one element per row but I need 3 elements per row
this is my scope for the function object.key
$scope.getFirstPropertyValue = function(obj,index){
return obj[Object.keys(obj)[index]];
}
and this my result
thanks in advance for your help
<table class="table">
<thead>
<tr>
<th ng-repeat="(key, itemHeader) in itemHead.HEADER[0]">
{{key}}
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in itemHead.HEADER">
<td ng-repeat="column in row">
{{column}}
</td>
</tr>
</tbody>
</table>
I have a JSON object containing two array objects. The object is store in $scope.person. Now i want to display the Likes array in first column and Dislikes array in the second column of the table. Assume that the length of both arrays are similar so no. of rows will be similar as well. What could be the best way to do it?
Check the JSON object below.
{
"name": "Justin Clark",
"rating": 3,
"img": "http://www.fillmy.com/200/200",
"Description": "Glutenfree cray cardigan vegan. Lumbersexual pork belly blog, fanny pack put a bird on it selvage",
"Likes": [
"Dogs",
"Long walks on the beach",
"Chopin",
"Tacos"
],
"Dislikes": [
"Birds",
"Red things",
"Danish food",
"Dead Batteries"
]
}
The table structure looks like this.
<table class="table table-striped">
<thead>
<tr> <th>Likes</th> <th>Dislikes</th></tr>
</thead>
<tbody>
<tr ng-repeat="pl in person">
<td>{{pl.Likes}}</td> <td>{{pl.Dislikes}}</td>
</tr>
</tbody>
</table>
You can run the ng-repeat on one of the arrays (take Likes) and using the $index of ng-repeat you can have the Dislikes array mapped as well.
Something like this..
<tr ng-repeat="like in data.Likes">
<td>{{like}}</td>
<td>{{data.Dislikes[$index]}}</td>
</tr>
DEMO
You can do this,
<body ng-app='app'>
<div class="media-list" ng-controller="dishDetailController">
<table>
<tr>
<th>Likes</th>
<th>Dislikes</th>
</tr>
<tr ng-repeat="customer in data">
{{customer}}
<td>{{customer.Likes}}</td>
<td>{{customer.Dislikes}}</td>
</tr>
</table>
</div>
</body>
</html>
DEMO
EDIT:
Based on assumption your data is not an array,
DEMO
I have a problem withe the Smart Table AngularJS Sorting, I implemented this on my table as:
The initialized app:
angular.module('myproyApp', ['smart-table'])
The controller side:
$scope.dataList = []; //any json collection with: id, name and description
The view side with st-table directive:
<table class="table table-bordered table-striped" st-table="dataRows" st-safe-src="dataList">
<thead>
<tr>
<th><span class="glyphicon"></span>Q</th>
<th st-sort="name">Name</th>
<th st-sort="descripcion">Description</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in dataRows">
<td class="col-md-1">{{$index + 1}}</td>
<td class="col-md-4">{{row.name}}</td>
<td class="col-md-4">{{row.description}}</td>
<td>Change</td>
</tr>
</tbody>
</table>
On click the sorting header's cells the table is sorting, but the sorting isn't working for the $index cells. Please if you have any think to include the $index cells to sort. I want not to use the indexes on dataList $scope values, I need that this index will be include only on table view.
Track by is used to link your data with the DOM generation made by ng-repeat. When you add track by you tell angular to generate a single DOM element per data object in the given collection. Because $index has to do with the DOM there is no way to have it relate to a particular data entry. Here's a more detailed explanation.
If you really want to do it without touching your dataList, you could call indexOf in your table:
<tbody>
<tr ng-repeat="row in dataList | orderBy:sortField">
<td class="col-md-1">{{dataRows.indexOf(row)}}</td>
<td class="col-md-4">{{row.name}}</td>
<td class="col-md-4">{{row.description}}</td>
<td>Change</td>
</tr>
</tbody>
Where there is a scoped variable called sortField which is a string that is the name of the field you wish to sort by. I implemented a similar thing in this plunker, using the smart-tables module. http://plnkr.co/edit/AF90dQ
I would advise against this because it quickly becomes expensive for large arrays, and runs into problems if your entries aren't unique.
I have a JSON object which is data for a chart. This has 2 properties labels and data. Both are arrays. Along with the chart I wish to display a table as well. I am not able to figure out how to use the ng-repeat directive here.
JSON Object
$scope.chartdata={
labels: ["XYZ", "ABC","DEF"],
data: [4286, 38870, 3955]
};
HTML
<table class="table table-striped">
<thead>
<tr>
<th>Labels</th>
<th>Data </th>
</tr>
</thead>
<tr ng-repeat="cht in chartdata">
<td>{{cht.labels}}</td>
<td>{{cht.data}}</td>
</tr>
</table>
Do I need to change the JSON structure? I do not wish to cos it works for my chart directive and I want to resues the same JSON for displaying the table as well.
You need to use $index, because these are 2 separate properties within the chartdata object
<table class="table table-striped">
<thead>
<tr>
<th>Labels</th>
<th>Data </th>
</tr>
</thead>
<tr ng-repeat="label in chartdata.labels">
<td>{{label}}</td>
<td>{{chartdata.data[$index]}}</td>
</tr>
</table>
That said the object structure you have can probably be revised to be more like the model (unless you are using the object structure for something else that expects it in that format)
$scope.chartdata = [
{
label: "XYZ",
data: 4286
},
...
];
In the latter case too, you could use the above structure and set up a method that transforms the object into the dual array structure that you need for the something else.
I have encountered a strange behavior related to ng-init, any help would be appreciated.
I have a model object which has a flats property that is an array of flat objects. Each flat object has rooms property which is an array of room objects.
I'm trying to display flat and rooms as follows;
<table ng-repeat="flat in model.flats" ng-init="flatIndex = $index">
<thead>
<tr>
<td>{{flatIndex+1}}. {{flat.name}}</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="room in flat.rooms" ng-init="roomIndex = $index">
<td>{{roomIndex+1}}. {{room.name}}</td>
</tr>
</tbody>
</table>
If i delete a flat or room by using array.splice flatIndex and roomIndex variables doesn't seem to update properly even though $index and ui updates properly.
You can see the problem here in action.
Try to delete 1st, 2nd or 3rd flat or room object by clicking the delete link. Deleting last object from the array doesn't really expose the problem.
Any workarounds would also be appreciated.
This is a known behavior when you use ng-init, the scope property values set by ng-init are not watched and they don't update when you remove items from array to reflect the refreshed index position. So don't use ng-init, instead just use $index (deleteFlat($index)) and flat object reference (to get hold of rooms deleteRoom(flat,$index)).
<table ng-repeat="flat in model.flats track by flat.id">
<thead>
<tr>
<td colspan="2">{{$index+1}}. {{flat.name}}</td>
<td>DELETE FLAT</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="room in flat.rooms track by room.id">
<td> </td>
<td>{{$index+1}}. {{room.name}}</td>
<td>DELETE ROOM</td>
</tr>
</tbody>
</table>
and
$scope.deleteFlat = function(flatIndex){
$scope.model.flats.splice(flatIndex,1);
};
$scope.deleteRoom = function(flat,roomIndex){
flat.rooms.splice(roomIndex,1);
};
Plnkr
Or better off use the ids itself, deleteFlat(flat.id) and deleteRoom(room.id, flat).
<table ng-repeat="flat in model.flats track by flat.id">
<thead>
<tr>
<td colspan="2">{{$index + 1}}. {{flat.name}}</td>
<td>DELETE FLAT</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="room in flat.rooms track by room.id">
<td> </td>
<td>{{$index+1}}. {{room.name}}</td>
<td>DELETE ROOM</td>
</tr>
</tbody>
</table>
and
$scope.deleteFlat = function(flatId){
$scope.model.flats.splice(_getItemIndex(flatId, $scope.model.flats), 1);
};
$scope.deleteRoom = function(roomId, flat){
flat.rooms.splice(_getItemIndex(roomId, flat.rooms), 1);
};
function _getItemIndex(imtId, itms){
var id ;
itms.some(function(itm, idx){
return (itm.id === imtId) && (id = idx)
});
return id;
}
Plnkr2