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!

Did you ever consider doing a JSON.parse(response) and then treating the information inside as a typical object? — user3832673
– user3832673, Commented Apr 8, 2021 at 10:51
Yes I tried to do that but afterwards not even the checkbox was added to the table which means that it didn't even go into the each function which made me think that the json.pase didn#t work out how it should — skywalther
– skywalther, Commented Apr 8, 2021 at 10:54
@yeahlad With jQuery $('<tagname>') creating an element with just the representation of a starting tag is perfectly fine. Trying to append a closing tag after is not — charlietfl
– charlietfl, Commented Apr 8, 2021 at 10:55

charlietfl · Accepted Answer · 2021-04-08 11:29:30Z

1

Several problems:

You want to loop over the array in response.pass not the whole object
You are appending the cells to the <tbody> not to the new row.
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>

edited Apr 8, 2021 at 11:29

answered Apr 8, 2021 at 11:20

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

skywalther Over a year ago

In the second part of your solution the json array is part of the code itself but I get it as a response to ajax. Is that a problem or do I handle it in the same way?

charlietfl Over a year ago

No. I named the hard code variable identical to the response in ajax success callback

Collectives™ on Stack Overflow

Using JSON Array with AJAX

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related