Как отобразить все поля вложенного json в табличном формате, используя Bootstrap

Question

Я хочу написать утилиту, которая подключается к API REST, загружает данные в формате JSON, а затем рисует данные как вложенные таблицы, используя Bootstrap.

JSON Данные -

[
    {
     "id" : "Id1",
     "name" : "Name1",
     "orders" : [{"orderId" : "o1", "size" : 34}, {"orderId" : "o2", "size" : 3}]
     },
    {
     "id" : "Id2",
     "name" : "Name2",
     "orders" : [
        {"orderId" : "o3", "size" : 5, "addresses" : [{"addressId" : "a1", "phone" : "1235"}, {"addressId" : "a2", "phone" : 555}]},
        {"orderId" : "o4", "size" : 5, "addresses" : [{"addressId" : "a3", "phone" : "1235"}]}
      ]
    }
]

Я посмотрел на функцию вспомогательной таблицы Bootstrap, однако она Кажется, что это должно было бы много пользовательского кода, чтобы это заработало. Есть ли лучший способ привязать json к таблице в общем виде c?

Редактировать

Потратив некоторое время, я смог достичь этого - Как видите, я мог бы получить один уровень вложенности, однако мне просто нужно go один уровень в глубину. Есть предложения?

<script>
  var $table = $('#table')

  function buildTable($el, jsonData) {
    var i; var j; var row
    var columns = []
    var data = []

    if(!Array.isArray(jsonData) && jsonData.length == 0) {
        return;
    }

    Object.keys(jsonData[0]).forEach( (k) => {
        columns.push({
            field: k,
            title: k,
            sortable: true
        })
    })

    for(var j = 0; j < jsonData.length; j++) {
        row = {}
        Object.keys(jsonData[j]).forEach( (k) => {
            row[k] = jsonData[j][k]
        })
        data.push(row)
    }


    $el.bootstrapTable({
      columns: columns,
      data: data,
      detailFilter: function (index, row) {
          console.log("detail filter " + Object.values(row))
          for(var k in row) {
            if(Array.isArray(row[k])){
                return true;
            }
          }
          return false;
      },

      onExpandRow: function (index, row, $detail) {
        console.log("expand row keys " + Object.keys(row))
        console.log("expand row vals " + Object.values(row))
        var newRow = {};
        for(var k in row) {
            if(Array.isArray(row[k])){
                alert('found ' + row[k])
                newRow = row[k]
                break
            }
         }
         buildTable($detail.html('<table></table>').find('table'), newRow)
      }
    })

  };
        var mydata = 
            [
                {
                    "id": 0,
                    "name": "test0",
                    "price": "$0",
                    "orders" : 
                    [
                    {
                        "name" : "ABC",
                        "size" : 25,
                        "someList": [{"a":1, "b":2}, {"a":3, "b":4}]
                    },
                    {
                        "name" : "XYZ",
                        "size" : 50
                    }
                    ]
                }
/*              {
        "id": 1,
        "name": "test1",
        "price": "$1"
    },
    {
        "id": 2,
        "name": "test2",
        "price": "$2",
        "orders" : [{"name" : "def", "size": 45}]
    }*/
];

  $(function() {
    buildTable($table, mydata)
  })