Generating diff view using ng-repeat - javascript

I have a json containing revision/history info of modified entity which holds its old and new values. Diff is generated with https://github.com/benjamine/jsondiffpatch and I've done additional parsing myself to form final json format to be rendered.
Example data:
[
{
"createdBy": "admin#localhost",
"modifiedAt": 1445113889873,
"left": [
{
"Status": "Open"
}
],
"right": [
{
"Status": "In Progress"
}
]
},
{
"createdBy": "admin#localhost",
"modifiedAt": 1445114315786,
"left": [
{
"Description": "hello"
},
{
"Assignee": "Uncle Bob (test#test)"
}
],
"right": [
{
"Description": "bye"
},
{
"Assignee": "Willy Wonka (willy#hello)"
}
]
}
]
I am looking a nice way to form a table for this where for each revision I get separately left and right columns and values on separate rows. Probably tired, but I can't figure out how would ng-repeat work for this:
<div ng-repeat="(key, value) in vm.revisions | orderBy:'-modifiedAt'">
<table class="table">
<thead>
<tr>
<th width="20%">Field</th>
<th width="40%">Old Value</th>
<th width="40%">New Value</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
I am hoping for result like this:
Thanks in advance!

If I am right about data format:
<div ng-repeat="revision in vm.revisions | orderBy:'-modifiedAt'">
<table class="table">
<thead>
<tr>
<th width="20%">Field</th>
<th width="40%">Old Value</th>
<th width="40%">New Value</th>
</tr>
</thead>
<tbody ng-repeat="(index, left) in revision.left">
<tr ng-repeat="(field, leftValue) in left">
<td>{{field}}</td>
<td>{{leftValue}}</td>
<td>{{revision.right[index][field]}}</td>
</tr>
</tbody>
</table>
</div>
See it on jsfiddle: http://jsfiddle.net/q6zqgfr8/

Related

How set position value of key in ng-repeat in angular js?

I am implementing one table with help of ng-repeat. I am calling multiple object in array. So one object have 2 key value, But position may be change. Then I want to set the position of key value.
angular.module('appTest', [])
.controller("repeatCtrl", function($scope) {
$scope.predictediveData =
[
{
"mark": 0.99999,
"class": "NONE"
},
{
"mark": 0.999099,
"class": "first",
},
{
"class": "second",
"mark": 0.9990999,
},
{
"mark": 0.9990999,
"class": "seven",
}
]
})
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="table-responsive">
<body ng-app="appTest">
<section ng-controller="repeatCtrl">
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr bolder>
<th class="bordered bg-primary" style="color:#fff">class</th>
<th class="bordered bg-primary" style="color:#fff">Percentage(%)</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in predictediveData">
<td ng-repeat="(key,value) in item"><p>{{value}}</p></td>
</tr>
</tbody>
</table>
</div>
</section>
</body>
</div>
Above snippet is working fine. But Same code in my project, It is giving me output like below:
Code is same, I copied same code in snippet then it is working fine but the same code is not working in my project. I am using angular version 1.4.2
I want to set value according to heading like class should containes only class name and marks should be come into percentage. I don't know what is the reason. I am sharing my project code.
HTML
<div class="widget-body">
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr bolder>
<th class="bordered bg-primary" style="color:#fff">Class</th>
<th class="bordered bg-primary" style="color:#fff">Percentage(%)</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in predictediveData">
<td ng-repeat="(key,value) in item"><p>{{value}}</p></td>
</tr>
</tbody>
</table>
</div>
</div>
JAVASCRIPT:
$scope.predictediveData =
[
{
"mark": 0.99999,
"class": "NONE"
},
{
"mark": 0.999099,
"class": "first",
},
{
"class": "second",
"mark": 0.9990999,
},
{
"mark": 0.9990999,
"class": "seven",
}
]
Objects have no order. Use an array of the property names and repeat that
$scope.props = ['mark', 'class'];
View
<tr ng-repeat="item in predictediveData">
<td ng-repeat="prop in props"><p>{{item[prop]}}</p></td>
</tr>
But if you only have a few properties and they are always the same it would be cleaner to not do the inner loop and just create the <td> yourself
<tr ng-repeat="item in predictediveData">
<td><p>{{item.class}}</p></td>
<td><p>{{item.mark}}</p></td>
</tr>

