Two JSON variables into nested tables in HTML task form

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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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.