I have a JSON array of objects, which I want to dispaly all of it into a table, but somewhere I'm messing up with something.
Problem Statement: Display JSON array of nested objects in a table including all of its contents.
JSON Data:
{
"loadStops": [{
"id": 1,
"sequence": 1,
"type": "P",
"stop": {
"companyId": 148,
"companyCode": "FWS",
"legalName": "Frontier WHSE",
"locations": [{
"id": 149,
"city": "PortLavaca",
"state": "TX",
"contacts": [{
"id": 150,
"medium": "MA",
"serviceLocator": "000-000-0000",
"prefered": false,
"action": 0
}],
"action": 0
}],
"action": 0
},
"apptType": "WDO",
"appointmentNo": null,
"commodities": [{
"id": 0,
"commodity": "Food",
"action": 0
}],
"action": 0
}, {
"id": 1,
"sequence": 1,
"type": "P",
"stop": {
"companyId": 148,
"companyCode": "FWS",
"legalName": "Frontier WHSE",
"locations": [{
"id": 149,
"city": "PortLavaca",
"state": "TX",
"contacts": [{
"id": 150,
"medium": "MA",
"serviceLocator": "000-000-0000",
"prefered": false,
"action": 0
}],
"action": 0
}],
"action": 0
},
"apptType": "WDO",
"appointmentNo": null,
"commodities": [{
"id": 0,
"commodity": "Food",
"action": 0
}],
"action": 0
}]
}
Please guide me how do I write the code for bootstrap table to achieve all the contents inside the table.
TABLE:
<table class="table table-striped table-hover table-sm">
<tr>
<th>headers</th>
</tr>
<tr>
<td> data </td>
<td>
<table>
<tr>
<td> nested data etc.. </td>
</tr>
</table>
</td>
</tr>
</table>
Please enlighten my misunderstanding, I'll be thankful to you.
Thanks
I am just giivng a sample to iterate over nested data:
$scope.value= yourJson;
$spope.displayVal= $scope.value.loadStops;
<table class="table table-striped table-hover table-sm">
<tr ng-repeat="data in displayVal">
<th>{{data.id}}</th>
<!-- show data what you want-->
</tr>
<tr ng-repeat="data in displayVal">
<td> data </td>
<td>
<table>
<tr ng-repeat="newData in data.stop.location">
<td> nested data etc.. </td>
</tr>
</table>
</td>
</tr>
</table>
Related
I am trying to fetch a report using Angular JS,
<tbody ng-repeat="p in GettingBillingPage track by $index " ng-init="idx = $index">
<tr>
<td><input type="button" class="btn btn-primary waves-effect"
value="Cancel" ng-click="GetBillDetails(idx)" />
</td>
<td>{{p.BillNo}}</td>
<td>{{p.FinalTotal | number:2}}</td>
<td>{{p.Name}}</td>
<td>{{p.purchaseDate |date}}</td>
<td>
<table cellpadding="0" cellspacing="0" class="table table-bordered">
<tr>
<th>Product Name</th>
<th>Quantity</th>
<th>Rate</th>
</tr>
<tbody ng-repeat="q in GettingBillingPage " ng-if="q.BillNo == p.BillNo">
<tr>
<td>{{q.ProductName}}</td>
<td>{{q.quantity}}</td>
<td>{{q.Rate | number:2}}</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
Even when both the ng-repeat is refering to a single Array, the billno repeats based on the number of items sold
Example of the Output Table
How to avoid repetition of bill no and hence the list of products
you need to print out unique values in the outer ng-repeat; This can be done with a custom filter...
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.GettingBillingPage = [{
"BillNo": 1,
"FinalTotal": 203,
"Name": "test name 1",
"purchaseDate": '13',
"ProductName": "abc 1",
"quantity": 9,
"Rate": 12
},
{
"BillNo": 1,
"FinalTotal": 203,
"Name": "test name 1",
"purchaseDate": '13',
"ProductName": "abc 2",
"quantity": 9,
"Rate": 22
},
{
"BillNo": 2,
"FinalTotal": 421,
"Name": "test name 2",
"purchaseDate": '24',
"ProductName": "def",
"quantity": 9,
"Rate": 12
},
{
"BillNo": 3,
"FinalTotal": 625,
"Name": "test name 3",
"purchaseDate": '72',
"ProductName": "xyz 1",
"quantity": 9,
"Rate": 12
},
{
"BillNo": 3,
"FinalTotal": 625,
"Name": "test name 3",
"purchaseDate": '72',
"ProductName": "xyz 2",
"quantity": 9,
"Rate": 12
},
{
"BillNo": 3,
"FinalTotal": 625,
"Name": "test name 3",
"purchaseDate": '72',
"ProductName": "xyz 3",
"quantity": 9,
"Rate": 12
},
{
"BillNo": 4,
"FinalTotal": 928,
"Name": "test name 4",
"purchaseDate": '96',
"ProductName": "ghi",
"quantity": 9,
"Rate": 12
},
];
});
app.filter('unique', function() {
return function(collection, keyname) {
var output = [],
keys = [];
angular.forEach(collection, function(item) {
var key = item[keyname];
if (keys.indexOf(key) === -1) {
keys.push(key);
output.push(item);
}
});
return output;
};
});
td{border:0.5px dotted blue; padding:0 5px;}
table{border:1px solid red; margin:10px;}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<table>
<tbody ng-repeat="p in GettingBillingPage | unique : 'BillNo' ">
<tr>
<td>{{p.BillNo}}</td>
<td>{{p.FinalTotal | number:2}}</td>
<td>{{p.Name}}</td>
<td>{{p.purchaseDate |date}}</td>
<td>
<table>
<tbody ng-repeat="q in GettingBillingPage" ng-if="q.BillNo == p.BillNo">
<tr>
<td>{{q.ProductName}}</td>
<td>{{q.quantity}}</td>
<td>{{q.Rate | number:2}}</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
I'm obtaining a response in json format from laravel application like below:
[{"id":11,"name":"test","description":"adddas","isDone":false,"created_at":{"date":"2017-09-06 12:23:23.000000","timezone_type":3,"timezone":"UTC"}},{"id":12,"name":"test2","description":"asdasdsa","isDone":false,"created_at":{"date":"2017-09-13 06:23:22.000000","timezone_type":3,"timezone":"UTC"}},{"id":13,"name":"task12321","description":"jakis tam testowy task","isDone":false,"created_at":{"date":"2017-09-03 18:44:57.000000","timezone_type":3,"timezone":"UTC"}},{"id":14,"name":"task12321","description":"jakis tam testowy task","isDone":false,"created_at":{"date":"2017-09-03 20:23:58.000000","timezone_type":3,"timezone":"UTC"}},{"id":15,"name":"task12321","description":"jakis tam testowy task","isDone":false,"created_at":{"date":"2017-09-03 20:45:35.000000","timezone_type":3,"timezone":"UTC"}}]
I'm trying to format these data in Angular js in ng-repeat directive in way like below:
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th>name</th>
<th>Created at</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="task in tasks">
<td>{{task.name}}</td>
<td>{{ task.created_at.date | date:'yyyy-MM-dd HH:mm:ss' }}</td>
</tr>
</tbody>
</table>
</div>
The problem is with format data. I'd like to format this as we can see above in format date:yyyy-MM-dd HH:mm:ss. The result is a table with incorrect dates:
How could I reduces .000000 in for example 2017-09-06 12:23:23.000000? The filter does not work at all. I don't know why. I would be greateful for help.
I'm obtaining data from database by Doctrine query in way like this:
public function getTasks(){
$results = $this->entityManager->createQueryBuilder()
->select('t')->from('\TodoList\Http\Entities\Task', 't')
->getQuery()->getArrayResult();
true);
return $results;
}
add this function to your controller
$scope.ToDate=function(date) {
return new Date(date);
}
and change your view like code below
<tr ng-repeat="task in tasks">
<td>{{task.name}}</td>
<td>
{{ ToDate(task.created_at.date) | date:'yyyy-MM-dd HH:mm:ss' }}
</td>
</tr>
Pass date as "date": "2017-09-06T12:23:23.000000" instead of "date":"2017-09-06 12:23:23.000000"
Check below code:
var app = angular.module('myApp', []);
app.controller('MyController', ['$scope', function($scope) {
$scope.title = 'Hello world';
$scope.tasks = [{
"id": 11,
"name": "test",
"description": "adddas",
"isDone": false,
"created_at": {
"date": "2017-09-06T12:23:23.000000",
"timezone_type": 3,
"timezone": "UTC"
}
}, {
"id": 12,
"name": "test2",
"description": "asdasdsa",
"isDone": false,
"created_at": {
"date": "2017-09-13T06:23:22.000000",
"timezone_type": 3,
"timezone": "UTC"
}
}, {
"id": 13,
"name": "task12321",
"description": "jakis tam testowy task",
"isDone": false,
"created_at": {
"date": "2017-09-03T18:44:57.000000",
"timezone_type": 3,
"timezone": "UTC"
}
}, {
"id": 14,
"name": "task12321",
"description": "jakis tam testowy task",
"isDone": false,
"created_at": {
"date": "2017-09-03T20:23:58.000000",
"timezone_type": 3,
"timezone": "UTC"
}
}, {
"id": 15,
"name": "task12321",
"description": "jakis tam testowy task",
"isDone": false,
"created_at": {
"date": "2017-09-03T20:45:35.000000",
"timezone_type": 3,
"timezone": "UTC"
}
}];
}]);
table, th, td {
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller='MyController' ng-app="myApp">
<div>{{title}}</div>
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th>name</th>
<th>Created at</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="task in tasks">
<td>{{task.name}}</td>
<td>{{ task.created_at.date | date : "yyyy-MM-dd h:mm:ss"}}</td>
</tr>
</tbody>
</table>
</div>
</div>
I am trying to print the data under tabular format .
The data which is present under "properties" (ApprovalStatusShrtStrngVal and FluidCodeShrtStrngVal)
I have tried as
<div ng-app="myapp" ng-controller="FirstCtrl">
<table border="1">
<tr>
<th ng-repeat="(key, val) in collectioninfo.records.properties">{{ key }}</th>
</tr>
<tr ng-repeat="row in collectioninfo">
<td ng-repeat="column in row">
{{ column }}
</td>
</tr>
</table>
</div>
JSON is
{
"records": [{
"keys": ["n"],
"length": 1,
"_fields": [{
"identity": {
"low": 1128,
"high": 0
},
"labels": ["TestLabel"],
"properties": {
"ApprovalStatusShrtStrngVal": "Working",
"FluidCodeShrtStrngVal": "P"
}
}],
"_fieldLookup": {
"n": 0
}
}, {
"keys": ["n"],
"length": 1,
"_fields": [{
"identity": {
"low": 1129,
"high": 0
},
"labels": ["TestLabel"],
"properties": {
"ApprovalStatusShrtStrngVal": "Working",
"FluidCodeShrtStrngVal": "P"
}
}],
"_fieldLookup": {
"n": 0
}
}],
"summary": {
"statement": {
"text": "MATCH (n:TestLabel) RETURN n LIMIT 25",
"parameters": {}
},
"statementType": "r",
"counters": {
"_stats": {
"constraintsRemoved": 0
}
},
"updateStatistics": {
"_stats": {
"constraintsRemoved": 0
}
},
"plan": false,
"profile": false,
"notifications": [],
"server": {
"address": "localhost:7687",
"version": "Neo4j/3.2.0"
},
"resultConsumedAfter": {
"low": 37,
"high": 0
},
"resultAvailableAfter": {
"low": 3,
"high": 0
}
}
}
http://jsfiddle.net/9fR23/498/
please let me know how to fix this
ApprovalStatusShrtStrngVal FluidCodeShrtStrngVal (Header)
Working P (Values)
You have to loop through your array properly to get the desired result.
<table border="1">
<tr>
<th ng-repeat="(key, val) in collectioninfo.records[0]._fields[0].properties">{{ key }}</th>
</tr>
<tr ng-repeat="row in collectioninfo.records">
<td ng-repeat="column in row._fields[0].properties">
{{ column }}
</td>
</tr>
</table>
Working Fiddle :http://jsfiddle.net/9fR23/499/
My doubt is simple. How to replace , with line break in angular filter. i also added the demo jsfFiddle
angular
.module('myApp', [])
.filter('nicelist', function() {
return function(input) {
if (input instanceof Array) {
return input.join(",");
}
return input;
}
})
.controller('ctrl', function($scope) {
$scope.todolists = [{
"id": "id_584",
"customer_id": 2,
"url": "url",
"bill_number": "123",
"location": "from_location"
}, {
"id": "id_122",
"customer_id": 3,
"url": "url",
"bill_number": "123",
"location": "from_location"
}, {
"id": "id_128",
"customer_id": 4,
"url": "url",
"bill_number": "123",
"location": "from_location"
}, {
"id": "id_805",
"customer_id": 5,
"url": "url",
"bill_number": "123",
"location": "from_location"
}, {
"id": "id_588",
"customer_id": 6,
"url": "url",
"bill_number": "123",
"location": "from_location"
}, {
"id": ["id_115"," id_114"],
"customer_id": 7,
"url": "url",
"bill_number": "123",
"location": "from_location"
}]
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp" ng-controller="ctrl">
<table class="table table-hover tr-table transactions" style="width: 100%;">
<thead>
<tr class="search-row pending-orders table-header-row-height tr-table-head">
<th>ID</th>
<th>Bill Number</th>
<th>Location</th>
<th>Url</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="todolist in todolists">
<td>{{todolist.id | nicelist }}</td>
<td>{{todolist.bill_number}}</td>
<td>{{todolist.location}}</td>
<td><a target="_blank" href="{{ 'http://' + todolist.url}}">Download Invoice : <i title="Download Invoice" style="padding-left:5px;cursor:pointer;color:black;" class="fa fa-download"></i></a> </td>
</tr>
</tbody>
</table>
</body>
demo
In the above link, there will be table. In ID column last row contain 2 values which is present in array inside the json. Now instead of comma(,) is there any possible way for line break.
Please share your knowledge.
you use ng-bind-html with injecting sanitize at module level .
html:
<tbody>
<tr ng-repeat="todolist in todolists">
<td ng-bind-html="todolist.id | nicelist"></td>
<td>{{todolist.bill_number}}</td>
<td>{{todolist.location}}</td>
<td><a target="_blank" href="{{ 'http://' + todolist.url}}">Download Invoice : <i title="Download Invoice" style="padding-left:5px;cursor:pointer;color:black;" class="fa fa-download"></i></a> </td>
</tr>
</tbody>
code:
angular.module('myApp', ['ngSanitize']) //Inject here
.filter('nicelist', function() {
return function(input) {
if (input instanceof Array) {
return input.join("<br>");
}
return input;
}
})
working sample up for grabs here.
ng-bind-html directive Documentation
PS: make sure you inject sanitize or you can use different techiques .
I'm playing around with Angular for the first time and having trouble with ng-repeat, repeating thought a json
[
{
"class": "Torture",
"type": "Cruiser",
"name": "The Impending Doom",
"leadership": 7,
"pts": "250 pts",
"speed": "35cm",
"turns": "90\u00B0",
"armour": 5,
"squadron": "Death Makes",
"hitpoints": 6,
"weapons": [
{
"name": "Impaler",
"firepower": 2,
"ordnances": [
{
"type": "Attack Craft",
"range": "30cm"
}
]
}
],
"refits": {},
"crew skills": {},
"battle log": [
{
"Data": "",
"Log": ""
}
]
},
{
"class": "Torture",
"type": "Cruiser",
"name": "Pain Giver",
"leadership": 7,
"pts": "250 pts",
"speed": "35cm",
"turns": "90\u00B0",
"armour": 5,
"squadron": "Death Makes",
"hitpoints": 6,
"weapons": [
{
"name": "Launch Bays",
"firepower": 4,
"ordnances": [
{
"type":"Fighters",
"range": "30cm"
},
{
"type":"Bombers",
"range": "20cm"
},
{
"type":"Boats",
"range": "30cm"
}
]
},
{
"name": "Prow Torpedo Tubes",
"firepower": 4,
"ordnances": [
{
"type": "Torpedos",
"range": "30cm"
}
]
}
],
"refits": {},
"crew skills": {},
"battle log": [
{
"Data": "",
"Log": ""
}
]
}
]
Now the problem I have is when I try to repeat thought the ordnance's I get the worry amount as there a two different amount of ordnance's.
Here my HTML
<div ng-repeat="ship in fleet" class="squadron__table">
<table>
<caption>{{ ship.name }}</caption>
<tr>
<td class="space">{{ ship.type }}</td>
<td class="space">{{ ship.class }}</td>
<td class="space">{{ ship.leadership }}</td>
<td class="space">{{ ship.speed }}</td>
<td class="space">{{ ship.turns }}</td>
<td class="space">{{ ship.armour }}</td>
<td class="space">{{ ship.hitpoints }}</td>
<td class="space">{{ ship.pts }}</td>
</tr>
<tr>
<th colspan="2">Armament</th>
<th colspan="2">Fire power</th>
<th colspan="4">Ordnance</th>
</tr>
<tr ng-repeat="weapon in ship.weapons">
<td colspan="2">{{ weapon.name }}</td>
<td colspan="2">{{ weapon.firepower }}</td>
<td colspan="2">
{{ weapon.ordnances.type }}
---
{{ weapon.ordnances.range }}
</td>
</tr>
</table>
</div>
and the controller
$http.get( '/json/' + $routeParams.squadrionName + '.json', { cache: $templateCache } )
.success(function( data) {
$scope.fleet = data;
})
The end result I'm looking for is
when the ship has launch bays and torpedo it print s out the three different type of ship and the one torpedos.
ordnances can have one or more than one items so you need to use the ngRepeat again, like this:
<td colspan="4">
<div ng-repeat="ordnance in weapon.ordnances">
{{ ordnance.type }} --- {{ ordnance.range }}
</div>
</td