My Object looks like this
Object
207T : Object
metal : 1
steel : 2
205T : Object
metal : 1
steel : 3
208T : Object
metal : 1
steel : 3
209T : Object
metal : 0
steel : 9
Now this object i need to display in below format
207T, 205T, 208T, 209T should be in table heading which is fine
<tr>
<th></th>
<th></th>
<th ng-repeat="(key, value) in mainObj">{{key}}</th>
</tr>
And then the format should be
How to acheive this
We can not create table column wise so in this case best and cleanest way would be to filter out the row values and using them inside view. So
In controller
app.controller(['$scope', function($scope){
$scope.object= values;
$scope.valuesMetal= [];
$scope.valuessteel = [];
// initializing row values for use in the using in view
angular.forEach(values, function(value, key) {
$scope.valuesMetal.push(value.metal );
$scope.valuessteel.push(value.metal );
});
}]);
In the view we just display our values
<tr>
<th ng-repeat="(key, value) in mainObj">{{key}}</th>
</tr>
<tr>
<td >Metal</td>
<td ng-repeat="(key, value) in valuesMetal" >{{value}}</td>
</tr>
<tr>
<td >steel</td>
<td ng-repeat="(key, value) in valuessteel" >{{value}}</td>
</tr>
<div>
For the header you need to convert the object to array:
// inside controller
mainObjArray = Object.keys(mainObj); // ['207T', '205T', '208T', '209T']
// header html
<tr>
<th ng-repeat="key in mainObjArray">{{key}}</th>
</tr>
And for the rest of values you can do some like:
// inside controller
mainObjValues = mainObjArray.map(function(item){
return mainObj[item];
}); // output: [{metal: 1, steel: 2}, {...}]
Then the body-table:
<tbody>
<tr ng-repeat="item in mainObjValues">
<td>{{item.metal}}</td>
<td>{{item.steel}}</td>
....
</tr>
</tbody>
angular.module("app",[])
.controller("ctrl",function($scope){
var sampleObj = {
"207T":{
"metal":1,
"steel":2
},
"205T":{
"metal":1,
"steel":3
},
"208T":{
"metal":1,
"steel":3
},
"209T":{
"metal":0,
"steel":9
}
}
$scope.metal = [];
$scope.steel= []
$scope.keys = Object.keys(sampleObj);
angular.forEach(sampleObj, function(obj) {
$scope.metal.push(obj.metal );
$scope.steel.push(obj.steel );
});
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<table>
<tr>
<th ng-repeat="item in keys">{{item}}</th>
</tr>
<tr>
<td >Metal</td>
<td ng-repeat="item in metal track by $index" >{{item}}</td>
</tr>
<tr>
<td >Steel</td>
<td ng-repeat="item in steel track by $index" >{{item}}</td>
</tr>
</table>
</div>
This is actually simple.
<table>
<tr>
<th></th>
<th ng-repeat="(key, value) in mainObj">{{key}}</th>
</tr>
Here you are ng repeating in th, will display 207t, 205T etc
<tr ng-repeat="item in items track by $index">
<td ng-repeat="item1 in item track by $index">{{item[$index]}}</td>
</tr>
Here you have to ng repeat tr, so that it will display metal and steel. and then each td u have to ng repeat and should display with index item[$index]
Related
I have an object that looks like this:
[{'name':'Mike', 'age':21},
{'name':'Joe', 'age':24}]
My angular/html code looks like this:
<table class="Names">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tbody>
<tr ng-repeat-start="value in msg.object">
<td rowspan="2">{{value.name}}</td>
</tr>
<tr ng-repeat-end ng-repeat="value in msg.object">
<td>{{value.age}}</td>
</tr>
</tbody>
</table>
The names show up fine and vertically how i'd want them to be in the table (first column),
but for each value of name i get both of the ages displaying instead of just the age for that person.
Can anyone guide me in the right direction here? I feel like I'm close but just picked up angular today so I'm new to it and ng-repeat.
You only need a simple row repeat with 2 cells in each row
<tr ng-repeat="value in msg.object">
<td>{{value.name}}</td>
<td>{{value.age}}</td>
</tr>
Your table format is wrong. Place the headers inside and do a ng-repeat to generate tr
DEMO
var app =angular.module('testApp', []);
app.controller('testCtrl', function($scope) {
$scope.users = [{'name':'Mike', 'age':21},
{'name':'Joe', 'age':24}];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="testApp" ng-controller="testCtrl">
<table border="2">
<tr>
<td>name</td>
<td>age</td>
</tr>
<tr ng-repeat="user in users">
<td >{{user.name}}</td>
<td >{{user.age}}</td>
</tr>
</table>
</body>
I have a table sorted by properties "age" and "name" but I have a counter of rows (counterR) that shows the numbers of rows in the table.
I want to exclude this item on OrderBy because is ordered too, I need it would be static and always ordered but I can´t.
There's the Plunker link of my problem: http://plnkr.co/edit/MJYayUANphxksbGkyEcj?p=preview
HTML:
<body ng-controller="MainCtrl">
<table border="0">
<thead>
<tr>
<th>#</th>
<th>ID</th>
<th ng-click="sortType = 'name';sortReverse=!sortReverse">NAME</th>
<th ng-click="sortType = 'age';sortReverse=!sortReverse">AGE</th>
</tr>
</thead>
<tbody>
<tr ng-init="counterR=incrementCounter()" ng-repeat="item in items | orderBy:sortType:sortReverse">
<td>{{counterR}}</td>
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
</tr>
</tbody>
</table>
JS:
$scope.items = [
{"name":"Jhon","id":"BB1","age":23},
{"name":"Austin","id":"BB2","age":44},
{"name":"Mark","id":"BB3","age":56},
{"name":"Jenn","id":"BB4","age":15}
];
var counterRow = 0;
$scope.incrementCounter = function(){
counterRow = counterRow + 1;
return counterRow;
}
Instead of storing the row number with the data - which doesn't work because the row numbers are not specific to a data row, but rather to a display position - you need to calculate the value "on the fly". In the scope of an ng-repeat you can do this with the special $index variable. That is, instead of
<td>{{counterR}}</td>
which reads a value from the data row, you would use
<td>{{$index+1}}</td>
(assuming sequential numbers starting from 1)
I have an issue with angular, I want to use two nested ng-repeat in a data table where the first get the data, and the second get the name of field to be retrieved from the data (retrieved in the first ng-repeat)
here is what I tried to do with code :
<table md-table flex-order-gt-sm >
<thead md-head>
<tr md-row >
//1st : get the name of fields, not a problem
<th md-column ng-repeat="field in fields">{{item.name}}</th>
</tr>
</thead>
<tbody md-body>
<tr md-row ng-repeat="item in items">
<td md-cell ng-repeat="field in fields" >
//here is the problem I want to get the item that it's field name is field
{{item.{{field}} }}</td>
</tr>
</tbody>
</table>
for example if fields contain :{'a','b','c'}
and items contains {'a':'1','b':'2','c':'3'};
I want for example for the 1st iteration of {{item.{{field}} }} to return 1
Use toString() to retrieve the scope data in an scope object.
<tr md-row ng-repeat="item in items">
<td md-cell ng-repeat="field in fields" >
{{item[field.toString()]}}
</td>
</tr>
Here is the plunker
As an alternative you could also use a filter:
<td md-cell ng-repeat="field in fields | filter: { name: 'field' }">
</td>
You need to get fields collection according to item of items collection after
getFieldsByItem(item)
Then you can get field from fields collection
{{field}}
The Array I use is [{"cell":["jobcode","resume_number","score"]},{"cell":["jc100","rc1",80]},{"cell":["jc100","rc123",70]}]
And I came up with javascript code as
var cell=response;
for (var i in cell) {
for(var j in cell[i])
{
console.log(cell[i][j]);
profiles.push(cell[i][j]);
$scope.profiles=profiles;
for(k in cell[i][j])
{
resumes.push(cell[i][j]);
console.log("resume length"+resumes.length);
$scope.columns=resumes;
console.log(JSON.stringify($scope.columns));
}
}
}
And html is
<tr ng-repeat="profile in profiles track by $index" >
<td ng-repeat="col in columns track by $index">
<label >{{col.cell}}</label>
</td>
</tr>
And ended up enter image description here
I have no idea to proceed further. I need to organize those data as a table. Please help.
Your data contains an array of objects which contains another array. Therefore, you need to extract each object from outer array and then go down to inner one.
If you need this data only to organise them in a table, then you can simply use the following code:
Your Controller code:
$scope.cell = response;
Your HTML :
<tr ng-repeat="profile in cell track by $index" >
<td ng-repeat="col in profile.cell track by $index">
<label >{{col}}</label>
</td>
</tr>
In case you need to store each array object, then you can use forEach loop:
Your controller code:
var cell=[{"cell":["jobcode","resume_number","score"]}, {"cell":["jc100","rc1",80]}, {"cell":["jc100","rc123",70]}];
angular.forEach(cell, function(data){
$scope.profiles.push(data);
});
Your HTML :
<table>
<tr ng-repeat="profile in profiles track by $index" >
<td ng-repeat="col in profile.cell track by $index">
<label >{{col}}</label>
</td>
</tr>
</table>
Try the following code. Take header as separate part from json and display header first then start ng-repeat from index first
<table border="1">
<tr>
<td>
{{columns[0].cell[0]}}
</td>
<td>
{{columns[0].cell[1]}}
</td>
<td>
{{columns[0].cell[2]}}
</td>
</tr>
<tr ng-repeat="col in columns" ng-if="$index>0">
<td>
{{columns[$index].cell[0]}}
</td>
<td>
{{columns[$index].cell[1]}}
</td>
<td>
{{columns[$index].cell[2]}}
</td>
</tr>
</table>
How can I pass array Json data from angularjs Controller to html.
Here is my html
<body ng-app="bookApp">
<div ng-controller="bookListCtr">
<table>
<thead>
<tr>
<th>something</th>
<th>something</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in items">
<td><( item.id )></td>
</tr>
</tbody>
</table>
</div>
</body>
Here is my Angularjs
var bookApp = angular.module('bookApp', []);
bookApp.config(function($interpolateProvider) {
$interpolateProvider.startSymbol('<(');
$interpolateProvider.endSymbol(')>');
});
bookApp.controller('bookListCtr', function ($scope, $http) {
$http.get('http://localhost/client_side/public/book').success(function(data) {
if(data.s_respond === 200){
$scope.items = data.data;
console.log(data.data)
}
});
});
This is Json data After console
s_respond = 200
data = "[{"id":"7","title":"Seven is my lucky number","link":"/api/v1/items/7"},{"id":"8","title":"A Dance with Dragons","link":"/api/v1/items/8"},{"id":"10","title":"Ten ways to a better mind","link":"/api/v1/items/10"},{"id":"42","title":"The Hitch-hikers Guide to the Galaxy","link":"/api/v1/items/42"},{"id":"200","title":"Book title #200","link":"/api/v1/items/200"},{"id":"201","title":"Book title #201","link":"/api/v1/items/201"},{"id":"202","title":"Book title #202","link":"/api/v1/items/202"},{"id":"203","title":"Book title #203","link":"/api/v1/items/203"},{"id":"204","title":"Book title #204","link":"/api/v1/items/204"},{"id":"205","title":"Book title #205","link":"/api/v1/items/205"}]"
I think that you need parse the json
$scope.items = JSON.parse(data.data);
a link that explain that:
https://www.quora.com/How-can-I-convert-JSON-format-string-into-a-real-object-in-JS
There r two tags... meaning 2 column try adding another in Ua body
<body ng-app="bookApp"> <div ng-controller="bookListCtr">
<table>
<thead>
<tr> <th>something</th> <th>something</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in items"> <td>{{item.id }}</td>
<td>something else</td>
</tr>
</tbody>
</table>
</div>
</body>