Cannot Pass Object from Action Class to JSP

Question

I use Struts 2 with Convention plugin combined with AngularJS. I have an action class and JSP as below:

IndexAction.java:

package sm.hris.struts2.base.modules.order;

import java.util.ArrayList;
import java.util.Date;

import org.apache.struts2.convention.annotation.InterceptorRef;
import org.apache.struts2.convention.annotation.ParentPackage;
import org.apache.struts2.convention.annotation.Result;
import org.apache.struts2.convention.annotation.Results;

import sm.hris.struts2.base.SmBaseAction;
import sm.hris.struts2.base.db.Order;
import sm.hris.struts2.base.db.OrderDAO;
import sm.hris.struts2.base.modules.order.IndexAddAction;


@Results({
    @Result(name="add", location="/base/modules/order/index-add", type="redirect"),
    })
@ParentPackage(value = "hris")

public class IndexAction extends SmBaseAction {
    private static final long serialVersionUID = 7353477345330099548L;
    private Order order = new Order();
    private OrderDAO orderDAO = new OrderDAO();
    private ArrayList<Order> orders;
    private String idOrder = new String();
    private String searchKey = new String();
    private ArrayList<String> formArg = new ArrayList<String>();
    private ArrayList<String> idOrders = new ArrayList<String>();
    private String proc = new String();
    private String res = new String();
    private IndexAddAction indexAddAction = new IndexAddAction();
    
    public String execute() throws Exception{
        //super.listMenu();
        if(proc.equals("Add")){
            order.setOrderDate(new Date());
            orderDAO.setOrder(order);
            String strIdOrderCounter = orderDAO.orderAdd();
            ArrayList<String> argArray = new ArrayList<String>();
            argArray.add(0,strIdOrderCounter);
            orderDAO.setArgArray(argArray);
            orders = orderDAO.searchOrderByIdOrder();
            order = orders.get(0);
            res= "add";
        }
        if(proc.equals("Delete")){
            res = orderDelete();
        }
        if(!(proc.equals("Add")||proc.equals("Delete"))){
            if (!searchKey.equals("")) {
                formArg.add("%"+searchKey+"%");
                orderDAO.setArgArray(formArg);
                orders = orderDAO.searchOrderByAnyLike();
                res="success";
            } 
            else {
                orders = orderDAO.searchOrder();
                res="success";
            } 
        }
        return res;
    }
    
    public String orderDelete() throws Exception {
        orderDAO.setArgArray(idOrders);
        orderDAO.orderDelete(); 
        return "success";
    }

    public String orderAdd() throws Exception {
        return "add";
    }


    //---- Getter Setter ----// 
    
    public String getIdOrder(){
        return idOrder;
    }
        
    public void setIdOrder(String idOrder){
        this.idOrder=idOrder;
    }

    public String getSearchKey(){
        return searchKey;
    }
        
    public void setSearchKey(String searchKey){
        this.searchKey=searchKey;
    }

    public ArrayList<String> getIdOrders(){
            return idOrders;
        }
            
    public void setIdOrders(ArrayList<String> idOrders){
            this.idOrders=idOrders;
        }
    
    public ArrayList<Order> getOrders(){
        return orders;
    }
    
    public void setOrders(ArrayList<Order> orders){
        this.orders = orders;
    }

    public Order getOrder(){
        return order;
    }
    
    public void setOrder (Order order){
        this.order = order;
    }

    public void setProc(String proc) {
        this.proc = proc;
    }



}

index-add.jsp:


