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

Question

I am working on a small script that performs an Ajax call and returns data as Json.

If the result is not empty, the script displays an alert containing the returned data.

This works fine but I would like to display the data as a list, my question is how could this be done?

The json

["Baskerville Suite","Bolton Suite"]

The jquery/ajax call

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'
          }
        }
      });
    }
  }
  });
});

Many thanks in advance for your time.

Answer 1

Assuming https://github.com/craftpip/jquery-confirm is used, then just join the result like

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

or

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

or link them:

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>