I have a controller of Angular JS which sum numbers of values with the help of range loop but now I have requirement need to sum previous value of total with each iteration. I have tried with so many filters but no success. I have require desired result. Helps are definitely appreciated.
var arr = [
{
"unique_id": "CS",
"college": "BSCS",
"arr_length": 1,
"program_section": [
{
"question": "Q1",
"total": 135,
},
{
"question": "Q2",
"total": 142,
},
{
"question": "Q3",
"total": 135,
},
{
"question": "Q4",
"total": 137,
},
]
},
{
"unique_id": "MBA",
"college": "BBA",
"arr_length": 2,
"program_section": [
{
"question": "Q1",
"total": 175,
},
{
"question": "Q2",
"total": 142,
},
{
"question": "Q3",
"total": 165,
},
{
"question": "Q4",
"total": 137,
},
]
},
{
"unique_id": "CA",
"college": "Account",
"arr_length": 1,
"program_section": [
{
"question": "Q1",
"total": 145,
},
{
"question": "Q2",
"total": 162,
},
{
"question": "Q3",
"total": 125,
},
{
"question": "Q4",
"total": 117,
},
]
}
];
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$scope.names = arr;
}).filter('range', function() {
return function(input, total) {
total = parseInt(total);
for (var i=0; i<total; i++) {
input.push(i);
}
return input;
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="customersCtrl">
<table border="1">
<thead>
<tr>
<td>Question</td>
<td ng-repeat="x in names">{{ x.college }}</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="n in [] | range:4">
<td>
{{ names[0].program_section[n].question }}
</td>
<td width="100px" ng-repeat="x in names">
{{ x.program_section[n].total }}
</td>
</tr>
</tbody>
</table>
</div>
Desired Result
<table width="426" border="1">
<tr>
<td width="79">Question</td>
<td >BSCS</td>
<td >BBA</td>
<td >Account</td>
<td >Total</td>
</tr>
<tr>
<td>Q1</td>
<td>135</td>
<td>175</td>
<td>145</td>
<td width="50" >455</td>
</tr>
<tr>
<td>Q2</td>
<td>142</td>
<td>142</td>
<td>162</td>
<td width="50" >446</td>
</tr>
<tr>
<td>Q3</td>
<td>135</td>
<td>165</td>
<td>125</td>
<td width="50" >425</td>
</tr>
<tr>
<td>Q4</td>
<td>137</td>
<td>137</td>
<td>117</td>
<td width="50" >391</td>
</tr>
</table>
You could just calculate the totals in the controller and use that to generate remaining column:
$scope.totals = {}
arr.map(function(obj){
obj.program_section.map(function(section){
$scope.totals[section.question] = ($scope.totals[section.question] || 0) + section.total
})
})
Here totals[Qx] will have totals for Qx, and we use that in the view:
var arr = [
{
"unique_id": "CS",
"college": "BSCS",
"arr_length": 1,
"program_section": [
{
"question": "Q1",
"total": 135,
},
{
"question": "Q2",
"total": 142,
},
{
"question": "Q3",
"total": 135,
},
{
"question": "Q4",
"total": 137,
},
]
},
{
"unique_id": "MBA",
"college": "BBA",
"arr_length": 2,
"program_section": [
{
"question": "Q1",
"total": 175,
},
{
"question": "Q2",
"total": 142,
},
{
"question": "Q3",
"total": 165,
},
{
"question": "Q4",
"total": 137,
},
]
},
{
"unique_id": "CA",
"college": "Account",
"arr_length": 1,
"program_section": [
{
"question": "Q1",
"total": 145,
},
{
"question": "Q2",
"total": 162,
},
{
"question": "Q3",
"total": 125,
},
{
"question": "Q4",
"total": 117,
},
]
}
];
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$scope.names = arr;
$scope.totals = {}
arr.map(function(obj){
obj.program_section.map(function(section){
$scope.totals[section.question] = ($scope.totals[section.question] || 0) + section.total
})
})
}).filter('range', function() {
return function(input, total) {
total = parseInt(total);
for (var i=0; i<total; i++) {
input.push(i);
}
return input;
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="customersCtrl">
<table border="1">
<thead>
<tr>
<td>Question</td>
<td ng-repeat="x in names">{{ x.college }}</td>
<td>Totals</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="n in [] | range:4">
<td>
{{ names[0].program_section[n].question }}
</td>
<td width="100px" ng-repeat="x in names" >
{{ x.program_section[n].total }}
</td>
<td width="50%" ng-bind="totals[names[0].program_section[n].question]"></td>
</tr>
</tbody>
</table>
</div>
Related
Data Object:
{
"headers": {
"location": "Location",
"postcode": "Postcode",
"contributors": "Contributors",
"contributions": "Contributions",
"percentage": "Percentage"
},
"rows": [
{
"postcode": "3018",
"contributors": 2,
"contributions": 2,
"location": "Seaholme",
"percentage": 67
},
{
"postcode": "3013",
"contributors": 1,
"contributions": 1,
"location": "Yarraville West",
"percentage": 33
}
]
}
Template:
<thead>
<tr>
<th v-for="(v, k) in data.result.headers" :key="k">
{{ v }}
</th>
</tr>
</thead>
<tbody>
<tr v-for="(row, i) in data.result.rows" :key="i">
<td :key="j" v-for="(col, j) in row">
{{ col }}
</td>
</tr>
</tbody>
Output:
So the table header and body are two separate objects. While the header seems to follow the order but the row objects don't. How can I make sure they always align correctly?
You can create a computed property of the rows. This would be the same list but with the keys ordered in the order of the header keys. Here is a possible solution:
new Vue({
el: "#app",
data: () => ({
"headers": { "location": "Location", "postcode": "Postcode", "contributors": "Contributors", "contributions": "Contributions", "percentage": "Percentage" },
"rows": [
{ "postcode": "3018", "contributors": 2, "contributions": 2, "location": "Seaholme", "percentage": 67 },
{ "postcode": "3013", "contributors": 1, "contributions": 1, "location": "Yarraville West", "percentage": 33 }
]
}),
computed: {
orderedRows() {
const headers = Object.keys(this.headers);
return this.rows.map(row =>
headers.reduce((orderedRow, key) =>
({ ...orderedRow, [key]: row[key] })
, {})
);
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<table>
<thead>
<tr>
<th v-for="(v, k) in headers" :key="k">{{ v }}</th>
</tr>
</thead>
<tbody>
<tr v-for="(row, i) in orderedRows" :key="i">
<td v-for="(col, j) in row" :key="j">{{ col }}</td>
</tr>
</tbody>
</table>
</div>
Another possible way inspired from #CertainPerformance comment:
new Vue({
el: "#app",
data: () => ({
"headers": { "location": "Location", "postcode": "Postcode", "contributors": "Contributors", "contributions": "Contributions", "percentage": "Percentage" },
"rows": [
{ "postcode": "3018", "contributors": 2, "contributions": 2, "location": "Seaholme", "percentage": 67 },
{ "postcode": "3013", "contributors": 1, "contributions": 1, "location": "Yarraville West", "percentage": 33 }
]
}),
computed: {
headerKeys() {
return Object.keys(this.headers);
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<table>
<thead>
<tr>
<th v-for="(v, k) in headers" :key="k">{{ v }}</th>
</tr>
</thead>
<tbody>
<tr v-for="(row, i) in rows" :key="i">
<td v-for="(header, j) in headerKeys" :key="j">{{ row[header] }}</td>
</tr>
</tbody>
</table>
</div>
First to introduce to my table structure:
<div class="col-md-9">
<table class="table table-bordered">
<thead>
<tr>
<th>Date</th>
<th>Pair</th>
<th id="{{odds.id}}" ng-repeat="odds in list">{{odds.odd.name}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="match in matches ">
<td>{{match.sd | parseMomentDate}}</td>
<td>{{match.h}}-{{match.a}}</td>
<td>{{match.odds.drawNoBet.value}}<span ng-if="!match.drawNoBet.value">--</span></td>
</tr>
</tbody>
</table>
</div>
I am listing odd names, and therefore setting up id attr for the element.
So my problem is how to populate the rest of the table, the table data based on the Id from the table head, every table head to have rows and columns populated based on that id?
I have the next structure of receiving the data:
"id": 4413011,
"sd": "2017-04-27T23:30:00.000+0400",
"h": "Athletic Bilbao",
"a": "Betis Sevilla",
"odds": {
"bothToScore": [
{
"name": "no",
"value": 1.85,
"id": 552240303
},
{
"name": "yes",
"value": 1.95,
"id": 552240338
}
],
"doubleChance": [
{
"name": "12",
"value": 1.22,
"id": 552240012
},
{
"name": "x2",
"value": 2.98,
"id": 552240003
},
{
"name": "1x",
"value": 1.11,
"id": 552240079
}
],
"drawNoBet": [
{
"name": "1",
"value": 1.15,
"id": 552240007
},
{
"name": "2",
"value": 6.15,
"id": 552240267
}
],
"totalGoals": [
{
"name": "under",
"value": 2.15,
"id": 552235662
},
{
"name": "over",
"value": 1.7,
"id": 552235663
}
]
}
},
So for example in the odds object there is a list "bothToScore", therefore "bothToScore" is the id for the table head, and based on that id need to populate the rest of the columns, meaning ;Yes' or 'No'.
Any suggestions?
At this case id mapping is not needed - just ensure same order of <th>s and <tr>s:
angular.module('app', []).controller('ctrl', ['$scope', function($scope) {
$scope.matches = [{
"id": 4413011,
"sd": "2017-04-27T23:30:00.000+0400",
"h": "Athletic Bilbao",
"a": "Betis Sevilla",
"odds": {
"bothToScore": [{
"name": "no",
"value": 1.85,
"id": 552240303
},
{
"name": "yes",
"value": 1.95,
"id": 552240338
}],
"doubleChance": [{
"name": "12",
"value": 1.22,
"id": 552240012
},
{
"name": "x2",
"value": 2.98,
"id": 552240003
},
{
"name": "1x",
"value": 1.11,
"id": 552240079
}],
"drawNoBet": [{
"name": "1",
"value": 1.15,
"id": 552240007
},
{
"name": "2",
"value": 6.15,
"id": 552240267
}],
"totalGoals": [{
"name": "under",
"value": 2.15,
"id": 552235662
},
{
"name": "over",
"value": 1.7,
"id": 552235663
}]
}
}];
$scope.matches.push(JSON.parse(JSON.stringify($scope.matches[0])));
}]);
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='app' ng-controller="ctrl">
<table>
<thead>
<tr>
<th>Date</th>
<th>Pair</th>
<th ng-repeat-start='(key, value) in matches[0].odds' hidden></th>
<th ng-repeat-end ng-repeat='item in value'>{{item.name}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat='match in matches'>
<td>{{match.sd | date}}</td>
<td>{{match.h}} - {{match.a}}</td>
<td ng-repeat-start='(key, value) in match.odds' hidden></td>
<td ng-repeat-end ng-repeat='item in value'>{{item.value}}</td>
</tr>
</tbody>
</table>
</div>
I have a complex object coming from the web service as shown below, how to display PatientId and description, if anyone have any good idea, please help me thru it.:
$scope.myData = {"PatientSearchResponse": {
"pageNumber": 1,
"pageSize": 50,
"patDataBean": [
{
"gender": {
"code": "male",
"description": "Male",
"type": "gender"
},
"patDateofBirth": "1997/06/19",
"patFirstName": "aman",
"patLastName": "elvis",
"patSurvivalStat": {
"code": "A",
"description": "Alive",
"type": "patient_status"
},
"patientIdentifier": {
"OID": "589a9cf6-4513-49e1-bd5c-c7363849ed93",
"organizationId": {
"PK": 54,
"siteName": "CTRP"
},
"patientId": "1"
}
},
{
"gender": {
"code": "male",
"description": "Male",
"type": "gender"
},
"patDateofBirth": "2001/07/18",
"patFirstName": "Elvis",
"patLastName": "Harvey",
"patSurvivalStat": {
"code": "dead",
"description": "Dead",
"type": "patient_status"
},
"patientIdentifier": {
"OID": "151d0222-3726-40ee-8f69-0a6800727607",
"organizationId": {
"OID": "83d09227-9c65-4d7b-94da-baaf5c07b38a",
"siteName": "Texas"
},
"patientId": "100"
}
}]}}
In my HTML I am using ng-repeat as:
<td ng-repeat="(key, value) in grid.columns">
<div>
<p >{{row[key]}}</p>
</div>
</td>
my JS file as:
myDataContainer = $scope.myData.PatientSearchResponse.patDataBean;
$scope.grid.columns = {patientIdentifier: "Patient Id",patFirstName: "First Name",patLastName: "Last Name",patDateofBirth: "Date of Birth",patSurvivalStat: "Description"};
angular.forEach(myDataContainer, function (values, index) {
$scope.grid.rows.push(values);
});
Why you can just do this :
<td ng-repeat="pat in myData.PatientSearchResponse.patDataBean">
{{pat.patientIdentifier}} - {{pat.patSurvivalStat.description}}
</td>
Try this man:
angular.module('app', [])
.controller('Controller', ['$scope', function($scope) {
$scope.myData = {"PatientSearchResponse": {
"pageNumber": 1,
"pageSize": 50,
"patDataBean": [
{
"gender": {
"code": "male",
"description": "Male",
"type": "gender"
},
"patDateofBirth": "1997/06/19",
"patFirstName": "aman",
"patLastName": "elvis",
"patSurvivalStat": {
"code": "A",
"description": "Alive",
"type": "patient_status"
},
"patientIdentifier": {
"OID": "589a9cf6-4513-49e1-bd5c-c7363849ed93",
"organizationId": {
"PK": 54,
"siteName": "CTRP"
},
"patientId": "1"
}
},
{
"gender": {
"code": "male",
"description": "Male",
"type": "gender"
},
"patDateofBirth": "2001/07/18",
"patFirstName": "Elvis",
"patLastName": "Harvey",
"patSurvivalStat": {
"code": "dead",
"description": "Dead",
"type": "patient_status"
},
"patientIdentifier": {
"OID": "151d0222-3726-40ee-8f69-0a6800727607",
"organizationId": {
"OID": "83d09227-9c65-4d7b-94da-baaf5c07b38a",
"siteName": "Texas"
},
"patientId": "100"
}
}]}}
}]);
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-controller="Controller">
<table>
<tr>
<th>Id</th>
<th>Description</th>
</tr>
<tr ng-repeat="m in myData.PatientSearchResponse.patDataBean">
<td>{{m.patientIdentifier.patientId}}</td>
<td>{{m.patSurvivalStat.description}}</td>
</tr>
</table>
</body>
</html>
Would be more practical to make columns an array of objects with standardized keys
$scope.grid.columns = [
{property : 'patientIdentifier', heading : "Patient Id"},
{property : 'patFirstName', heading : "First Name"},
{property : 'patLastName', heading : "Last Name"},
{property : 'patDateofBirth', heading : "Date of Birth"},
{property : 'patSurvivalStat', heading : "Description"}
]
Then use those to set both headings and content
<table>
<thead>
<tr>
<th ng-repeat="col in grid.columns">{{::col.heading}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in myData.patDataBean">
<td ng-repeat="col in grid.columns">{{::item[col.property]}}</td>
</tr>
</tbody>
</table>
I have an object that looks like this:
{
"10": {},
"12": {
"20": {
"value": 1,
"id": 1,
},
"100": {
"value": 12,
"id": 1,
}
},
"14": {
"100": {
"value": 14,
"id": 2,
}
},
"16": {},
"18": {},
"20": {
"100": {
"value": 23,
"id": 1,
},
"150": {
"value": 56,
"id": 3,
}
},
"22": {},
"24": {},
"26": {
"50": {
...
I want to create a table based on this object that should be like this:
I am not sure how to create this table though, by using the correct combination of repeats. I am currently trying at this:
<table>
<thead>
<tr>
<th>type</th>
<th>module</th>
<th>value</th>
<th>id</th>
</tr>
</thead>
<tbody>
<tr ng-repeat-start="(row1, value1) in TestData">
<td rowspan="{{value1.length}}">{{row1}}</td>
<td ng-repeat="(label2, value2) in value1">{{label2}}</td>
</tr>
</tbody>
</table>
At first sight, you could do something like that by inserting a <tbody> (more information here: Angular.js ng-repeat across multiple tr's)
var myAppModule = angular.module('myApp', []).controller('MyController', MyController);
function MyController() {
// https://stackoverflow.com/questions/1345939/how-do-i-count-a-javascript-objects-attributes
this.objectCount = function(obj) {
return Object.keys(obj).length;
}
this.data = {
"10": {},
"12": {
"20": {
"value": 1,
"id": 1,
},
"100": {
"value": 12,
"id": 1,
},
"200": {
"value": 120,
"id": 10,
}
},
"14": {
"100": {
"value": 14,
"id": 2,
}
},
"16": {},
"18": {},
"20": {
"100": {
"value": 23,
"id": 1,
},
"150": {
"value": 56,
"id": 3,
}
},
"22": {},
"24": {}
};
}
table,
th,
td {
border: 1px solid black;
}
table {
border-collapse: collapse;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyController as ctrl">
<table>
<thead>
<tr>
<th>type</th>
<th>module</th>
<th>value</th>
<th>id</th>
</tr>
</thead>
<tbody ng-repeat="(row1, value1) in ctrl.data" ng-switch="ctrl.objectCount(value1) === 0">
<tr ng-switch-when="true">
<td>{{row1}}</td>
<td colspan="3"></td>
</tr>
<tr ng-switch-when="false" ng-repeat="(row2, value2) in value1">
<td ng-if="$index === 0" rowspan="{{ctrl.objectCount(value1)}}">
{{row1}}
</td>
<td>{{row2}}</td>
<td>{{value2.value}}</td>
<td>{{value2.id}}</td>
</tr>
</tbody>
</table>
</div>
If you need something more refined with merging of rows and columns, you should think to build a more oriented view objects, so that the template is simpler, and your business logic is in JavaScript.
I have a json data with arrays of parameters like Sales, Tax etc. On click of a particular parameter from one page, the landing page should show the table for that particular parameter.
{
"Sales": [
{
"Date": "2015-08-01 23:35:15.652",
"Val": 78
},
{
"Date": "2015-08-01 22:35:15.652",
"Val": 82
},
{
"Date": "2015-08-01 21:35:15.652",
"Val": 80
},
{
"Date": "2015-08-01 21:15:15.652",
"Val": 100
},
{
"Date": "2015-07-27 12:57:15.652",
"Val": 94
}
],
"Tax": [
{
"Date": "2015-08-01 23:35:15.652",
"Min": 78,
"Max":150
},
{
"Date": "2015-08-01 22:35:15.652",
"Min": 50,
"Max":120
},
{
"Date": "2015-08-01 21:35:15.652",
"Min": 65,
"Max":150
},
{
"Date": "2015-08-01 21:25:15.652",
"Min": 70,
"Max":190
},
{
"createdOn": "2015-08-01 21:15:15.652",
"Min": 90,
"Max":200
}
]
}
My controller
angular.module('starter.controllers', [])
.controller('TableCtrl','$scope', '$http', function($scope, $http) {
$http.get('js/data.json').success(function(response){
if(response.data.Sales!=null){
$scope.data =response.data.Sales;
}
if(response.data.Tax!=null){
$scope.data =response.data.Tax;
}
});
});
How do I show table dynamically from the data? Since Sales table will contain 2 columns and Tax table will contain 3 columns.
Table for Sales
<table ng-controller="TableCtrl">
<thead>
<th>
<td>Date</td>
<td>Value</td>
</th>
</thead>
<tbody>
<tr ng-repeat="item in data">
<td>{{item.Date}}</td>
<td>{{item.Val}}</td>
</tr>
</tbody>
</table>
Table for Tax
<table ng-controller="TableCtrl">
<thead>
<th>
<td>Date</td>
<td>Min</td>
<td>Max</td>
</th>
</thead>
<tbody>
<tr ng-repeat="item in data">
<td>{{item.Date}}</td>
<td>{{item.Min}}</td>
<td>{{item.Max}}</td>
</tr>
</tbody>
</table>
How to display different tables based on condition using same Controller, TableCtrl?
In your controller, separate data into $scope.sales and $scope.tax:
if(response.data.Sales != null){
$scope.sales = response.data.Sales;
$scope.tax = null;
}
if(response.data.Tax != null){
$scope.tax = response.data.Tax;
$scope.sales = null;
}
Then, in html use ng-if directive:
<div ng-controller="TableCtrl">
<table ng-if = "sales">
<thead>
<th>
<td>Date</td>
<td>Value</td>
</th>
</thead>
<tbody>
<tr ng-repeat="item in sales">
<td>{{item.Date}}</td>
<td>{{item.Val}}</td>
</tr>
</tbody>
</table>
<table ng-if = "tax">
<thead>
<th>
<td>Date</td>
<td>Min</td>
<td>Max</td>
</th>
</thead>
<tbody>
<tr ng-repeat="item in tax">
<td>{{item.Date}}</td>
<td>{{item.Min}}</td>
<td>{{item.Max}}</td>
</tr>
</tbody>
</table>
</div>
If you have a set of fixed types such as Sales, Tax etc., the hard coded version like #Majid provided is fine. However, you could make a more dynamic version where the table adjusts to the json arrays provided.
Consider the following data:
var data={
"Sales": [
{
"Date": "2015-08-01 23:35:15.652",
"Val": 78
},
{
"Date": "2015-08-01 22:35:15.652",
"Val": 82
},
{
"Date": "2015-08-01 21:35:15.652",
"Val": 80
},
{
"Date": "2015-08-01 21:15:15.652",
"Val": 100
},
{
"Date": "2015-07-27 12:57:15.652",
"Val": 94
}
],
"Tax": [
{
"Date": "2015-08-01 23:35:15.652",
"Min": 78,
"Max":150
},
{
"Date": "2015-08-01 22:35:15.652",
"Min": 50,
"Max":120
},
{
"Date": "2015-08-01 21:35:15.652",
"Min": 65,
"Max":150
},
{
"Date": "2015-08-01 21:25:15.652",
"Min": 70,
"Max":190
},
],
"Inventory": [
{
"Type": "Car",
"Amount": 100,
},
{
"Type": "Bike",
"Amount": 32,
},
{
"Type": "Shoes",
"Amount": 677,
},
]
};
Controller:
function mainCtrl() {
this.data=data;
}
angular
.module('app', [])
.controller('mainCtrl', mainCtrl);
The below html code will now use the first object in each array to print out the property names, and then print each object from the array into to the table accordingly.
<body ng-controller="mainCtrl as main">
<div ng-repeat="(name, table) in main.data">
<h3>{{name}}</h3>
<table>
<thead>
<tr>
<!-- Iterate and print field names -->
<th ng-repeat="(key, value) in table[0]">{{key}}</th>
</tr>
</thead>
<tbody>
<!-- Print rows -->
<tr ng-repeat="row in table">
<td ng-repeat="value in row">{{value}}</td>
</tr>
</tbody>
</table>
</div>
</body>
Live example here: http://jsbin.com/pafanuwoka/edit?html,js,output
Having this solution you need to make sure that all objects in each array are alike as we are printing the field names from the first object in each array. But you are also able to add more json arrays into data field.
If this is a common occurrence in your application, you should probably consider adding this as a directive. Example here: http://jsbin.com/gayirinifo/edit?html,js,output