How to insert the following JSON Data into a table?

Question

I'm very frustrated trying to fix the following code. I'm new in Javascript and I'd like a little help here:

I have the following code where I've tried to insert all this in Bootstrap-Table but without success. I'm always getting the next error:

No matching records found.

<script>
    function showResult(sectoresURL) {

      $('#info').empty(); // First, remove all child in stack.

      $.getJSON(sectoresURL, function (json) {
        if (sectores.getVisible() && typeof(json.features[0])  != 'undefined') {
          $('#info').append('<table id=table-javascript></table>');
          buildSectorTable(sectoresURL);
        }
      });
    }

    function buildSectorTable(sectoresURL) {

      $('#table-javascript').bootstrapTable({
              method: 'get',
              url: sectoresURL,
              cache: true,
              height: 400,
              striped: true,
              pagination: true,
              pageSize: 50,
              pageList: [10, 25, 50, 100, 200],
              search: true,
              showRefresh: true,
              minimumCountColumns: 2,
              clickToSelect: false,
              showToggle: true,
              columns: [{
                  field: 'type',
                  title: 'Numero',
                  align: 'center',
                  valign: 'bottom',
                  sortable: true
              }]
      });
    }

    </script>

Here, I just tried to insert "Numero".

By the way, the JSON Data is:

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "id": "SectoresComunaCurico.34",
      "geometry_name": "FiguraGeometrica",
      "properties": {
        "Numero": 19,
        "Sector": "Cordillera"
      }
    }
  ],
  "crs": {
    "type": "name",
    "properties": {
      "name": "urn:ogc:def:crs:EPSG::32319"
    }
  }
}

Answer 1

First, define your table in HTML with an ID so you can access it. If you are using Bootstrap, give it the necessary classes. ( class="table" )

<table id="table-id">
    <thead>
        <tr>
            <th>Some Header</th>
            <th>Another Header</th>
        </tr>
    </thead>
    <tbody>

    </tbody>
</table>

Now, for the Javascript, you'll need to add to the table.

$('#table-id > tbody').append('<tr><td>Some Content</td><td>Some Other Content</td></tr>');

If you want to add more than one row, loop through the list and run the code each time for that item in the list.

If you need to clear the table (new data, etc.), you can use

$('#table-id > tbody').children().remove();

Please ask for clarification if you need it.