<!DOCTYPE html>
<html>
<%@ taglib prefix="s" uri="/struts-tags" %>
<%@ taglib prefix="sb" uri="/struts-bootstrap-tags" %>
<%@ taglib prefix="sj" uri="/struts-jquery-tags" %>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="hris, company, resources, management, showcase" />
    <meta name="description" content="A Showcase for the Human Resporce Management System" />
    <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
    <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    
    <![endif]-->
    <sb:head includeScripts="true" includeScriptsValidation="false"/>
    <sj:head jqueryui="true"/>
    <style type="text/css">
        body {
            padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
        }
        h5 {padding-left: 210px;}
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.5/angular.min.js"></script>
    <!-- 
    <script data-require="angular.js@1.3.15" data-server="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script>
    -->
    <script>
    //function show_unitlist() {
    //  dojo.event.topic.publish("show_unitlist");
    //}
    </script>
    
    <script>
     
     var app = angular.module("orderApp", []);
     
     app.controller("orderAppCtrl", function($scope,$http,$window,$compile) {
       
       //$scope.orderDetails = [{id: 'orderDetail1', name: 'orderDetail1'}, {id: 'orderDetail2', name: 'orderDetail2'}, {id: 'orderDetail3', name: 'orderDetail3'}];

        $scope.orderDetails = [];
        $scope.orderDetail={
            'idOrderDetail' :"",
            'idOrder'       :"",
            'idProduct'     :"",
            'amount'        :"",
            'unit'          :"",
            'unitPrice'     :"",
            'subTotal'      :""
        };

        $scope.addNewOrderDetail = function() {
            var murl ="/sm-hris/base/modules/orderdetail/select-id-order-detail-counter-json";
            $http.get(murl)
            .then(function(response) {
                $scope.idOrderDetailCounter = response.data.idOrderDetailCounter;
            });

         
            $scope.orderDetails.push({
                'idOrderDetail' : ($scope.idOrderDetailCounter),
                'idOrder'       :'<s:property value="order.idOrder"/>',
                'idProduct'     :'',
                'amount'        :'',
                'unit'          :'',
                'unitPrice'     :'',
                'subTotal'      :''
            });
       };
       
       
       $scope.removeNewOrderDetail = function(nId) {
            //var index = $scope.orderDetails.indexOf(item);
            //$scope.orderDetails.splice($scope.orderDetails.indexOf(nId), 1); 
            //var oOrderDetail = $scope.orderDetails.filter(orderDetail = function() {return orderDetail.id === nId});
            //var vIndex = $scope.orderDetails.indexOf(oOrderDetail);
            //var vIndex = $scope.orderDetails.findIndex(orderDetail=>orderDetail.id === nId);
            var found = $scope.orderDetails.find(function(orderDetail){return orderDetail.id = nId});
            var vIndex = $scope.orderDetails.indexOf(found);
            $scope.orderDetails.splice(vIndex,1);
            //$scope.orderDetails.splice(nId,1);     
       };
       
       $scope.showAddOrderDetail = function(orderDetail) {
         return orderDetail.id === $scope.orderDetails[$scope.orderDetails.length-1].id;
       };
       
       $scope.idProductNgBlur = function (idProduct,idx){
           $scope.orderDetails[idx].unitPrice = 0;
           var murl ="/sm-hris/base/modules/orderdetail/select-product-by-id-json?idProduct="+ idProduct;
            $http.get(murl)
            .then(function(response) {
                var product = response.data.products[0];
                $scope.orderDetails[idx].unitPrice = product.unitPrice;
                $scope.orderDetails[idx].subTotal = $scope.orderDetails[idx].amount * $scope.orderDetails[idx].unitPrice;
                
            })   
       }

       $scope.amountNgBlur = function (amount,unitPrice,idx){
        $scope.orderDetails[idx].subTotal = amount * unitPrice;
       }
     });

    </script>

</head>


<body ng-app="orderApp">
            
