将Json数据填充到动态生成的表中

Question

I generate a table dynamically using jquery. this is the code for it.

$(document).ready(function(){
        // to generate the table for given number of blocks
        var numberOfBlocks = ${projectDetails.noOfBlocks};
        var i;
        var _html = '<table class="table table-bordered table-striped">';

        _html += '<tr>';
        _html += '<th>Blockk No</th>';
        _html += '<th>Lott No</th>';
        _html += '<th>Extentt</th>';
        _html += '<th>Land Value</th>';
        _html += '<th>On Booking Amount</th>';
        _html += '</tr>';

        for (i = 1; i <= parseInt(numberOfBlocks); i++) {

            _html += '<tr class="tblRw" id="row'+i+'">';
            _html += '<td><input type="text" class="form-control" size="10" id="blockNo'+i+'" value="'+i+'"></td>';
            _html += '<td><input type="text" class="form-control" size="10" id="lotNo'+i+'" ></td>';
            _html += '<td><input type="text" class="form-control" size="10" id="extent'+i+'"></td>';
            _html += '<td><input type="text" class="form-control" id="land_value'+i+'"></td>';
            _html += '<td><input type="text" class="form-control" size="10" id="onbookingamount'+i+'"></td>';
            _html += '</tr>';

        }

        _html += '</table>';
        document.getElementById('results').innerHTML = _html;
       });

I need to populate the table rows with the data which are in a Jason response returned from my controller class. This is how I do it.

public @ResponseBody JsonResponse  edit_blocks(@ModelAttribute(value="editblockbean") EditBlockBean editBlockBean , BindingResult result,ModelMap model) {

        JsonResponse res = new JsonResponse();

        if (result.hasErrors()) {
            res.setStatus("FAIL");
            res.setResult(result.getAllErrors());
        }else{

            List<EditBlockBean> ebb = branchservice.getBlocksForEdit(editBlockBean.getTitle());

            res.setStatus("SUCCESS");
            res.setResult(ebb);

        }
        return res;
    }

My Jason response from controller class consists of a list of class objects. This is the class;

public class BlockBean {

    private String blockNo;
    private String lotNo;
    private String extent;
    private String landValue;
    private String onBookingAmount;

    // getters and setters

}

In Jason response, I have a list of BlockBean objects. I need to assign those object attributes such as blockNo, lotNo, extent,.... in to the columns of each row in the dynamic table generated in the jsp page.

This is my ajax call to take the jason response.

         jQuery.ajax({
                type : "GET",
                url : "/TFProject/edit_blocks.htm",
                data : "title=" + title + "&type=" +type,

                success : function(response) {

                    if (response.status == "SUCCESS") {

                        // I need to know the code here.

                    } else {
                        errorInfo = "";

                        for (i = 0; i < response.result.length; i++) {
                            errorInfo += "<br>" + (i + 1) + ". "
                                    + response.result[i].code;
                        }
                        jQuery('#error').html(
                                "Please correct following errors: " + errorInfo);
                        jQuery('#info').hide('slow');
                        jQuery('#error').show('slow');
                    }
                },
                error : function(e) {
                    alert('Errorrrr: ' + e);
                }
            });

What I need to know is the code segment for populating the table rows with jason response details if the Jason response status is success. Could you please help me? Thank you!

Answer 1

Your JSON response returning method should be like:

public@ResponseBody String edit_blocks(@ModelAttribute(value = "editblockbean") EditBlockBean editBlockBean, BindingResult result, ModelMap model) {    
    List <EditBlockBean> editBlockBeanList = branchservice.getBlocksForEdit(editBlockBean.getTitle());
    String jsonResult = "";
    try {
        if (editBlockBeanList != null && !editBlockBeanList.isEmpty()) {
            JSONArray jsonArray = new JSONArray();
            for (EditBlockBean ebb: editBlockBeanList) {
                JSONObject jsonObject = new JSONObject();
                jsonObject.put("blockNo", ebb.getBlockNo());
                jsonObject.put("lotNo", ebb.getLotNo());
                jsonObject.put("extent", ebb.getExtent());
                jsonObject.put("landValue", ebb.getLandValue());
                jsonObject.put("onBookingAmount", ebb.getOnBookingAmount());
                jsonArray.put(jsonObject);
            }
            jsonResult = jsonArray.toString();
        }
    } catch (Exception ex) {
        jsonResult = "";
        // append exception to log
    }
    return jsonResult;
}

And this is success part of AJAX method that will write HTML table:

if (response != null && response != "") {
    var EditBlockBeanArray = JSON.parse(response);

    var _html = '<table class="table table-bordered table-striped">';
    _html += '<tr>';
    _html += '<th>Blockk No</th>';
    _html += '<th>Lott No</th>';
    _html += '<th>Extentt</th>';
    _html += '<th>Land Value</th>';
    _html += '<th>On Booking Amount</th>';
    _html += '</tr>';

    var i = 0;
    while (i < EditBlockBeanArray.length) {
        var ebbObject = EditBlockBeanArray[i];

        _html += '<tr class="tblRw" id="row' + i + '">';
        _html += '<td><input type="text" class="form-control" size="10" id="blockNo' + i + '" value="' + i + '">' + ebbObject.blockNo + '</td>';
        _html += '<td><input type="text" class="form-control" size="10" id="lotNo' + i + '">' + ebbObject.lotNo + '</td>';
        _html += '<td><input type="text" class="form-control" size="10" id="extent' + i + '">' + ebbObject.extent + '</td>';
        _html += '<td><input type="text" class="form-control" id="land_value' + i + '">' + ebbObject.landValue + '</td>';
        _html += '<td><input type="text" class="form-control" size="10" id="onbookingamount' + i + '">' + ebbObject.onBookingAmount + '</td>';
        _html += '</tr>';

        i++;
    }

    _html += '</table>';
    document.getElementById('results').innerHTML = _html;
} else {
    /* Your error code goes here */
}