I have a 2D array in a JSON object (called table ;)
data = {
tableID : "testTable",
table : [
[{type:'a', value:'x'},{type:'a', value:'y'},{type:'a', value:'z'}],
[{type:'a', value:'x'},{type:'a', value:'y'},{type:'a', value:'z'}],
[{type:'a', value:'x'},{type:'a', value:'y'},{type:'a', value:'z'}]
]
};
And have been successfully rendering it out with handlebars using the template:
<table id = "{{tableID}}-table">
{{#each table}}
<tr id = "{{../tableID}}-row-{{#index}}">
{{#each this}}
<td id = "{{../../tableID}}-row-{{../index}}-col-{{#index}}">
{{this.type}}-{{this.value}}
</td>
{{/each}}
</tr>
{{/each}}
</table>
However, in the td tag id I can't seem to access the parent index
{{../index}} - the index of the row. Nothing is returned:
<td id = "testTable-row--col-x">
However, I can access the index of the current context {{#index}}.
Any ideas??
Many many thanks in advance!!
Rich
p.s. Using 1.0.0-rc.3
This is an open issue/feature on handlebar. You can check the progress for the same here
However you can check the workaround here
Since Handlebars version 2.0.0, you can use
{{#../index}}
Related
I'm developing a website with laravel where I've a json response from server with a blade.php view like below,
[{"id":1,"user_id":"1","patient_name":"kk","age":"44","sex":"Male"},
{"id":2,"user_id":"1","patient_name":"noor","age":"7","sex":"Male"},
{"id":3,"user_id":"1","patient_name":"noor","age":"44","sex":"Male"}]
How can I iterate through this json object so that I can show the data in a table with patient_name,age,sex column in blade.php?
First you would have to convert the JSON to an array with $array_data = json_decode($array, true), then you can pass the data to your view with return view('page', ["array_data"=>$array_data]);, next you would have to parse it in blade like:
<table>
<tr>
<td>id</td>
<td>User id</td>
<td>Patient name</td>
<td>Age</td>
<td>Sex</td>
</tr>
#foreach($array_data as $key=>$value){
<tr>
<td>{{$value["id"]}}</td>
<td>{{$value["user_id"]}}</td>
<td>{{$value["patient_name"]}}</td>
<td>{{$value["age"]}}</td>
<td>{{$value["sex"]}}</td>
</tr>
#endforeach
And so your code in your controller would be:
$array_data = json_decode($array, true);
return view('page', ["array_data"=>$array_data]);
Note that the string page must be the name of your blade template minus the .blade.php, i.e. if your template is called page.blade.php you would use the string page
I have a grid with checkbox, I am putting checked values in an array (currentFocusedRow), now I want to assign activeRow class to the checked row:
// app.ts
class contact {
public contactlist = [{icontact_id: "contact1"}, {icontact_id: "contact2"}, {icontact_id: "contact3"}, {...}];
public currentFocusedRow = ["contact2", "contact3"];
}
// app.html
<tr *ngFor="let contact of contactlist"
[class.activeRow]="contact.icontact_id == currentFocusedRow">
...
</tr>
now since currentFocusedRow is an array i can't simply check like that (contact.icontact_id == currentFocusedRow) there should be something to check if the value is present in that array or not like indexOf.
I think this should work for you:
Typescript
isActive(id) {
return this.currentFocusedRow.indexOf(id) !== -1
}
HTML
<tr *ngFor="let contact of contactlist"
[class.activeRow]="isActive(contact.icontact_id)">
</tr>
You can use index of the object that is current object, by using:
<tr *ngFor="let contact of contactlist; let i = index">
Which will enable you to get those indexes.
Apart from that, you can just use NgClass directive.
Checking with indexOf in directive itself worked, this is pretty amazing that we can use this JS methods directly in DOM:
<tr *ngFor="let contact of contactlist;"
[class.activeRow]="currentFocusedRow.indexOf(contact.icontact_id) != '-1'">
</tr>
I have developed a ngtable with a filter. The pagination on the table does not work anymore though? When I select the show 10 rows on the bottom of the table it still shows 14 rows? How can i fix the pagination/indexing?
This is my table definition:
<table ng-table="tableParams" class="table">
<tr ng-repeat="account in $parent.filtered =(data | filter:search.accountName | filter:search.id)">
<td data-title="'id'">
{{account.account.accountId.id}}
</td>
<td data-title="'name'">
{{account.account.accountName}}
</td>
</tr>
</table>
plunkr:http://plnkr.co/edit/Rqt6px?p=preview
You need to figure pagination function by yourself. You may see ng-table's example in here.
var Api = $resource("/data");
this.tableParams = new NgTableParams({}, {
getData: function(params) {
// ajax request to api
return Api.get(params.url()).$promise.then(function(data) {
params.total(data.inlineCount); // recal. page nav controls
return data.results;
});
}
});
It first load all the data into Api. The params.url() contains current page and page count. It then use these two variable to return part of dataset. So you may need to figure out how to return this part of data.
Each click on my google Map adds new data to my array.
I have this array:
tableDATA = [{range:[],distances:[]}];
This are the push commands in the click function:
"total" and "round" are calculated integers
tableDATA[0].distances.push(total+' km');
tableDATA[0].range.push(round+' km');
This is my ng-table params code in javascript
$scope.tableParams = new ngTableParams(
{
page: 1, // show first page
count: 15, // count per page
sorting: {
distances: 'asc' // initial sorting
}
},
{
total: tableDATA[0].distances.length, // length of data
getData: function($defer, params) {
// use build-in angular filter
var orderedData = params.sorting() ?
$filter('orderBy')(tableDATA, params.orderBy()) : tableDATA;
$defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
}
}
);
And this is my ng-table code in html
<button ng-click="tableParams.sorting({})" class="btn btn-default pull-right">Clear sorting</button>
<p><strong>Sorting:</strong> {{tableParams.sorting()|json}}</p>
<table ng-table="tableParams" class="table">
<tr ng-repeat="point in $data">
<td data-title="'real'" sortable="'real'">{{point.distances}}</td>
<td data-title="'Kombi'" sortable="'Kombi'">{{point.range}}</td>
</tr>
</table>
The entries in the array won't be shown in multiple lines (one entry per line) but in one line with all array entries:
real Kombi
line 1: ["50.32 km","50.89 km", etc.] ["44.32 km","48.65 km", etc.]
line 2: won't be created
line 3: won't be created
What's wrong? Pls help
try using an angular foreach see https://docs.angularjs.org/api/ng/function/angular.forEach
I don't come to the right solution with forEach because I have an array behind the keys and no static values.. ?!
var tableDATA_arr = [];
tableDATA = {range:[],distances:[]};
tableDATA.distances.push(total+' km');
tableDATA.range.push(round+' km');
angular.forEach(tableDATA, function(value, key) {
this.push(key + ': ' + value);
}, tableDATA_arr);
<tr ng-repeat="point in $data">
<td><tr ng-repeat="distance in point.distances">
<td data-title="'real'" sortable="'real'">{{distance}}</td>
</tr></td>
then do the same for the other column
This is my code now. The data is retrievable(!), but the data still will be written in one line -.- i hate it :D
<tr ng-repeat="point in $data">
<td ng-repeat="dist in point.distances track by $index" data-title="'real'" sortable="'real'">
{{dist}}
</td>
<td ng-repeat="range in point.range track by $index" data-title="'Kombi'" sortable="'Kombi'">
{{range}}
</td>
</tr>
I found the mistake.
First the table data array had a structure like this: tableDATA = [{range:[],distances:[]}];
There was only one object at all times and only the arrays in this one object got filled.
I changed the table data array to: tableDATA = []; and per each click I fill the array with a new object like this: tableDATA.push({range:round+' km',distances:total+' km'});
Now it works fine :)
First off please don't bash me for using old technology (polling) and an old version of Mootools (1.3.2) as I don't have control over these factors.
Ok here's my problem.
I have a page which refreshes every few seconds to fetch new data from the database via AJAX. Ideally the structure of the returned value should be as such:
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
After receiving this table row structure result, I need to append that to the current table in the page which essentially just adds a new record on the table if there are new records. If there's none, then no changes to the table are made.
Currently I am using
var req = new Request.HTML({url: url_to_get_new_rows,
onSuccess: function(html, responseHTML) {
// append table row 'html' here
}
}).send();
However, the returned value in the 'html' variable that I'm supposed to append at the end of the table only returns
1 2 3 4
This obviously is an undesired behavior as I need the tr and td elements to make it work.
I hope someone could help me with this problem.
THANKS!
Javascript:
new Request.HTML({
url:'tr.php',
onSuccess: function(responseTree, responseElements, responseHTML, responseJavaScript) {
var tbody = document.id('tbody');
tbody.set('html', tbody.get('html') + responseHTML);
// or
var tr = new Element('table', {'html': responseHTML}).getElement('tr');
tr.inject(tbody);
}
}).get();
HTML:
<table>
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
</tr>
</thead>
<tbody id="tbody">
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
</tbody>
</table>