<div class="container" ng-controller="orderAppCtrl">
    <div class="row">
          <div class="panel-heading">
            <h1>Adding Order</h1>
          </div>
            <div class="container">

            <!-- <s:form id="frmOrder" action="index-edit" enctype="multipart/form-data" theme="bootstrap" cssClass="form-horizontal"> -->
                <div class="form-group">
                <div class="row">
                    <div class="col-md-9">
                        <s:textfield
                            label="Order ID"
                            name="order.idOrder"
                            cssClass="input-sm"
                            elementCssClass="col-sm-3"
                            tooltip="Enter ID Order"
                            value="%{order.idOrder}"
                            ng-model="idOrder"
                            readonly="true"
                            />
                    </div>
                    <div class="col-md-9">
                        <s:textfield
                            label="Total"
                            name="order.total"
                            cssClass="input-sm"
                            elementCssClass="col-sm-3"
                            tooltip="Total"
                            value="%{order.total}"
                            ng-model="total"
                            readonly="true"
                            />
                    </div>
                    <div class="col-md-9">
                        <s:textfield
                            label="Total Discount"
                            name="order.totalDiscount"
                            cssClass="input-sm"
                            elementCssClass="col-sm-3"
                            tooltip="Total Discount"
                            value="%{order.total}"
                            ng-model="totalDiscount"
                            readonly="true"
                            />
                    </div>
                    <div class="col-md-9">
                        <s:textfield
                            label="VAT"
                            name="order.vat"
                            cssClass="input-sm"
                            elementCssClass="col-sm-3"
                            tooltip="VAT"
                            value="%{order.vat}"
                            ng-model="vat"
                            readonly="true"
                            />
                    </div>
                    <div class="col-md-9">
                        <s:textfield
                            label="Cash"
                            name="order.cash"
                            cssClass="input-sm"
                            elementCssClass="col-sm-3"
                            tooltip="Cash"
                            value="%{order.cash}"
                            ng-model="cash"
                            />
                    </div>
                    <div class="col-md-9">
                        <s:textfield
                            label="Changes"
                            name="order.changes"
                            cssClass="input-sm"
                            elementCssClass="col-sm-3"
                            tooltip="Changes"
                            value="%{order.changes}"
                            ng-model="changes"
                            readonly="true"
                            />
                    </div>
                    <div class="col-md-9">
                        <s:textfield
                            label="Payment Method Id"
                            name="order.idPaymentMethod"
                            cssClass="input-sm"
                            elementCssClass="col-sm-3"
                            tooltip="Payment Method Id"
                            value="%{order.idPaymentMethod}"
                            ng-model="idPaymentMethod"
                            />
                    </div>
                    <div class="col-md-9">
                        <s:textfield
                            label="Payment Remark"
                            name="order.paymentRemark"
                            cssClass="input-sm"
                            elementCssClass="col-sm-3"
                            tooltip="Payment Remark"
                            value="%{order.paymentRemark}"
                            ng-model="paymentRemark"
                            />
                    </div>
                    <div class="col-md-9">
                        <s:textfield
                            label="Order Date"
                            name="order.orderDate"
                            cssClass="input-sm"
                            elementCssClass="col-sm-3"
                            tooltip="Order Date"
                            value="%{order.orderDate}"
                            ng-model="orderDate"
                            readonly="true"
                            />
                    </div>
                    <div class="col-md-9">
                        <s:submit cssClass="btn btn-primary" id="proc" name="proc" value="Save" />
                    <!--  <button ng-click="orderAddClick()">Add</button> -->
                    </div>
                    <div class="row">
                    <div class="col-md-9">
                      <h1>Order Detail</h1>
                      <div class="row" ng-repeat="orderDetail in orderDetails">
                        <!-- <s:submit cssClass="btn btn-primary" ng-click="removeNewOrderDetail('{{orderDetail.id}}')" value="Remove Order Detail" /> -->
                        <div class="col-md-3">
                        <s:textfield type="text" ng-if="orderDetail.idOrderDetail" ng-model="orderDetail.idOrderDetail" name="orderDetails[{{$index}}].idOrderDetail" id="orderDetails[{{$index}}].idOrderDetail" placeholder="Id Order Detail" value="{{orderDetail.idOrderDetail}}" /></div>
                        <div class="col-md-3">
                        <s:textfield type="text" ng-if="orderDetail.idOrderDetail" ng-model="orderDetail.idProduct" name="orderDetails[{{$index}}].idProduct" id="orderDetails[{{$index}}].idProduct" placeholder="Id Product" value="{{orderDetail.idProduct}}" ng-blur="idProductNgBlur(orderDetail.idProduct,$index)"/></div> 
                        <div class="col-md-2">
                        <s:textfield type="text" ng-if="orderDetail.idOrderDetail" ng-model="orderDetail.amount" name="orderDetails[{{$index}}].amount" id="orderDetails[{{$index}}].amount" placeholder="Amount" value="{{orderDetail.amount}}" ng-blur="amountNgBlur(orderDetail.amount,orderDetail.unitPrice,$index)"/></div>
                        <div class="col-md-2">
                        <s:textfield type="text" ng-if="orderDetail.idOrderDetail" ng-model="orderDetail.unitPrice" name="orderDetails[{{$index}}].unitPrice" id="orderDetails[{{$index}}].unitPrice" placeholder="Unit Price" value="{{orderDetail.unitPrice}}" /></div>
                        <div class="col-md-2">
                        <s:textfield type="text" ng-if="orderDetail.idOrderDetail" ng-model="orderDetail.subTotal" name="orderDetails[{{$index}}].subTotal" id="orderDetails[{{$index}}].subTotal" placeholder="Sub Total" value="{{orderDetail.subTotal}}" /></div>
                      </div>
                     </div>
                     </div>
            <!-- </s:form>  --> 
            <div class="row">
                <s:submit cssClass="btn btn-primary" id="addOrderDetail" ng-click="addNewOrderDetail()" value="Add Order Detail" />
            </div>
            </div>
        </div> 
        </div>
    </div>
</div>
<div class="container">
    <div class="row">
        <div class="col-md-10">
            <p class="pull-right"><a href="#">Back to top</a></p>
        </div>
    </div>
</div>  
</body>
</html>

My question is: Why, it seems like the order doesn't get pass to the jsp from the action class. I can tell from the order.idOrder that I tried to displayed in the JSP is not displayed.

It is something similar to the problem explained [here](https://stackoverflow.com/a/35507124/573032). — Roman C, Jan 23 '20 at 13:43
I bet you are right. When I remove the "ng-app=..." at the html's — Jlsixteenstudio, Jan 24 '20 at 03:47
Shortly: via providing the corresponding api to each other. See the answer below. — Roman C, Jan 24 '20 at 12:06

Roman C · Answer 1 · 2020-09-18T05:24:25.033

How can you combine Struts2 and AngularJS in web application depends on configuration of your controllers. The configuration Struts2 created via convention plugin can be used for frontend produced by Struts MVC framework or for frontend created by AngularJS MVW framework.

If you want to know if Struts2 is MVC then better read Is Struts2 a Front controller or MVC.

See example and description for MVVM architectural pattern with AngularJS.

In the first case you use model and view on the server using Java combined with templating language like jsp, freemarker, velocity, etc. To access the model objects from the view you can use expression languages like EL, OGNL, etc.

In the second case you use model and view on the client using JavaScript combined with AngularJS. In this case to get data from the server the application is using http client and backed services that return the data in the JSON format. If you use Struts 2 on the backend then you should create the corresponding API which can be used by AngularJS application.

This an example how can you use API from AngularJS. In this case the Struts 2 backend created via rest plugin. It can be used on the backend of AngularJS application.

In this answer you can find examples how to combine the convention and rest plugin together when creating Struts 2 backend for AngularJS application

Cannot Pass Object from Action Class to JSP

1 Answers1

Linked