I have an array of objects like this:
var data = [{
"id": 1,
"age": 20,
"name": "Janell Mcintosh",
"gender": "female",
"email": "janellmcintosh#zilphur.com",
"phone": "+1 (906) 555-2575"
},etc..
];
var keys = Object.keys(data[0]);
I am trying to display this data in a table. The keys are columns, and all of the object's values are supposed to go in the relevant column. Here is what I am trying:
<table class="table table-striped">
<tr>
<th ng-repeat="key in keys">
{{key}}
</th>
</tr>
<tr ng-repeat="row in data">
<td ng-repeat="key in keys">
{{row['"'+key+'"']}}
</td>
</tr>
</table>
This doesn't work. I am trying to put quotes around the key because the JSON I receive has the keys and values in quotes. The data/variables are stored properly, I just don't know how to access them.
Am I doing something incorrectly here?
{{row['"'+key+'"']}}
I'm just trying to add quotes to the key.
View sample plunker here:
You don't need the double-quotes around the key values. (Javascript parses keys the same whether or not the quotes are present, so var data = { "id": 1 } is completely equivalent to var data = { id: 1 }.
So all you need is:
<td ng-repeat="key in keys">
{{row[key]}}
</td>
See here.
Related
I have following json and need to display its name in the table as "PAY ALL", "PAY PART", "DECLINE", but the key contains the spaces in it also its corresponding value for pay all, pay part need to be displayed in corresponding table row data. How can I achieve it.
My json object is as follow-
$scope.tableData={
"KEY-1": "VALUE-1",
"KEY-2": "VALUE-2",
"data": {
"PAY ALL": {
"NumberOfBills": "1800000",
"CummalativeBillAmount": "45000000",
"ResponseProgress": "60"
},
"PAY PART": {
"NumberOfBills": "6000000",
"CummalativeBillAmount": "15000000",
"ResponseProgress": "20"
},
"DECLINE": {
"NumberOfBills": "3000000",
"CummalativeBillAmount": "7500000",
"ResponseProgress": "10"
},
"REQUEST EXTENSION": {
"NumberOfBills": "240000",
"CummalativeBillAmount": "6000000",
"ResponseProgress": "8"
}
}
}
Also I need to achieve following table as from the above json response -
I tried the following in my html binding, but it does not show up anything.
<tr ng-repeat="dataValue in tableData">
<td><img src="./assets/images/Group 384#2x.png" class="img-bo"/></td>
<td>{{dataValue.data["PAY ALL"]}}</td>
<td><div class="bg">{{dataValue.data.NumberOfBills}}</div></td>
<td><div class="bg">{{dataValue.data.CummalativeBillAmount}}</div></td>
<td><div class="bg">{{dataValue.data.ResponseProgress}}</div></td>
</tr>
Please help.
Your code should be something like
<table>
<tr>
<th>category </th>
<th>no of bills</th>
<th>commulative amount</th>
<th>response</th>
</tr>
<tr ng-repeat="(key,value) in tableData.data">
<td>{{key}}</td>
<td><div class="bg">{{value.NumberOfBills}}</div></td>
<td><div class="bg">{{value.CummalativeBillAmount}}</div></td>
<td><div class="bg">{{value.ResponseProgress}}</div></td>
</tr>
</table>
Here is working fiddle
I have a data structure as follow;
[
{
"a1": 941,
"b1": "abc",
"c1": "aaa",
"a2": 27103,
"b2": "ttt",
"c2": "zzz"
},
{
"a1": 456,
"b1": "xxx",
"c1": "yyy",
"a2": 7632,
"b2": "mmm",
"c2": "nnn"
}
]
I use angular js table with dynamic column names which are different from keys in the structure. Since there are many of them, I do not want to write key names like;
<table st-table="table_data_raw" style="" class="table table-striped forms-list-table">
<tr>
<th ng-repeat="dateColumnName in dateColumnNames ">{{ dateColumnName }}
</th>
</tr>
<tbody>
<tr ng-repeat="row in data">
<td>{{row.a1 }}</td>
<td>{{row.b1 }}</td>
<td>{{row.a2 }}</td>
<td>{{row.b2 }}</td>
<td>{{row.c2 }}</td>
</tr>
</tbody>
</table>
How can I get table values dynamically without specifying their names in that structure from "data"?
Try using $index to refer to the ng-repeat item you wish to access (in your example it would be index 0 or 1). Here is code/fiddle (click items in the table to get their value dynamically):
https://jsfiddle.net/AdamKMorris/ox89o7L0/
using $Index:
<tr ng-repeat="row in data">
<td ng-click="chosenValueA1($index);">{{row.a1 }}</td>
...
</tr>
Then the angularJs:
$scope.chosenValueA1 = function(i)
{
$scope.myValue = $scope.data[i].a1;
}
If you want to access a1,a2,b1,b2, etc. then you will need to nest ng-repeat and use $index for each to refer to the value.
I receive a Json that looks like this (I dont have access to change it)
{
"name": "mike"
"days": [
{
"timeperiods": [
{
"time": "08:00 - 12:00",
"hours": 4,
"task": "running"
},
{
"time": "13:00 - 15:00",
"hours": 4,
"task": "triathlon"
}
]
},
{
"timeperiods": [
{
"time": "08:00 - 12:00",
"hours": 3,
"task": "swimming"
}
]
}
]
}
Its not an full JSON-Example. Usually there would be 6 days objects. But i think showing 2 Objects should show my problem.
I create an table in html which shows me what tasks an user has on certain days.
(I save the JSON Data in a scope variable with the name weekplan.)
<table>
<thead>
<tr>
<th>Time</th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wedesday</th>
<th>Thursday</th>
<th>Friday</th>
<th>Saturday</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="day in weekplan.days[0].timeperiods">
<td>{{day.time}}</td>
<td ng-if="day.hours == 0"><div></div></td>
<td ng-if="day.hours != 999 && day.hours != 0">Time for Workout!!</td>
</tr>
</tbody>
</table>
It can only be one ng-if true never both.
My Problem is to display the Columns correctly. This table example works but only for the time column and the monday column. But i dont know how to get it to work on all weekdays. I thought about using ng-if and ng-repeat on the same td object but it didnt really work out. (I need both ng-if for CSS rules which i have removed from this example cause its not part of the problem). What i want in the End is a table which either shows an empty field for a certain timeperiod or a field where it says "Time for Workout". And this for all Weekdays.
You have very confusing description, but if logically present your json it will look something like:
HTML
<table>
<thead>
<tr>
<th>Time</th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wedesday</th>
<th>Thursday</th>
<th>Friday</th>
<th>Saturday</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="day in weekplan.days">
<td data-ng-repeat="period in day.timeperiods">
<span>{{day.time}}</span>
<span ng-if="day.hours == 0"></span> <!-- why it is even exist? -->
<span ng-if="day.hours != 999 && day.hours != 0">Time for Workout!! </span>
</td>
</tr>
</tbody>
</table>
I'm using AngularJS and a JSON file to hold my data. And my data holds an array with objects and some values.
Here's my JSON:
{
"DirectoryList":
[
{
"_id": 2,
"navLvl": 1,
"codeName": "BOD",
"DirectoryName": "Board of Directors",
"Contacts": [
{
"BodName": "FVC",
"Position": "CEO",
"LocalNo": "101",
"Mobile": ["09178985698", "09178985698"]
},
{
"BodName": "MIC",
"Position": "PRESIDENT",
"LocalNo": "108",
"Mobile": ["09178710088", "09178889088"]
},
{
"BodName": "SIC",
"Position": "SVC-OPTRNS",
"LocalNo": "105",
"Mobile": ["09178923689", "09328922955"]
}
]
}
]
}
And in my controller:
$http.get('./json/directory.json')
.success(function(data){
var result = $filter('filter')(data.DirectoryList, {_id:$stateParams.id})[0];
$scope.listviews = [];
angular.forEach(result, function(value, key) {
$scope.listviews.push(value);
});
})
.error(function(err){
$log.error(err);
})
And in my views:
<div class="table-responsive" ng-if="listviews[0] == 2">
<table class="table table-striped table-hover table-condensed table-bordered">
<tr>
<thead>
<th>BOD Name</th>
<th>Position</th>
<th>Local No.</th>
<th>Mobile</th>
</thead>
</tr>
<tr>
<tbody ng-repeat="list in listviews[4]">
<td ng-repeat="(key, value) in list">{{ value }}</td>
</tbody>
</tr>
</table>
</div>
This gives me:
BOD Name | Position |Local No. | Mobile
---------+----------+----------+-------------------------------
FVC | CEO | 101 | ["09178985698","09178985698"]
---------+----------+----------+-------------------------------
MIC | PRESIDENT| 108 | ["09178710088","09178889088"]
---------+----------+----------+-------------------------------
SIC |SVC-OPTRNS| 105 | ["09178923689","09328922955"]
I have no idea how to display it correctly but when I try to change the value to value[0] I can get the first array but it ruins the data holds by objects. Is there another way getting the data from objects together with values? Can't figure out where should I execute the logic. Is it way better in the controller or in my view?
I'm pretty sure there is a lot of different ways on doing this. The following is one that should work.
<tbody ng-repeat="list in listviews[4]">
<td ng-repeat="(key, value) in list">
<div ng-if="key=='Mobile'" ng-repeat="phone in value">{{phone}} </div>
<div ng-if="key!='Mobile'">{{value}}</div>
</td>
</tbody>
I have a dynamic dataset to present with Angular. In other words I do not have access to the column names returned until runtime.
I can present the column names as a header and the data itself with no problem. ng-repeat (or perhaps it's JS itself) though refuses to return the columns in the order they were created. You can see in the fiddle the columns are sorted so they appear "age name weight", I need them the way they came, "name age weight"
I created another array of the column names and their proper order ($scope.order) but I cannot seem to find a way to use that with Angular to sort the data.
Please give me a way to present this data in the original order.
I created a JSFiddle: http://jsfiddle.net/GE7SW/
Here's a simple scope that sets up the data:
function MainCtrl($scope) {
$scope.output = [
{
"name": "Tom",
"age": "25",
"weight" : 250
},
{
"name": "Allan",
"age": "28",
"weight" : 175
},
{
"name": "Sally",
"age": "35",
"weight" : 150
}
];
$scope.order = {
"name": 1,
"age": 2,
"weight" : 3
};
}
Here's the HTML:
<table ng-app ng-controller="MainCtrl">
<thead>
<tr>
<th ng-repeat="(key,value) in output.0">{{key}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in output">
<td ng-repeat="(key,value) in row">{{value}}</td>
</tr>
</tbody>
</table>
(Note the (key,value) in the last ng-repeat is needed by ng-class code I took out for this example.)
The properties order in JavaScript objects is never guaranteed. You need to use a list.
The only thing you need to do is convert $scope.order into an array:
$scope.order = [
"name",
"age",
"weight"
];
and use that inside the HTML like this:
<table ng-app ng-controller="MainCtrl">
<thead>
<tr>
<th ng-repeat="key in order">{{key}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in output">
<td ng-repeat="key in order">{{row[key]}}</td>
</tr>
</tbody>
</table>
Fiddle
Your updated fiddle here (click).
While the order of javascript objects is not guaranteed, this is likely to work in most or all cases. This is simply looping your objects into arrays. It might be a better approach, if possible, to have the data coming from the server in arrays, 1 that describes the structure (keys) and the other that just data sets of arrays.
$scope.getRow = function(row) {
var arr = [];
for (var k in row) {
if (k !== '$$hashKey') {
arr.push(row[k]);
}
}
return arr;
};
$scope.getKeys = function(row) {
var arr = [];
for (var k in row) {
if (k !== '$$hashKey') {
arr.push(k);
}
}
return arr;
};
the html:
<table ng-app ng-controller="MainCtrl">
<thead>
<tr>
<th ng-repeat="(key,value) in getKeys(output[0])">{{value}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in output">
<td ng-repeat="(key, value) in getRow(row)" ng-class="getKeys(output[0])[key]">{{value}}</td>
</tr>
</tbody>
</table>