Using bootstrap-table I am unable to display the data being retrieved with data-url

Question

I am using bootstrap-table and wish to load JSON data from a URL and display it in the table. I've tried following the library documentation and while I can see that the data is getting loaded correctly into the browser, it is not being displayed in the table.

I have created a table that looks like this:

<table id="meetingPoiModalTable" class="caption-top"
       data-toggle="table"
       data-url="http://example.org/data">
  <caption class="h5">Points of Interest</caption>
  <thead>
    <tr>
      <th data-field="title" data-title="Title">Title</th>
    </tr>
  </thead>
</table>

The table is wrapped in a modal, so I am using the following code to reset the view when the modal is toggled:

let $meetingPoiModalTable = $('#meetingPoiModalTable');

$(function() {
    $('#meetingPlanModal').on('shown.bs.modal', function () {
        $meetingPoiModalTable.bootstrapTable('resetView');
    })
})

The JSON is formatted thusly:

{
  "access_time": "2023-09-06 20:38:47.323838",
  "meeting_date": "2023-07-17",
  "meeting_plan": {
    "count": 2,
    "items": [
      {
        "m_title": "build_an_arcade",
        "section": "plans",
        "title": "Build an Arcade",
        "url": "/agendas/2023-07-17#collapse-build_an_arcade"
      },
      {
        "m_title": "don_t_waste_money",
        "section": "orders",
        "title": "Don't Waste Money",
        "url": "/agendas/2023-07-17#collapse-don_t_waste_money"
      }
    ]
  },
  "poi": {
    "count": 3,
    "items": [
      {
        "m_title": "build_an_arcade",
        "section": "plans",
        "title": "Build an Arcade",
        "url": "/agendas/2023-07-17#collapse-build_an_arcade"
      },
      {
        "m_title": "don_t_waste_money",
        "section": "orders",
        "title": "Don't Waste Money",
        "url": "/agendas/2023-07-17#collapse-don_t_waste_money"
      },
      {
        "m_title": "grow_up",
        "section": "refused_items",
        "title": "Grow Up",
        "url": "/agendas/2023-07-17#collapse-grow_up"
      }
    ]
  }
}

I've opened the Chrome inspector and viewed the data that gets pulled in when I load the modal, and the JSON seems correct and intact. I am not, however, seeing the data in the table. Instead I see "No matching records found".

I'm thinking that I need to somehow specify that I only want to base my rows on the items in the poi object, but I'm not sure how to accomplish this.

Answer 1

I know this is an older post, but in the interest of someone running across it in the future, or perhaps the OP still needing the answer, here is one for reference. It actually incorporates some interesting aspects of how bootstrap table works with nested JSON.

The question is looking to output any title from the JSON that is loaded.

<th data-field="title" data-title="Title">Title</th>

However, there are two main issues.

1. title appears both in meeting_plan and in poi in the sample.
2. In both cases, title is nested inside items.

Generally, I try to always give bootstrap-table a flat JSON input, usually rewriting the response either on the server side, if I control it, or client side if that isn't possible.

So, you could flatten it with a function like the following, which will get the title from both sections (assume $data is your JSON)

 $data.forEach(row => {
    // Merge meeting_plan.items and poi.items
    var combinedItems = [];
    if (row.meeting_plan && row.meeting_plan.items) {
      combinedItems = combinedItems.concat(row.meeting_plan.items);
    }
    if (row.poi && row.poi.items) {
      combinedItems = combinedItems.concat(row.poi.items);
    }

    // Create a new row in the flattenedData for each item
    combinedItems.forEach(item => {
      flattenedData.push({
        title: item.title,
        // Add other properties you want to display in each row
      });
    });
  });

And then to initialize the table, the load method can be used.

function, then resetView
  $(function () {
    $('#meetingPlanModal').on('shown.bs.modal', function () {
      $meetingPoiModalTable.bootstrapTable('load', flattenedData).bootstrapTable('resetView');
    })
  })

Here is a working example using the bootstrap-table online editor. Side note:

Just for the sake of trying it, I realized that it is possible to do something like data-field=meeting_plan.count which will show 2 in the table. However, it seems as though this is as much nesting as it will handle, at least in my testing.