заполняет данные Json в динамически сгенерированную таблицу

Question

Я генерирую таблицу динамически с помощью jquery. это код для него.

$(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; 
     }); 

мне нужно заполнить строки таблицы с данными, которые находятся в Jason ответ вернулся из моего класса контроллера. Вот как я это делаю.

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; 
    } 

Мой Jason ответ от класса контроллера состоит из списка объектов класса. Это класс;

public class BlockBean { 

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

    // getters and setters 

} 

В Jason ответ, у меня есть список BlockBean объектов. Мне нужно назначить эти атрибуты объектов, такие как blockNo, lotNo, extent,...., столбцам каждой строки в динамической таблице, сгенерированной на странице jsp.

Это мой звонок ajax, чтобы принять ответ Джейсона.

  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); 
       } 
      }); 

Что мне нужно знать, сегмент коды для заполнения строки таблицы с деталями ответа Джейсона если статус Jason ответа успех. Не могли бы вы помочь? Спасибо!

Answer 1

Ваш ответ JSON метод возвращения должен быть как:

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; 
} 

И это успех часть метода AJAX, который будет писать HTML таблицу:

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 */ 
}