How to access additional data in JSON requested by Dynatable AJAX call

I am using the dynatable.com plugin to create a table of of schools that are stored in our database. The table can be filtered so does not always show the total number of schools. We do not display a 'number of pupils' column but are trying to show a 'total number of pupils' summary at the bottom of the table.
html on the page is as follows:
<table id="dynatable">
<thead>
<tr>
<th data-dynatable-column="id">ID</th>
<th data-dynatable-column="schoolName">School Name</th>
<th data-dynatable-column="contactName">Contact Name</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<td colspan="3"><span id="numPupils"></span> Pupils</td>
</tr>
</tfoot>
</table>
Followed by the JS:
<script>
$('#dynatable').dynatable({
dataset: {
ajax: true,
ajaxUrl: '/my/json/page.json',
ajaxOnLoad: true,
records: []
}
});
</script>
And a sample of the JSON retrieved (note the additional totalNumPupils field at the bottom):
{
"records": [
{
"id": "1",
"schoolName": "ABC School",
"contactName": "Terry"
},
{
"id": "17",
"schoolName": "DEF School",
"contactName": "Claire"
},
{
"id": "45",
"schoolName": "GHI School",
"contactName": "Barry"
}
],
"queryRecordCount": 3,
"totalRecordCount": 450,
"totalNumPupils": 794
}
I am trying to establish if there is a way to access the responseJSON.totalNumPupils that is requested by dynatable's ajax call or whether I would have to perform my own ajax call, ascertain the number of pupils, then pass in the JSON to the dynatable function afterwards?
Please see the code snippet. You can use normal AJAX to get the JSON payload, then populate the dynatable with the data from the AJAX response, while simultaneously accessing the unique totalNumPupils property.
$('#dynatable').dynatable({
dataset: {
ajax: true,
ajaxUrl: 'https://api.myjson.com/bins/1ezw8l',
ajaxOnLoad: true,
records: []
}
});
$.ajax({
url: 'https://api.myjson.com/bins/1ezw8l',
success: function(data) {
$('#dynatable').dynatable({
dataset: {
ajax: false,
records: data
}
});
$('#numPupils').text("Total Pupils: " + data.totalNumPupils);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Dynatable/0.3.1/jquery.dynatable.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/Dynatable/0.3.1/jquery.dynatable.css" rel="stylesheet" />
<table id="dynatable">
<thead>
<tr>
<th data-dynatable-column="id">ID</th>
<th data-dynatable-column="schoolName">School Name</th>
<th data-dynatable-column="contactName">Contact Name</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<td colspan="3"><span id="numPupils"></span> Pupils</td>
</tr>
</tfoot>
</table>

Howto use Boostrap table to get column sum using external json file

I have the following bootstrap based table and I am trying to calculate the total MarketValue. Its reading an external json file. but for some reason its not adding the values.
the problem starts when i load an external json. file. How can i fix this?
$.getJSON("json/prep.json", function (jsonFromFile) {
$('#table1').bootstrapTable({
data: jsonFromFile.rows
})
var total1 = data.reduce(function(a, b){
return a + parseFloat(b.LongMarketValue);
}, 0);
document.querySelector('.total1').innerHTML = total1;
});
JSON - prep.json
{
"Name": "Julie Brown",
"Account": "C0010",
"LoanApproved": "12/5/2015",
"LastActivity": "4/1/2016",
"PledgedPortfolio": "1000",
"MaxApprovedLoanAmt": "10000",
"LoanBalance": "1849000",
"AvailableCredit": "2877.824375",
"Aging": "3",
"Brokerage": "My Broker",
"Contact": "oJohnson",
"ContactPhone": "-3614",
"RiskCategory": "Yellow",
"rows": [{
"Account": "086-1234",
"ClientName": "S Smth",
"AccountType": "tail",
"LongMarketValue": "$40000"
}, {
"Account": "086-1235",
"ClientName": "all Sth",
"AccountType": "REV Trust",
"LongMarketValue": "$55000"
},
{
"Account": "086-1236",
"ClientName": "Sly Smith",
"AccountType": "Reail",
"LongMarketValue": "$5500"
}]
}
HTML
<table id="table1">
<thead>
<tr>
<th data-field="state" data-checkbox="true"></th>
<th data-field="Account">Account #</th>
<th data-field="ClientName">Client</th>
<th data-field="AccountType">Account Type</th>
<th data-field="MarketValue"> Market Value</th>
</tr>
</thead>
<tfoot>
<tr>
<td></td>
<td></td>
<th></th>
<th> Total <span class="total1"></span></th>
</tr>
</tfoot>
</table>
data is undefined in your code, you have to retrieve data from table or from Json. Also your data returns a string with $ sign, so you have to remove it before parsing it.
Here is a working example.
// Code goes here
$(function () {
$.getJSON("https://api.myjson.com/bins/89vsf", function (jsonFromFile) {
$('#table1').bootstrapTable({
data: jsonFromFile.rows
})
var data = $('#table1').bootstrapTable('getData');
var total1 = data.reduce(function(a, b){
return a + parseFloat(b.LongMarketValue.replace('$',''));
}, 0);
document.querySelector('.total1').innerHTML = total1;
});
});
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table id="table1">
<thead>
<tr>
<th data-field="state" data-checkbox="true"></th>
<th data-field="Account">Account #</th>
<th data-field="ClientName">Client</th>
<th data-field="AccountType">Account Type</th>
<th data-field="LongMarketValue"> Market Value</th>
</tr>
</thead>
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
<th></th>
<th> Total <span class="total1"></span></th>
</tr>
</tfoot>
</table>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.js"></script>
<script src="script.js"></script>
</body>
</html>
Here is a working plunker of the code. http://plnkr.co/edit/PSCR5iS7DSWkuQb1jv5P?p=preview
Hope this helps.

How to display the array of data inside table Using Angular.js ng-repeat

I am facing one issue.I need to display some array of data inside table using Angular.js.I am explaining my code below.
Table:
<table class="table table-bordered table-striped table-hover" id="dataTable" >
<tbody>
<tr>
<td rowspan="2">Date</td>
<td rowspan="2">id</td>
<td rowspan="2">email</td>
<td colspan="7">Order</td>
</tr>
<tr>
<td>Order Id</td>
<td>Status</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
I am explaining my array of data below.
$scope.listOfData=
[
{
"date": "2016-01-25 18:14:00 to 2016-02-05 11:26:05",
"id": "36",
"email": "raj#gmail.com",
"order": [
{
"order_status": 1,
"order_id": 1111
},
{
"order_status": 0,
"order_id": 2222
},
{
"order_status": 1,
"order_id": 5555
}
]
},
{
"date": "2016-01-23 13:15:59 to 2016-01-25 18:14:00",
"id": "37",
"email": "rahul#gmail.com",
"order": [
{
"order_status": 1,
"order_id": 3333
},
{
"order_status": 0,
"order_id": 4444
}
]
}
]
I need to display above data into the table using Angular.js.please help me.
Run this code and check out the output. Let me know if you need different format.. cheers!!!
var app = angular.module("myApp",[]);
app.controller("AppController",['$scope',AppController]);
function AppController($scope) {
$scope.listOfData=[
{
"date": "2016-01-25 18:14:00 to 2016-02-05 11:26:05",
"id": "36",
"email": "raj#gmail.com",
"order": [
{
"order_status": 1,
"order_id": 1111
},
{
"order_status": 0,
"order_id": 2222
},
{
"order_status": 1,
"order_id": 5555
}
]
},
{
"date": "2016-01-23 13:15:59 to 2016-01-25 18:14:00",
"id": "37",
"email": "rahul#gmail.com",
"order": [
{
"order_status": 1,
"order_id": 3333
},
{
"order_status": 0,
"order_id": 4444
}
]
}
];
}
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="AppController">
<table cellspacing="5px" style="border:1px solid black;">
<tr >
<th>Date</th>
<th>id</th>
<th>email</th>
<th>Order</th>
</tr>
<tr ng-repeat="orderInfo in listOfData">
<td>{{orderInfo.date}}</td>
<td>{{orderInfo.id}}</td>
<td>{{orderInfo.email}}</td>
<td>
<table>
<tr>
<th>Order stat</th>
<th>Id<th>
</tr>
<tr ng-repeat="orderStat in orderInfo.order">
<td>{{orderStat.order_status}}</td>
<td>{{orderStat.order_id}}</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</body>
</html>
<!--
This is for table inside row.
<tr ng-repeat="orderInfo in listOfData">
<td>{{orderInfo.date}}</td>
<td>{{orderInfo.id}}</td>
<td>{{orderInfo.email}}</td>
<td>
<table>
<tr ng-repeat="orderStat in orderInfo.order">
<td>{{orderStat.order_status}}</td>
<td>{{orderStat.order_id}}</td>
</tr>
</table>
</td>
</tr> -->
Try this
<tr ng-repeat="(key,list) in listOfData">
<td ng-repeat="(key, lists) in list.order "> {{lists.order_status}}</td>
<td ng-repeat="(key, lists) in list.order "> {{lists.order_id}}</td>
</tr>
Make you header fixed of the table, put it outside of your loop.
Put this outside of the loop i.e ng-repeat
<tr>
<td rowspan="2">Date</td>
<td rowspan="2">id</td>
<td rowspan="2">email</td>
<td colspan="7">Order</td>
</tr>
You don't want to create it for every item, as it's going to be fixed.
Now, iterate through your list of json objects, using ng-repeat, as explained above.
Something like this..
<table class="table table-bordered table-striped table-hover" id="dataTable" >
<div ng-repeat="list in listOfData">
{{list.id}}
<div ng-repeat="oderlist in list.order">
{{orderlist.order_id}}
</div>
</div>
</table>
You can modify it accordingly.
This will help you,
<tr ng-repeat="item in listOfData">
<td>
<ul>
<li>
{{item.order}} // or print your array element there
</li>
</ul>
</td>

Create table using Mushtache.js

I am facing a problem while creating a table using Mushtache.js
View file:
<table class="table table-bordered table-hover table-striped tablesorter">
<thead>
<tr>
<th class="header">Name</th>
<th class="header">Email ID</th>
<th class="header">Contact Number</th>
<th class="header">Edit</th>
</tr>
</thead>
<tbody>
<div id="eTableList"></div>
<script id="eList" type="text/template">
<tr>
<td>{{name}}</td>
<td>{{email}}</td>
<td>{{contact_number}}</td>
<td>View/Edit</td>
</tr>
</script>
</tbody>
</table>
JS code:
function createTable(jsonEData){
var template = $("#eList").html();
expList = Mustache.render(template, jsonEData);
$("#expertTableList").html(expList);
}
I am calling this method as
<script language="javascript">
$(document).ready(function(){
createTable(<?php echo $this->eList;?>);
})
</script>
and the value of $this->eList = jsonEData is
[
{
"id": "52d3d523bdde226f17a581ba",
"name": "shgajsah",
"email": "0",
"contact_number": 2147483647
},
{
"id": "52d3d5c8bdde22c817a581ba",
"name": "fffsdf",
"email": "asa#ddjdj.com",
"contact_number": 323323232
}
]
I am not getting any error but table is not getting populated using above code. So please tell me where I am doing wrong?
You're not iterating over your items, give this a shot:
{{#.}}
<tr>
<td>{{name}}</td>
<td>{{email}}</td>
<td>{{contact_number}}</td>
<td>View/Edit</td>
</tr>
{{/.}}
or perhaps:
{{#each .}}
<tr> ... </tr>
{{/each .}}

Categories