如何使用 jQuery 在模态中打印 Java 对象

Question

我正在尝试使用 jQuery 以模态方式打印对象数据。当我单击按钮时，它会将 Java 对象发送到 jQuery，然后打印它，但它是以这种格式打印的：

行程 [tid=1, tname=North, tplace=Ladhak, tpackage=12000, tfrom=2022-05-21, tto=2022-05-31, lastdate=2021-12-22, tinfo= XYZ]

我想访问对象的数据并显示它。

<button class="btn btn-primary open" id="${t}" data-toggle="modal" style="color:white;" data-target="#infoModal">more info</button> 

jQuery 代码：

    < script type = "text/javascript" >
      $(document).ready(function() {
        $('.open').click(function() {
          var obj = $(this).attr('id');
          $("#show-data").html(obj);
        });
      }); <
    /script>

Answer 1

1. 使用.split(' ') 拆分数据以获得所需形状。
2. 从数据中删除不必要的字符。
3. 内部循环生成标记。
4. 在欲望div上附加标记。

$('.open').click(function() {
  var html = "";
  var obj = "Trip [tid=1, tname=North, tplace=Ladhak, tpackage=12000, tfrom=2022-05-21, tto=2022-05-31, lastdate=2021-12-22, tinfo=XYZ]";

  var data = obj.substr(obj.indexOf(' ') + 1).replace('[', '').replace(']', '').split(' ');
  $.each(data, function(index, value) {
    var key = value.split('=')[0]; // format these data on your desire shape
    var val = value.split('=')[1];
    html += '<span class="key">' + key + ' </span>';
    html += '<span class="val">' + val + ' </span>';
    html += '</br>';
  });
  $("#show-data").html(html);
});

.key {
  color: red
}

.val {
  color: green
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btn btn-primary open" id="${t}" data-toggle="modal" style="color:white;" data-target="#infoModal">more info</button>

<div id="show-data"></div>