Using JSON Array with AJAX

Question

I'm trying to append parts of a JSON array (that is received from a server) to a table after clicking a button. Somehow I can't add the parts of the json array to this table.

This is the JSON Array received from the server:

{"pass": [
    {
        "Date":"01.01.2001",
        "Time":"14:20",
        "ID":"1234",
        "Name":"Sat",
        "elevation":"168.9°",
        "losTime":"04:31"
    },
    {
        "Date":"01.01.2002",
        "Time":"14:30",
        "ID":"1235",
        "Name":"Com",
        "elevation":"16.9°",
        "losTime":"04:25"
    }
]}

The Code is the following:

$(document).ready(function(){
    $("#submit-button").click(function() {
        $.ajax({
            url: "../rest/passdata",
            type: "GET",
            data: {
                satellite: document.getElementById("satellite").value,
                startDate: document.getElementById("startDate").value,
                startTime: document.getElementById("startTime").value,
                endDate: document.getElementById("endDate").value,
                endTime: document.getElementById("endTime").value
                },
            dataType: "json",
            error: function() {
               $('#info').html('<p>An error has occurred</p>');
            },
            success: function(response) {
                var arr = response;
                $("#pd-table").find("#pd-body").empty();
                $.each(arr, function(i, value){
                    var checkbox = $('<input type="checkbox"/>');
                    $("#pd-table").find("#pd-body")
                    .append($("<tr>"))
                    .append($("<td>").append(checkbox))
                    .append($("<td>").append(arr.pass.ID[i]))
                    .append($("<td>").append(arr.pass.Date[i]))
                    .append($("<td>").append(arr.pass.Time[i]))
                    .append($("<td>").append(arr.pass.losTime[i]))
                    .append($("<td>").append(arr.pass.Name[i]))
                    .append($("<td>").append(arr.pass.elevation[i]))
                    .append($("</tr>"))

The checkbox gets added to the table, which makes me think that reading out the array does not work the way it should. I already tried to parse the response from the server but that also didn't work out and in that case even the checkbox didn't get added to the table.

I hope someone can help me out!

Answer 1

Several problems:

1. You want to loop over the array in response.pass not the whole object
2. You are appending the cells to the <tbody> not to the new row.
3. You can not append a closing tag. The DOM only accepts complete elements and has no understanding of appending a closing tag in a jQuery object. The full element gets created when you do $('<tagname>')

Simplified version:

var arr = response.pass;
var $tbody = $("#pd-body").empty();

$.each(arr, function(i, value) {
  var checkbox = $('<input type="checkbox"/>');

  var $row = $("<tr>")
     // append cells to the new row
    .append($("<td>").append(checkbox))
    .append($("<td>").text(value.ID))
    .append($("<td>").text(value.Date))
    .append($("<td>").text(value.Time))
    .append($("<td>").text(value.losTime))
    .append($("<td>").text(value.Name))
    .append($("<td>").text(value.elevation));

   // append complete row
   $tbody.append($row)
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="pd-table" border=1>
  <tbody id="pd-body">
  </tbody>
</table>
<script>
  var response = {
    "pass": [{
        "Date": "01.01.2001",
        "Time": "14:20",
        "ID": "1234",
        "Name": "Sat",
        "elevation": "168.9°",
        "losTime": "04:31"
      },
      {
        "Date": "01.01.2002",
        "Time": "14:30",
        "ID": "1235",
        "Name": "Com",
        "elevation": "16.9°",
        "losTime": "04:25"
      }
    ]
  }
  
  </script>