We Keep Coding

Getting key for table-head and value for table-cell vue.js

I have response from backend like this:
{
"responseData": [
{
"count": 1,
"startTime": "11.01.2017 12:25",
"endTime": "11.01.2017 12:26",
"code": "ABC"
},
{
"count": 1,
"startTime": "11.01.2017 13:50",
"endTime": "11.01.2017 13:51",
"code": "ABC"
},
{
"count": 1,
"startTime": "11.01.2017 14:05",
"endTime": "11.01.2017 14:06",
"code": "ABC"
},
{
"count": 1,
"startTime": "11.01.2017 14:35",
"endTime": "11.01.2017 14:36",
"code": "ABC"
},
{
"count": 1,
"startTime": "11.01.2017 14:45",
"endTime": "11.01.2017 14:46",
"code": "ABC"
},
{
"count": 1,
"startTime": "11.01.2017 15:35",
"endTime": "11.01.2017 15:36",
"code": "ABC"
}
]
}
I will have more data in array. This table depends on user's input.
I want my table like
<md-table>
<md-table-header>
<md-table-row id="header" v-for="value in responseData">
<md-table-cell>{{ value.key }}</md-table-cell> // for each key in response one table cell
</md-table-row>
</md-table-header>
<md-table-body>
<md-table-row v-for="(row, index) in responseData" :key="index">
<md-table-cell>{{response.value}}</md-table-cell> //for each key table cell value
</md-table-row>
</md-table-body>
</md-table>
Something like this but I want it dynamic. http://codepen.io/zupa10/pen/OpJJEM
As I said one time i will have 4 things in array like count, startTime, endTIme and code, and other times i'll have this and 5 more things, maybe totally new things in response.
Any suggestion how can I do that?
UPDATE:
I did this with vue.js grid component and it works just fine for me. Here's the link https://v2.vuejs.org/v2/examples/grid-component.html.

