解决了问题--第12行的数据属性错误。将.attr("data-earnbody", record_body_raw)更改为.attr("data-record-detail", record_body_raw)。

$(document).ready(function () {
  $("#viewModal").on("show.bs.modal", function (e) {
    var progressAttr = $(e.relatedTarget);
    var record_body_raw = progressAttr.data("record-detail");
    var record_json_string = decodeURIComponent(record_body_raw);
    var record_obj = JSON.parse(record_json_string);

    $(this)
      .find(".modal-title")
      .text("Viewing Record #" + record_obj.record_id);
    $(this).find(".modal-body").html(record_obj.record_id);
    $(this).find(".btn-primary").attr("data-record-detail", record_body_raw);
    console.log("showing view modal for record " + record_obj.record_id);
  });

   $("#editModal").on("show.bs.modal", function (e) {
    var progressAttr = $(e.relatedTarget);
    var record_body_raw = progressAttr.data("record-detail");
    var record_json_string = decodeURIComponent(record_body_raw);
    var record_obj = JSON.parse(record_json_string);

    $(this)
      .find(".modal-title")
      .text("Editing Record #" + record_obj.record_id);
    $(this).find(".modal-body").html(record_obj.record_id);
    console.log("showing edit modal for record " + record_obj.record_id);
  });
});

@import "https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css";

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://unpkg.com/popper.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>

<table class="table">
  <thead>
    <tr>
      <th>record</th>
      <th>action</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td><button class="btn btn-primary" data-record-detail="%7B%22record_id%22%3A1%7D" data-toggle="modal" data-target="#viewModal">View</button></td>
    </tr>
    <tr>
      <td>2</td>
      <td><button class="btn btn-primary" data-record-detail="%7B%22record_id%22%3A2%7D" data-toggle="modal" data-target="#viewModal">View</button></td>
    </tr>
</table>

<!-- view modal -->
<div class="modal fade" id="viewModal" tabindex="-1" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="myModalLabel"></h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary"data-toggle="modal" data-target="#editModal">Edit</button>
      </div>
    </div>
  </div>
</div>

<!-- edit modal -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title"></h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Edit</button>
      </div>
    </div>
  </div>
</div>