将 Json 结果转换为列表并显示在 jquery-确认警报中

Question

我正在编写一个小脚本，该脚本执行 Ajax 调用和 returns 数据作为 Json。

如果结果不为空，脚本将显示包含返回数据的警报。

这很好用，但我想将数据显示为列表，我的问题是如何做到这一点？

json

["Baskerville Suite","Bolton Suite"]

jquery/ajax调用

hotelid= "EXBHX";
$(document).ready(function() {
  $.ajax({
  type: "Post",
  url: "../ipad_status.php",
  data: { HotelID : hotelid },
  success: function(data) {
    var result = $.parseJSON(data);
    console.log(result);
    if(result != 0){
      $.alert({
        title: 'Room displays offline!',
        content: 'Room(s): <BR/><BR/>' + result + '',
        icon: 'fa fa-rocket',
        animation: 'zoom',
        boxWidth: '50%',
        closeAnimation: 'zoom',
        buttons: {
          okay: {
            text: 'View rooms',
            btnClass: 'btn-blue',
            action: function() {
              window.top.location.href = '../confmon_a.php'
            }
          },
          Close: function() {
            text: 'Close'
          }
        }
      });
    }
  }
  });
});

非常感谢您的宝贵时间。

Answer 1

假设https://github.com/craftpip/jquery-confirm is used, then just join结果像

'Room(s): '+result.join(' '),

或

'Room(s): <ul><li>'+result.join('</li><li>')+'</ul>',

或link他们：

var result = ["Baskerville Suite", "Bolton Suite"],
  $list = $("<div/>").append("<ul/>");
  
$.each(result, function(i, text) {
  $("<li/>").append(
    $("<a/>", {
      href: "../confmon_a.php?room=" + text.replace(/\s/g, "_")
    }).text(text)
  ).appendTo($list)
})
$.alert({
  title: 'Room displays offline!',
  content: 'Room(s):<br/><br/>' + $list[0].innerHTML, // because $.alert wants html
  icon: 'fa fa-rocket',
  animation: 'zoom',
  boxWidth: '50%',
  closeAnimation: 'zoom',
  buttons: {
    okay: {
      text: 'View rooms',
      btnClass: 'btn-blue',
      action: function() {
        window.top.location.href = '../confmon_a.php'
      }
    },
    Close: function() {
      text: 'Close'
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.js"></script>

将 Json 结果转换为列表并显示在 jquery-确认警报中

Convert a Json result to list and display in a jquery-confirm alert

jquery

jquery-confirm