I have json that looks like this :
[
{
"date": "25/06/2015",
"details": [
{
"p": "AM",
"b": "2500"
},
{
"p": "JL",
"b": "300"
}
]
},
{
"date": "24/06/2015",
"details": [
{
"p": "AM",
"b": "2300"
},
{
"p": "JL",
"b": "1300"
}
]
}
]
I want to write the data to an html table using angularjs, but I want the value of date.details.p to determine which column the value of date.details.b should go in. So, for example the value date.details.b will always go in column 2 if date.details.p = 'AM'.
The JSON data will not always contain data that would relate to each column, nor can the order of the details array be guaranteed.
Any ideas gratefully received.
EDIT
The expected output would be
Date AM JL
25/06/2015 2500 300
24/06/2015 2300 1300
Based on the limited info I can suggest you can use ngShow.
<tr>
<td class="ColumnTwo">
<span data-ng-show="checkAM(date)">{{date.details.p}}</span>
</td>
</tr>
In the function checkAM you can check if date.details.p == "AM"
Based on the situation you can use
ngSwitch
ngIf
Also check out https://stackoverflow.com/a/15810462/2489860
Try this:
<table>
<tr>
<th>Date</th>
<th>AM</th>
<th>JL</th>
</tr>
<tr ng-repeat="item in data">
<td>{{ item.date }}</td>
<td ng-repeat="detail in item.details">
<span ng-show="detail.p=='AM' && $index == 0">{{ detail.b }}</span>
<span ng-show="detail.p=='JL' && $index == 1">{{ detail.b }}</span>
</td>
</tr>
</table>
You can see and run the complete code below:
angular.module('app', [])
.controller('ctrl', function ($scope) {
$scope.data = [
{
"date": "25/06/2015",
"details": [
{
"p": "AM",
"b": "2500"
},
{
"p": "JL",
"b": "300"
}
]
},
{
"date": "24/06/2015",
"details": [
{
"p": "AM",
"b": "2300"
},
{
"p": "JL",
"b": "1300"
}
]
}
];
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body ng-app="app">
<div ng-controller="ctrl">
<table>
<tr>
<th>Date</th>
<th>AM</th>
<th>JL</th>
</tr>
<tr ng-repeat="item in data">
<td>{{ item.date }}</td>
<td ng-repeat="detail in item.details">
<span ng-show="detail.p=='AM' && $index == 0">{{ detail.b }}</span>
<span ng-show="detail.p=='JL' && $index == 1">{{ detail.b }}</span>
</td>
</tr>
</table>
</div>
</body>
</html>
Related
i have this json file :
{
"id": 1276,
"etabName": "YAssineDev",
"etabType": "OUR_SCHOOL",
"users": [
{
"id": 12,
"username": "YassineDev",
"firstName": "yassine",
"lastName": "messaoud",
"active": true,
"payant": false,
"creatdateTime": "2021-06-08",
"roles": [
{
"id": 2,
"roleName": "ADMIN_USER",
"description": "admin user"
}
]
}
]
},
i want to display the username of the users tab in the html,
i have tried with *ngFor:
<tbody>
<tr *ngFor="let t of tabs.users">
<td>{{ t.username }}</td>
</tr>
</tbody>
getMethod
dataEtabUser() {
this.cr.getdataEtab().subscribe(data=> {
this.tabs = data
})
}
ngOnInit
this.dataEtabUser()
but nothing displayed
Assuming the dataEtabUser() works correctly
<div *ngFor="let t of tabs">
<tbody *ngFor="let user of t.users">
<tr *ngFor="let data of user">
<td>{{ data.username }}</td>
</tr>
</tbody>
</div>
I have a REST service, which returns this object:
[
{
"id": 100,
"value": "2452"
},
{
"id": 100,
"value": "2458"
},
{
"id": 1,
"value": "2457"
},
{
"id": 1,
"value": "2459"
},
{
"id": 4,
"value": "2460"
},
{
"id": 5,
"value": "3458"
}
]
Now, using this GET service, I want the following table to be built in angular and show it in UI.
100 1 4 5
-------------------
2452 2457 2460 3458
2458 2459
i.e. the unique ids should create the header and the list of values associates to each header value will be appended to respective column.
I have tried something with ng-repeat like this:
<table border="1">
<tr>
<th ng-repeat="column in cols">{{column.id}}</th>
</tr>
<tr>
<td ng-repeat="column in cols">
<md-list>
<md-list-item class="md-2-line" ng-repeat="val in column.values">
<md-checkbox ng-model="item.done"></md-checkbox>
<div class="md-list-item-text">
??
</div>
</md-list-item>
</md-list>
</td>
</tr>
But still wondering how to do the same? Please help.
Try use groupBy filter.
var app = angular.module('anApp', ['angular.filter']);
app.controller('aCtrl', function($scope) {
$scope.data = [
{
"id": 100,
"value": "2452"
},
{
"id": 100,
"value": "2458"
},
{
"id": 1,
"value": "2457"
},
{
"id": 1,
"value": "2459"
},
{
"id": 4,
"value": "2460"
},
{
"id": 5,
"value": "3458"
}
];
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-filter/0.4.7/angular-filter.js"></script>
<div ng-app="anApp" ng-controller="aCtrl">
<table border="1">
<tr>
<th ng-repeat="col in data | groupBy: 'id'">{{col[0].id}}</th>
</tr>
<tbody>
<tr>
<td ng-repeat="col in data | groupBy: 'id'">
<table>
<tr ng-repeat="c in col">
<td> {{c.value}}</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</div>
I have a table as follows:
<tr ng-repeat="user in users">
<td>{{user.fields.first_name}}, {{ user.fields.last_name }}</td>
<td>
<input type="checkbox">
</td>
</tr>
and the json is as follows:
{
"users":
[
{ "fields": {"first_name": "sam", "last_name": "smith"}, "model": "auth.user", "pk": 3},
{ "fields": {"first_name": "tom", "last_name": "moody"}, "model": "auth.user", "pk": 4}
]
}
I want to have a functionality to add the pk's of the selected checkboxes to a scope variable. Since i don't have a boolean field for the selected in my json, how will i approach this?
You can try the code in my fiddle, the selected PKs are stored in an array call 'selected'. The pk must be unique for each user.
var app = angular.module('app', []);
var ctrl = app.controller('MyCtrl', function($scope) {
$scope.users = [{
"fields": {
"first_name": "wasif",
"last_name": "abbas"
},
"model": "auth.user",
"pk": 3
}, {
"fields": {
"first_name": "asad",
"last_name": "zaman"
},
"model": "auth.user",
"pk": 4
}, {
"fields": {
"first_name": "hes",
"last_name": "man"
},
"model": "auth.user",
"pk": 5
}];
$scope.selected = [];
$scope.toggleSelection = function toggleSelection(pk) {
var idx = $scope.selected.indexOf(pk);
// is currently selected
if (idx > -1) {
$scope.selected.splice(idx, 1);
}
// is newly selected
else {
$scope.selected.push(pk);
}
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<div ng-controller='MyCtrl'>
<table>
<tr ng-repeat="user in users">
<td>{{user.fields.first_name}}, {{ user.fields.last_name }}</td>
<td>
<input type="checkbox" ng-checked="selected.indexOf(user.pk) > -1" ng-click="toggleSelection(user.pk)" />
</td>
</tr>
</table>
Selected: {{selected}}
</div>
</div>
Or you can try with ng-change, which is a bit more elegant imo:
var app = angular.module('app', []);
app.controller('AController', function($scope) {
$scope.users = [
{ "fields": {"first_name": "wasif", "last_name": "abbas"}, "model": "auth.user", "pk": 3},
{ "fields": {"first_name": "asad", "last_name": "zaman"}, "model": "auth.user", "pk": 4}
];
$scope.selectedUsers = {};
$scope.addUser = function(pk, userselected) {
if(userselected) {
$scope.selectedUsers[pk] = true;
} else {
delete $scope.selectedUsers[pk];
}
}
$scope.getSelectedUsersArray = function() {
return Object.keys($scope.selectedUsers);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="AController">
<table>
<tr ng-repeat="user in users">
<td>{{user.fields.first_name}}, {{ user.fields.last_name }}</td>
<td>
<input type="checkbox" ng-model="userselected" ng-change="addUser(user.pk, userselected)"/>
</td>
</tr>
</table>
<div>Selected: {{getSelectedUsersArray()}}</div>
</div>
</div>
{
"imports": {
"imported": [
{
"date": "19/9/2014",
"item": [
{
"sn": "3366698",
"type": "Food",
"weight": "10tn."
},
{
"sn": "3366699",
"type": "Eqipment",
"weight": "20kg."
}
]
},
{
"date": "20/9/2014",
"item": [
{
"sn": "3366700",
"type": "Electronics",
"weight": "100pt."
},
{
"sn": "3366701",
"type": "Food",
"weight": "5tn."
}
]
}
]
}
}
I have this json and I am not sure if it's in the right structure. I am trying to render each item type (duplicates included) as table header by the following $.getJSON method:
$scope.items = data.imports.item;
and HTML as:
<table border="1" >
<thead>
<tr>
<th ng-repeat="item in items">{{item.type}}</th>
</tr>
</thead>
</table>
But I couldn't succeed. What am I doing wrong?
EDIT: jsfiddler
I don't see you are using the imported propery at all, try
$scope.items = data.imports.imported;
since imported is your array and not item.
<table border="1" >
<thead>
<tr>
<th ng-repeat="item in items">{{item.type}}</th>
</tr>
</thead>
</table>
Your json ist broken, paste your json here:
http://jsonformatter.curiousconcept.com/
You'll see that data.imports.item would be undefined.
Correct JSON to access would look like:
{
"imports": {
"item": [
{
"sn": "3366698",
"type": "Food",
"weight": "10tn."
},
{
"sn": "3366699",
"type": "Eqipment",
"weight": "20kg."
}
]
}
}
Also access your data after:
<th ng-repeat="item in items">
{{item["type"]}}
</th>
I have an angular app where i am trying to create a table from a json. My json is as follows:
[
{
"campus_id": "321",
"name": "0"
},
{
"campus_id": "231",
"name": "1"
},
{
"campus_id": "123",
"name": "2"
}
]
Generally we will create a table in the html as follows:
<table class="table table-striped">
<tr>
<th>
Campus id
</th>
<th>
Name
</th>
</tr>
<tr ng-repeat="item in items">
<td >
{{item.campus_id}}
</td>
<td >
{{item.name}}
</td>
</tr>
</table>
How do i create even the headers from the json instead of defining them ourselves?
I would add the column headers within the json result like so
columnDefs: [
{field: 'campus_id', displayName: 'Campus ID'},
{field: 'name', displayName: 'Name'}],
data:
[
{
"campus_id": "57911000",
"name": "0"
},
{
"campus_id": "57911001",
"name": "HIGHLAND PARK HIGH SCHOOL"
},
{
"campus_id": "57911007",
"name": "P A S S Learning Center School"
}
]
otherwise you could use the key, value pairing ng-repeat="(key,value) in items" with a filter to return 1 row and then use {{key}}