Bootstrap Table with nested JSON

I am trying to reference a value in my JSON file to display in a bootstrap table. A selection of the JSON file is as follows:

    {
  "summary": [
      "2022-03-03 02:52:39 UTC P @ OD06 -  2022-03-03 04:00:08 UTC 01+07 LOW SJ  SJ-DG-QM-CB-CL-HT-HV-HZ",
      "2022-03-03 03:29:29 UTC E @ OD19 -  2022-03-03 15:01:25 UTC 11+31 HIGH ZV  ZV-TA-MI-FC-FY-AL-TU-BR-KN-WH-VT",
      "2022-03-03 03:46:59 UTC F @ OD18 -  2022-03-03 15:22:16 UTC 11+35 HIGH GO  GO-FR-BO-NA-HI-GR-CH-VN-QY-FO-GY-SA-NS-JE"
  ],
  "detail": [
      {
          "_id": {
              "$oid": "62330bd6eefd332ac0855c52"
          },
          "duration": 4049,
          "edate": "2022-03-03T04:00:08.000Z",
          "expires_at": "2024-11-27T02:52:39.000Z",
          "flightinfo": {
              "numberofac": 9,
              "flightmins": 160,
              "pace": 4,
              "interval": 300,
              "sdate": "2022-03-03T02:52:39.000Z",
              "edate": "2022-03-03T04:00:08.000Z"
          },
          "json_class": "SectorOpen",
          "lastsrtreport": "20220303040008.0000045306",
          "master": "SJ",
          "od": "06",
          "sdate": "2022-03-03T02:52:39.000Z",
          "slaves": [
              "DG",
              "CL",
              "QM",
              "CB",
              "HT",
              "HZ",
              "HV"
          ]
      }
    ]
  }

I am trying to display the value of the "master" key in a bootstrap table.

The path to the value is $.detail[*].master and returns the value of "SJ" as expected when I use JSONPath.com to validate it.

However, I can't get the value to display in the table.

This is the html for the table:

<table id="table" data-toggle="table" data-url="data.json">
            <thead>
              <tr>

                <th data-field="$.detail[*].master">Master</th>
               
              </tr>
            </thead>
          </table> 

What am I doing wrong? Is it the format that the JSON is being returned?

Thank you!