For循环在ajax调用成功时不起作用

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调用中，如果成功，我将收到一个json数组。在ajax success函数中，我想用HTML显示这个数组。我可以一次显示整个数组，但是我想循环遍历数组的长度并逐个显示元素。请参见下面的代码

$.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.

destAirports数组刚刚在HTML中被抛出，这是有效的。然而，上面的for循环破坏了所有的东西，它不能工作。

Anything I'm missing?

我缺少什么?

3 个解决方案

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

#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:

语法(和表单)不正确。一个for循环不能仅仅放在字符串连接中。for循环不会产生内联文本值。相反，您需要从数组中生成内联文本值。一个选项是使用Array.join()。下面是一个可以在JavaScript控制台运行的示例:

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:

把这个放到OP的代码中，我们发现如下内容:

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

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

    }

});

#1