Unable to send dynamic invoice value to struts2 server

Question

I am working on angularjs 1.6.5

I am using following code to send data of invoice page.

$scope.products = [{qty: 0, description: ' ', sellingPrice: 0.0, unitPrice: 0.0, total: 0.0}];
$scope.fproducts = [];
$scope.generateInvoice = function () {
    console.log("generateInvoice");
    console.log($scope.fproducts);
    console.log("sub total " + $scope.subTotal + " ft " + $scope.finalTotal + "  pamt " + $scope.paidAmount + "  baldue " + $scope.balancedue);
    $scope.bd1 = {
        'subTotal': $scope.subTotal,
        'total': $scope.finalTotal,
        'TotalPaid': $scope.paidAmount,
        'invDateStr': $filter('date')($scope.invoiceDate, "MM/dd/yyyy"),

    };
    if ($scope.fproducts.length > 0) {
        $scope.fproducts.forEach((total, index) => {
            Object.entries(total).forEach(([key, value]) => {
                console.log(index + "  " + key + " " + value);
                $scope.bd1[`billProductList[${index}].${key}`] = value;
            });
        });
    }
    //commenting above for each and removing comment from below code is 
    // working properly but I want to send dynamic data with above code
/*  $scope.bd1[`billProductList[0].id`] = 1;
    $scope.bd1[`billProductList[0].description`] = 1;
    $scope.bd1[`billProductList[0].discountPercent`] = 150;
    $scope.bd1[`billProductList[0].qty`] = 10;
    $scope.bd1[`billProductList[0].sellingPrice`] = 100;
    $scope.bd1[`billProductList[0].unitPrice`] = 100;
    $scope.bd1[`billProductList[0].total`] = 150;*/

    $scope.bd1[`BillPaidDetailses[0].paymentMode`] = $scope.paymentMode;
    $scope.bd1[`BillPaidDetailses[0].amount`] = $scope.paidAmount; 
    console.log($scope.bd1);

    $http({
        method: 'POST',
        url: 'added-invoice',
        data: $httpParamSerializerJQLike($scope.bd1),
        headers: {'Content-Type': 'application/x-www-form-urlencoded'}
    }).then(function successCallback(data, status, headers, config) {
        if (data.data.st === 1) {
            $scope.success = true;
            window.location = 'bhome#!/show-tax';

        } else if (data.data.st === 0) {
            $scope.success = false;
            $scope.failure = true;
        } else if (data.data.st === -1) {
            $scope.success = false;
            $scope.failure = true;
        }
    }, function errorCallback(data, status, header, config) {
        $scope.success = false;
        $scope.failure = true;
    });
}

Above code is not passing value to server side object. its console.log value is

on modifying above data

   /*if ($scope.fproducts.length > 0) {
        $scope.fproducts.forEach((total, index) => {
            Object.entries(total).forEach(([key, value]) => {
                console.log(index + "  " + key + " " + value);
                $scope.bd1[`billProductList[${index}].${key}`] = value;
            });
        });
    }*/
    $scope.bd1[`billProductList[0].id`] = 1;
    $scope.bd1[`billProductList[0].description`] = 1;
    $scope.bd1[`billProductList[0].discountPercent`] = 150;
    $scope.bd1[`billProductList[0].qty`] = 10;
    $scope.bd1[`billProductList[0].sellingPrice`] = 100;
    $scope.bd1[`billProductList[0].unitPrice`] = 100;
    $scope.bd1[`billProductList[0].total`] = 150;

as this is passing value to server object its console.log is

I want to run my code using dynamic value specified in if condition. What is the problem I am unable to get it.

EDIT I am using server side struts2 my code is

public class BillNewAction extends ActionSupport implements ModelDriven<BillDetails> {

    BillDetails bd = new BillDetails();
    private List<BillDetails> billList = new ArrayList<BillDetails>();

    public String insert() {
        System.out.println("total " + bd.getTotal()
                + " subTotal " + bd.getSubTotal() + " paid " 
                + bd.getTotalPaid()
                + " invoiceDate " + bd.getInvDateStr()
        );
        SimpleDateFormat formatter1 = new SimpleDateFormat("MM/dd/yyyy");
        try {
            bd.setInvoiceDate((new java.sql.Date(formatter1.parse(bd.getInvDateStr()).getTime())));
        } catch (ParseException ex) {
            Logger.getLogger(BillNewAction.class.getName()).log(Level.SEVERE, null, ex);
        }
        for (BillPaidDetails b : bd.getBillPaidDetailses()) {
            System.out.println("type " + b.getPaymentMode() + " amount "
                + b.getAmount()
            );
        }
        System.out.println("product size " + bd.getBillPrList().size());
        for (BillProduct b : bd.getBillPrList()) {
            System.out.println("id " + b.getId() + " desc  " 
                + b.getDescription() + " qty " + b.getQty()
                + " sp " + b.getSellingPrice() + " up " 
                + b.getUnitPrice() + " " + b.getTotal()
            );
        }
    }
}

public class BillDetails implements java.io.Serializable {

private Long billNo;
private Client client;
private BigDecimal subTotal;
private BigDecimal TotalAmount;//total price
private BigDecimal TotalPaid;//Amount paid for  getting items
private BigDecimal vat;
private BigDecimal total;
private String invoiceNo;
private Date invoiceDate;
private String invDateStr;
private List<BillPaidDetails> BillPaidDetailses = new ArrayList<BillPaidDetails>();
private List<BillProduct> billPrList = new ArrayList<BillProduct>();
//getter and setter
 }

---

I have to send data in $scope.bd1[billProductList[0].id] = 1; format to server

Assigning indivisual value passing the data to server but I have dynamic no of values so I am trying

if ($scope.fproducts.length > 0) { 
    $scope.fproducts.forEach((total, index) => {
        Object.entries(total).forEach(([key, value]) => {
            console.log(index + " " + key + " " + value);
            $scope.bd1[billProductList[${index}].${key}] = value;
        });
    });
}

that is not working

Answer 1

Consider using the Struts JSON Plugin

The JSON plugin provides a json result type that serializes actions into JSON.

1. The content-type must be application/json
2. Action must have a public “setter” method for fields that must be populated.
3. Supported types for population are: Primitives (int,long…String), Date, List, Map, Primitive Arrays, other class, and Array of Other class.
4. Any object in JSON, that is to be populated inside a list, or a map, will be of type Map (mapping from properties to values), any whole number will be of type Long, any decimal number will be of type Double, and any array of type List.

Your actions can accept incoming JSON if they are in package which uses json interceptor or by adding reference to it.

This simplifies the AngularJS HTTP POST request:

$scope.bd1 = {
    'subTotal': $scope.subTotal,
    'total': $scope.finalTotal,
    'TotalPaid': $scope.paidAmount,
    'invDateStr': $scope.invoiceDate.toISOString(),
    'billProductList': $scope.fproducts,  
};

$http({
    method: 'POST',
    url: 'added-invoice',
    data: $scope.bd1,
    headers: {'Content-Type': 'application/json'}
}).then(function successCallback(response) {
    var data = response.data;
    if (data.st === 1) {
        $scope.success = true;
        window.location = 'bhome#!/show-tax';
    } else if (data.st === 0) {
        $scope.success = false;
        $scope.failure = true;
    } else if (data.data.st === -1) {
        $scope.success = false;
        $scope.failure = true;
    }
}, function errorCallback(response) {
    $scope.success = false;
    $scope.failure = true;
});