This is pretty tricky to figure out. I'm sure there is a better way to do this, but I added additional info to my json data.
This example renders multiple tables but otherwise, it should work for you.
Example output looks like this:
<table (v-for loop on tables)>
<th (this is for table name, since I have multiple tables)> output == Member Company </th>
<td (for heading)> output == Company Name</td><td (for value)> output == Company ABC</td>
</table>
Here is the loop structure in vue.js:
<table v-for="(section_item, section_key) in results" class="table table-condensed" v-bind:id="section_item.section_id" data-id="{{$member->id}}">
<thead>
<tr>
<th colspan="3">{{section_item.section_name}}</th>
</tr>
</thead>
<tbody>
<tr v-for="(field_item, field_key) in section_item.field_data">
<td>{{field_item.name}}</td>
<td>
<a class="edit" v-bind:id="field_item.id">{{field_item.value}}</a>
</td>
</tr>
</tbody>
</table>
"results": [
{
"section_name": "Member Company",
"section_id": "company_info",
"field_data": {
"0-company_name": {
"name": "Company Name",
"id": "company_info-company_name",
"type": "string",
"required": "1",
"value": "Company ABC"
},
"1-member_type": {
"name": "Member Type",
"id": "company_info-member_type",
"type": "string",
"required": "1",
"value": "Affiliate"
},
...

Angularjs ng-repeat with filter scope object

I have a requirement to filter rows in ng-repeat based on whats in $scope.filterObject. I have a data in $scope.customerData that contains all the customer information, but when looping through each customer, I would only like to show results based on whats in $scope.filterObject. For example, only show rows of customers that have jobs that are in $scope.filterObject.
Here is the JSFiddle link.
Here is what I have so far:
HTML:
<table ng-app="app" ng-controller="AppsCtrl">
<thead>
<tr>
<th>+</th>
<th>Name</th>
<th>Email</th>
<th>DOB</th>
<th>Hobby</th>
</tr>
</thead>
<tbody ng-repeat="customer in customerData">
<tr>
<td>+</td>
<td>{{customer.name}}</td>
<td>{{customer.email}}</td>
<td>{{customer.DOB}}</td>
<td>{{customer.Hobby}}</td>
</tr>
<tr class="showhide">
<td> </td>
<td>Degree</td>
<td>{{customer.Degree}}</td>
<td>Job title</td>
<td>{{customer.Job}}</td>
</tr>
<tr class="showhide">
<td></td>
<td>Country</td>
<td>{{customer.Country}}</td>
<td>City</td>
<td>{{customer.City}}</td>
</tr>
</tbody>
</table>
JS:
// AngularJS toggle table
var app = angular.module('app', []);
app.controller('AppsCtrl', function($scope) {
$scope.expandTable = function() {
console.log($(event.target).closest('tr').nextUntil("tr.main"));
$(event.target).closest('tr').nextUntil("tr.main").slideToggle();
// console.log($(event.currentTarget).parent().parent());
}
var data = [{
"name": "John",
"email": "JSmith#yahoo.com",
"DOB": "01/05/1968",
"Degree": " BSC",
"Job": "Engineer",
"Hobby": "Football",
"Country": "US",
"City": "Houston"
}, {
"name": "Jessica",
"email": "Jess#yahoo.com",
"DOB": "03/05/1976",
"Degree": " Accounting",
"Job": "CPA",
"Hobby": "Video games",
"Country": "US",
"City": "Fredericks"
}, {
"name": "Andrew",
"email": "AJoan#yahoo.com",
"DOB": "06/12/1998",
"Degree": " PHD",
"Job": "Professor",
"Hobby": "Writing",
"Country": "US",
"City": "San Diago"
}, {
"name": "Rich",
"email": "Rschol#yahoo.com",
"DOB": "09/21/1988",
"Degree": " PHD",
"Job": "Technician",
"Hobby": "Writing",
"Country": "US",
"City": "San Diago"
}];
$scope.customerData = data;
$scope.filterObject = [{
"Job": "CPA"
}, {
"Job": "Engineer"
}]
});
\
Any suggestion and help is really appreciated. :)

You can use angular filter function in ng-repeat to compare customerArray with customerObject and then return only element that match customerObject properties.
//Instead of array
$scope.filterObject = {
"Job": "CPA"
};
HTML :
<tr ng-repeat="customer in customerData | filter: filterObject">
Otherwise you can create a custom filter function to compare field or array of fields :
app.filter('customerFilter', function() {
return function( items, filterParams) {
var filtered = [];
angular.forEach(items, function(item) {
if(filterParams.Job.indexOf(item.Job) !== -1) {
filtered.push(item);
}
});
return filtered;
};
});
HTML :
<tr ng-repeat="customer in customerData | customerFilter: filters">
Customer controller:
$scope.filters = {
"Job" :["Technician","CPA"]
}
working example here : https://jsfiddle.net/Nedev_so/wb1hqeca/

$scope.customerData = data.filter(function(user){
var found = false;
$scope.filterObject.forEach(function(filter){
if(filter.Job === user.Job)
found = true;
})
return found;
});
Fiddle: https://jsfiddle.net/nandorpersanyi/yLsxqkx8/
Regarding Nedev's answer:
DOM filters can have an impact on performance, presuming we are handling large datasets (eg $scope.customerData has thousands of customers). In this case you are better off filtering within the controller, unless you need user interaction with the filter. And if your filter object updates dynamically, just $watch it for changes, then rerender customerData when changed

Access the certain key of json response [AngularJS]

Here is my angular code
$scope.StartCPU = function () {
//Initialize the Timer to run every 1000 milliseconds i.e. one second.
$scope.GetCPUData = $interval(function(){
$http.get('http://localhost:3034/api/test/metrics').
success(function(data, status, headers, config) {
$scope.Details = data;
});}, 1000);
};
Html code as follows
<div ng-controller="HttpGetController">
<button ng-click="StartCPU()">Get All Data</button>
<h1>CPU data</h1>
<pre>{{Details | json}}</pre>
</div>
I am getting the response as below
{
"data": [
{
"_id": "57ee5641931b429431085fc4",
"system": 0.06249,
"process": 0.0091652,
"timestamp": "2016-09-30T12:10:40.780Z",
"__v": 0,
"createdAt": "2016-09-30T12:10:41.927Z"
}
]
}
Now I want to access the value of the keys "system" and "process". How can I do it?

data.data[0].system
and data.data[0].process
Explanation: Here your data is an Object with property data.
//complete thing is your response data
{
"data": [ // data.data <--array
{ // data.data[0] <--first object of the array
"_id": "57ee5641931b429431085fc4",
"system": 0.06249,// data.data[0].system <--its property
"process": 0.0091652,
"timestamp": "2016-09-30T12:10:40.780Z",
"__v": 0,
"createdAt": "2016-09-30T12:10:41.927Z"
}
]
}

In your data object that you get from the call, you have the propertydata which is an array
You should then call the first element of the array
data.data[0]
Which will return you
{
"_id": "57ee5641931b429431085fc4",
"system": 0.06249,
"process": 0.0091652,
"timestamp": "2016-09-30T12:10:40.780Z",
"__v": 0,
"createdAt": "2016-09-30T12:10:41.927Z"
}
Then you call the elements that you need
data.data[0].system
data.data[0].process

It means it returns an array, may you can use something like this:
<table class="table datatable">
<thead>
<tr>
<th>system</th>
<th>process</th>
</tr>
</thead>
<tbody ng-repeat="detail in Details">
<tr>
<td>{{detail.system}}</td>
<td>{{detail.process}}</td>
</tr>
</tbody>
</table>

AngularJS deep filter through array in ng-repeat

My question is looking similar to other questions. But it is different.
Please take a look of below code.
I want to filter data by an array of objects.
Here is the snippet
HTML
<div
ng-repeat="(key, value) in ledgerData.ledgers track by $index"
ledger-pop
index="$index"
ftype="ftypeUpdate"
itemdata="value"
acntlist="fltAccntList"
class='drEntryForm_{{$index}} pr'
name='drEntryForm_{{$index}}'
update-ledger="updateEntry(entry)"
novalidate
>
</div>
JS
$scope.ledgerDataata = {
"ForwardedBalance": {
"amount": 0,
"type": "CREDIT"
},
"creditTotal": 4008,
"debitTotal": 4008,
"balance": {
"amount": 4008,
"type": "CREDIT"
},
"ledgers": [
{
"transactions": [
{
"particular": {
"name": "Sarfaraz",
"uniqueName": "temp"
},
"amount": 1001,
"type": "DEBIT"
}
],
"description": "testing",
"tag": "testing"
},
{
"transactions": [
{
"particular": {
"name": "frnd",
"uniqueName": "frndafafaf14453422453110l26ow"
},
"amount": 2001,
"type": "CREDIT"
},
{
"particular": {
"name": "Rahul",
"uniqueName": "cake"
},
"amount": 3001,
"type": "DEBIT"
}
],
"description": "testing",
"tag": "testing",
}
]
}
I am trying to filter by
ng-repeat="(key, value) in ledgerData.ledgers track by $index | filter:{transactions[0]:{type: 'DEBIT'}}"
But am getting error
thanks in advance :-)

You need to write nested ng-repeat to solve this problem.
outer ng-repeat for the array ledgerData.ledgers and
inner ng-repeat for transaction array in ledgerData.ledgers
<div ng-repeat="(keyOne, ledger) in ledgerData.ledgers track by $index">
{{ledger.description}}
<div ng-repeat="(keyTwo, transaction) in ledger.transactions | filter:{type:'DEBIT'}">
{{transaction.type}}
</div>
</div>

Actually I got the solution.
I've googled hardly and got a library for angularjs-filter.
Here is the link it is very good plugin for filter dirty works and how to use it.
How I got success:
html
ng-repeat="(key, value) in ledgerData.ledgers | pick: debitOnly track by $index"
AngularJS
$scope.debitOnly = (ledger) ->
'DEBIT' == ledger.transactions[0].type
that's it.

populate datatable from a local json file

I am trying to populate my datatable using a JSON file (jsontext.json) I tried almost all the resources but can't work this one out. I have tried all the stackoverflow resources. This question is different than the one that are posted.
If I could just get the JSON file into the my jsonObject then the rest I can figure out.
The Json file is stored in my c:\path\jsontext.json
Here is the json file
[
{
"Identifier": "1",
"Label": "pratik",
"Categories": "Standard",
"UpdatedBy": "lno",
"UpdatedAt": "01-02-2013"
},
{
"Identifier": "2",
"Label": "2013",
"Categories": "Standard",
"UpdatedBy": "lno",
"UpdatedAt": "01-02-2013"
}
]
I tried the following js code to get the file into jsonObject
var myObject;
$.ready(function(){
myObject={};
$.getJSON('http://localhost:8080/jsontext.json', function(data){
/* here I have tried using both the paths the c:\path\jsontext.json and the one above */
myObject=data;
});
});
Once i have it into the JsonObject I can use the following code to populate the datatable
$(document).ready(function(){
$('#example').dataTable
( {
"sScrollY": "200px",
"bPaginate": false,
"bScrollCollapse": true,
aaData:myObject,
"aoColumns":
[
{ "mData": "Identifier" },
{ "mData": "Label" },
{ "mData": "Categories" },
{ "mData": "UpdatedBy" },
{ "mData": "UpdatedAt" },
{ "sClass": "getimage"},
{ "sClass": "editimage"},
{ "sClass": "deleteimage"}
]
});
});
Here is my html body in my jsp page
<body id="dt_example">
<div id="container">
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
<thead>
<ul>
<li> Add Code Edit</li>
<li> Import</li>
<li> Export</li>
</ul>
<tr>
<th>Identifier</th>
<th>Label</th>
<th>Categories</th>
<th>UpdatedBy</th>
<th>UpdatedAt</th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Data 1</td>
<td>Row 1 Data 2</td>
<td>Row 1 Data 3</td>
<td>Row 1 Data 4</td>
<td>Row 1 Data 5</td>
<td class="getimage"></td>
<td class="editimage"></td>
<td class="deleteimage"></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
can Anyone tell me where I am going wrong.

Actually, if you see the server response in developer tools you can find the data that is received. As far as I have worked with the dataTables, the json file must contain a "key" for the whole data, otherwise it wont have any reference.
Try modifying your json as follows:
{
"mydata":[
{
"Identifier": "1",
"Label": "pratik",
"Categories": "Standard",
"UpdatedBy": "lno",
"UpdatedAt": "01-02-2013"
},
{
"Identifier": "2",
"Label": "2013",
"Categories": "Standard",
"UpdatedBy": "lno",
"UpdatedAt": "01-02-2013"
}
]
}
if you want to use the json object other than "aaData", you can use "sAjaxDataProp" of the datatable to specify the respective object.

Looks like the problem could be that your ajax is loading and setting the myObject variable but it is done after Datatables initialized so it does not get the updated myObject variable after your request has finished. You could do something like this to fix that:
var myObject;
$.ready(function(){
myObject={};
$.getJSON('http://localhost:8080/jsontext.json', function(data){
/* here I have tried using both the paths the c:\path\jsontext.json and the one above */
myObject=data;
$('#example').dataTable().fnAddData(myObject);
});
});

Thanks for the replys every one I got the answer I tried out thanks though.
var someData=JSON.parse(document.getElementById("populate-holdingBin").innerHTML);
oTables=$('#someReport').dataTable
({
"bJQueryUI":true,
"bScrollCollapse":true,
aaData:someData,
"aoColumns":
[ ...etc etc.............................. ]
});