Отображение JSON данных в табличном формате с кнопкой отправки, соответствующей каждой строке

Question

/ * Как отобразить данные json в таблицу на странице JSP с кнопкой отправки в каждой строке. При нажатии кнопки «Отправить» данные строк должны быть отправлены сервлету.

Я получил json данных из сервлета, используя Ajax.

Ниже приведен мой ajax вызов для получения JSON данные из сервлета * /

function updateprofile(){
$.ajax({
url : 'abc/ConnectionInfo',
type: 'GET',
data: {},
data type: 'json'
}).done(function (data){
     renderProfiles(data);
}).fail(function (){
toaster.error("Eror...");
});
}

function 
renderProfiles(data){

//How can I implement this 
method to display all the 
data in table format with a 
button corresponding to 
each row.  And on clicking 
of the button it should 
send a profile ID to 
Servlet Post method.
}

Answer 1

Вы можете использовать $.foreach l oop для итерации ваших данных json и отображения их в вашей таблице. Демо-код (необходимо внести изменения в приведенный ниже код в соответствии с вашим требованием):

//your json data
var response = [{
    "metric": "connected[qa_KCDz->Exre]"
  },
  {
    "metric": "connected[qa_KTDz->Exre]"
  },
  {
    "metric": "connected[qa_KPDz->Exre]"
  }
];

var str = '<table border=1><tr>\n' +
  '<th>Something</th>\n' +
  '<th>Submit</th>\n' +
  '</tr>';
  //looping through json data
$.each(response, function(key, value) {
  //get value
  var s = value['metric'];
  //getting index of [
  var i = s.indexOf('[');
  var data = s.slice(10, i + 8).trim();

  str += '<td>' + value['metric'] + '</td>';
  str += '<td> <form method="post" action="servletname"><input type="hidden" name="data" value=' + data + ' ><input type="submit" value ="send" ></form></td></tr>';


});
str += "</table>";

//appending data
$("#table").html(str);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="table"> </div>

Поставьте код jquery выше вашего function renderProfiles(data){..}. Также, под тегом <form></form> я добавил поле ввода hidden с требуемым значение, которое нужно отправить сервлету. Получите это значение, используя request.getParameter("data") в методе doPost сервлета.