Преобразовать результат Json в список и отобразить в предупреждении JQuery-подтверждение

Question

Я работаю над небольшим сценарием, который выполняет вызов Ajax и возвращает данные как 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, просто присоединитесь к результату, как

• 'Room(s):<br/><br/>'+result.join('<br/>'),

или же

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

или связать их:

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>