如何仅显示对象中的可用属性

Question

在fullcalendar的eventRender方法中，在呈现的文本中，我只想显示event对象中可用的属性，即不undefined。

正如你在下面看到的，它尝试显示event对象的每个属性，如果属性undefined它将呈现undefined：

eventRender: function(event, element) {
    $(element).qtip({
        style: {
            classes: 'myStyle',
            height: 150,
            width: 300,
            textAlign: 'center',
        },
        content: {
            title: event.room_id,
            text: "description: " + event.description + "<br/>" +
                  "number: " + event.capacity + "<br/>" + 
                  "Name: " + event.name + "<br/>" + 
                  "Role: " + event.role + "<br/>" + 
                  "Rank: " + event.sub_role + "<br/>" +
                  "Hours: " + event.hours + "<br/>",
        }
    })
}

Answer 1

您可以浏览事件属性并生成工具提示文本

https://jsfiddle.net/j9x06z7s/

$('#calendar').fullCalendar({
  events: [{
    start: moment(), // required, should not show in tip
    title: "Required title event 1", // required, should not show in tip
    room_id: "Room 1",
    description: "Description for event 1",
    capacity: 10,
    name: "Name 1",
    role: "Role event 1",
    sub_role: "Rank event 1",
    hours: 1,
  }, {
    start: moment().add(1, 'day'), // required, should not show in tip
    title: "Required title event 2", // required, should not show in tip
    room_id: "Room 2",
    description: "Description for event 2",
    //capacity: 20, // should not show in tip
    name: "Name 2",
    //role: "Role event 2", // should not show in tip
    sub_role: "Rank event 2",
    hours: 2,
  }, {
    start: moment().add(2, 'day'), // required, should not show in tip
    title: "Required title event 3", // required, should not show in tip
    room_id: "Room 3",
    description: "Description for event 3",
    capacity: 30,
    name: "", // should not show in tip
    role: undefined, // should not show in tip
    sub_role: [], // should not show in tip
    hours: 3,
  }],
  eventRender: function(event, element) {
    $(element).qtip({
      style: {
        classes: 'myStyle',
        height: 150,
        width: 300,
        textAlign: 'center',
      },
      content: {
        title: event.room_id,
        text: build_text(event)
      }
    });
  }
});
function build_text(event) {
  var text = "";
  // go through event properties
  $.each(event, function(key, value) {
    // is it a key we care about for tooltip?
    if (["description", "capacity", "name", "role", "sub_role", "hours"].includes(key)
      // does it have a value?
      && (value != null && value != "")) {
      text += key + ": " + value + "<br/>";
    }
  });
  return text;
}