For loop in success of ajax call not working

Question

in an ajax call i receive a json array on success. In the ajax success function, I want to display this array in HTML. I can just display the entire array at once, but I want to loop through the length of the array and display the elements one by one. See code below

$.ajax({
   type: "POST",
   : "json",
   url: "response.php",
   data: data,
   success: function(data) {
      $(".airports").html(
         "<button type='button' class='btn btn-info btn-block' data-toggle='collapse' data-target='#ap'>Airports</button>" +
         "<div id='ap' class='collapse'>" +
         "<b>Departure airports</b><br>" + data["deptAirports"].length + "<br>" +
         for (i = 0; i < data["deptAirports"].length; i++){
               data["deptAirports"][i] + "<br>" +
         }
         "<b>Destination airports</b><br>" + data["destAirports"] +
         "</div>"
      )

The destAirports array is just thrown out in HTML, this works. However, the for loop above breaks everything and it wont work.

Anything I'm missing?

Answer 1

You can't concatenate a string with a loop.... Change your code to:

$.ajax({
type: "POST",
url: "response.php",
data: data,
success: function(data) {
    var html = "<button type='button' class='btn btn-info btn-block' data-toggle='collapse' data-target='#ap'>Airports</button>" +
     "<div id='ap' class='collapse'>" + "<b>Departure airports</b><br>" + data["deptAirports"].length + "<br>";

     for (i = 0; i < data["deptAirports"].length; i++){
           html += data["deptAirports"][i] + "<br>";
     }

     html += "<b>Destination airports</b><br>" + data["destAirports"] + "</div>";

     $(".airports").html(html);

Answer 2

Your syntax (and form) is incorrect. A for loop cannot just be placed within a string concatenation. A for loop does not produce an inline text value. Instead, you need something that produces an inline text value from an array. One option is using Array.join() . Here is an example you can run in the JavaScript console:

var someArray = [];
someArray.push('Value 1');
someArray.push('Value 2');
someArray.push('Value 3');
var myText = "<span>" + someArray.join("<br />") + "</span>";
console.debug(myText);

Output:

<span>Value 1<br />Value 2<br />Value 3</span>

Putting this into OP's code, we find something like:

$.ajax({
   type: "POST",
   : "json",
   url: "response.php",
   data: data,
   success: function(data) {
      $(".airports").html(
         "<button type='button' class='btn btn-info btn-block' data-toggle='collapse' data-target='#ap'>Airports</button>" +
         "<div id='ap' class='collapse'>" +
         "<b>Departure airports</b><br>" +
         data["deptAirports"].length + "<br>" +
         data["deptAirports"].join("<br />") + "<br>" +
         "<b>Destination airports</b><br>" + data["destAirports"] +
         "</div>");
   }
});

Answer 3

Try this

$.ajax({
    type: "POST",
    dataType : "json",
    url: "response.php",
    data: data,
    success: function(data) {

        var markup = "<button type='button' class='btn btn-info btn-block' data-toggle='collapse' data-target='#ap'>Airports</button>";
        markup    += "<div id='ap' class='collapse'>";
        markup    += "<b>Departure airports</b><br>";
        markup    += data["deptAirports"].length + "<br>";

        $.each( data["deptAirports"] , function(index,value){
            markup +=  value + "<br>";
        });

        markup    += "<b>Destination airports</b><br>" + data["destAirports"] + "</div>";



        $(".airports").html(markup);

    }

});