Hi,
I have two SpinJsonNodes variables:
[{“orderId”:1,“orderNo”:“5674”},
{“orderId”:2,“orderNo”:“234”},
{“orderId”:3,“orderNo”:“3545”}]
and
[{“orderlineId”:1,“orderlineOrderId”:1},
{“orderlineId”:2,“orderlineOrderId”:1},
{“orderlineId”:3,“orderlineOrderId”:1},
{“orderlineId”:4,“orderlineOrderId”:2},
{“orderlineId”:5,“orderlineOrderId”:2},
]
The second one has a link to the first one.
I want to show the linked data in an HTML form.
I have difficulties to show nested data in tables.
I can show the data from the first JSON data but cannot filter the second JSON:
> <form class="form-horizontal" role="form">
> <table name ="table" id="myTable" class="table table-hover table-list-search" data-table="order-table" style="width:100%;" cellspacing="0">
> <thead>
> <tr>
> <th style="width:140px;">Order Id</th>
> <th style="width:305px;">Order No</th>
> <th> </th>
> </tr>
> </thead>
> <tbody ng-repeat="item in orders_json" >
> <tr>
> <td>{{item.orderId}}</td>
> <td>{{item.orderNo}}</td>
> </tr>
> <tr>
> <table name ="table" id="myOtherTable" class="table table-hover table-list-search" data-table="orderline-table" style="width:100%;" cellspacing="0">
> <thead>
> <tr>
> <th style="width:140px;">Orderline Id</th>
> <th style="width:305px;">Orderline OrderId</th>
> <th> </th>
> </tr>
> </thead>
> <tbody ng-repeat="it in orderlines_json | filter:{it.orderlineOrderId}={item.orderId}" >
> <tr>
> <td>{{it.orderlineId}}</td>
> <td>{{it.orderlineOrderId}}</td>
> </tr>
> </tbody>
>
> </table>
> </tbody>
>
> </table>
>
>
> <script cam-script type="text/form-script">
> var variableManager = camForm.variableManager;
>
> camForm.on('form-loaded', function() {
> // fetch the variables
> variableManager.fetchVariable('orders_json');
> variableManager.fetchVariable('orderlines_json');
> });
>
> camForm.on('variables-fetched', function() {
> <!--// this callback is executed *after* the variables have been fetched from the server-->
> $scope.orders_json= variableManager.variable('orders_json').value;
> $scope.orderlines_json= variableManager.variable('orderlines_json').value;
>
> });
>
> </script>
>
> </form>
I used the following filter and worked:
<tbody ng-repeat="it in orderlines_json | filter:{orderlineOrderId:orderId}" >
but the results are not shown in right order. First all the orders are shown and then all orderlines.
While it should be orderlines under the corresponding order.
Hi @kontrag, here are some hints:
- Regarding the first table you should not ng-repeat tbody (since this will create n copies of tbody). Instead, you should ng-repeat the tr (to create n rows).
- Regarding nesting the table: in general, when you want to nest an html table, you can do so by inserting the table in a td.
Note: this a general HTML/JS question. This forum is only intended to help questions that involve Camunda.
Hi @siffogh,
Indeed, that’s a general HTML question.
Just to close the topic, I tried your first hint and didn’t really work.
The second hint worked (putting the nested table inside
of the first table)!
<form class="form-horizontal" role="form">
<table name ="table" id="myTable" class="table table-hover table-list-search" data-table="order-table" style="width:100%;" cellspacing="0">
<thead>
<tr>
<th style="width:140px;">Order Id</th>
<th style="width:305px;">Order No</th>
<th> </th>
</tr>
</thead>
<tbody ng-repeat="item in orders_json" >
<tr>
<td>{{item.orderId}}</td>
<td>{{item.orderNo}}</td>
<td>
<table name ="table" id="myOtherTable" class="table table-hover table-list-search" data-table="orderline-table" style="width:100%;" cellspacing="0">
<thead>
<tr>
<th style="width:140px;">Orderline Id</th>
<th style="width:305px;">Orderline OrderId</th>
<th> </th>
</tr>
</thead>
<tbody ng-repeat="it in orderlines_json | filter:{orderlineOrderId : item.orderId}" >
<tr>
<td>{{it.orderlineId}}</td>
<td>{{it.orderlineOrderId}}</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<script cam-script type="text/form-script">
var variableManager = camForm.variableManager;
camForm.on('form-loaded', function() {
// fetch the variables
variableManager.fetchVariable('orders_json');
variableManager.fetchVariable('orderlines_json');
});
camForm.on('variables-fetched', function() {
<!--// this callback is executed *after* the variables have been fetched from the server-->
$scope.orders_json= variableManager.variable('orders_json').value;
$scope.orderlines_json= variableManager.variable('orderlines_json').value;
});
</script>
</form>
Cheers
|
As I mentioned before, having multiple tbodys is wrong.
The following should work:
<table name ="table" id="myTable" class="table table-hover table-list-search" data-table="order-table" style="width:100%;" cellspacing="0">
<thead>
<tr>
<th style="width:140px;">Order Id</th>
<th style="width:305px;">Order No</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in orders_json">
<td>{{item.orderId}}</td>
<td>{{item.orderNo}}</td>
<td>
<table name ="table" id="myOtherTable" class="table table-hover table-list-search" data-table="orderline-table" style="width:100%;" cellspacing="0">
<thead>
<tr>
<th style="width:140px;">Orderline Id</th>
<th style="width:305px;">Orderline OrderId</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr ng-repeat="it in orderlines_json | filter:{orderlineOrderId : item.orderId}">
<td>{{it.orderlineId}}</td>
<td>{{it.orderlineOrderId}}</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
1 Like
That solution I tried as well and worked (at an acceptable level of presenting data).
Thanks!
Hi,
I noticed an interesting thing when I complete the task with the above task-form.
In the object I retrieve, right after the completion of the task I see and extra property.
[{“orderId”:1,“orderNo”:“5674”,”$$hashKey”:”1GA”}
{“orderId”:2,“orderNo”:“234”,”$$hashKey”:”2SV”},
{“orderId”:3,“orderNo”:“3545”,”$$hashKey”:”4DF”}]
Any idea how it comes from?
Edit: I found out that it’s the POST complete that adds this (propably it uses JSON.stringify(obj) while it could be angular.toJson(obj)). I solved it by using “track by $index” in ng-repeat.