Bootstrap Tables example

<!DOCTYPE html>
<html>

  <head>
    <script data-require="jquery@2.1.1" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link data-require="bootstrap@3.2.0" data-semver="3.2.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" />
    <script data-require="bootstrap@3.2.0" data-semver="3.2.0" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.js"></script>
    <link rel="stylesheet" href="http://wenzhixin.net.cn/p/bootstrap-table/src/bootstrap-table.css"/>
    <script src="http://wenzhixin.net.cn/p/bootstrap-table/src/bootstrap-table.js"></script>

    <script src="script.js"></script>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <h1>Tables - Bootstrap Tables plugin</h1>
    <table data-url="data.json" data-toggle="table" data-height="299"  data-response-handler="responseHandler">
        <thead>
        <tr>
            <th data-field="id">ID</th>
            <th data-field="name">Name</th>
            <th data-field="kids.id">Kids Id</th>
            <th data-field="kids.name">Kids Name</th>
        </tr>
        </thead>
    </table>
    <script>
        function responseHandler(res) {
            var flatArray = [];
            $.each(res, function(i, element) { 
                flatArray.push(JSON.flatten(element));
            });
            return flatArray;
        }
    </script>
  </body>

</html>

// Code goes here
JSON.flatten = function(data) {
    var result = {};
    function recurse (cur, prop) {
      if (Object(cur) !== cur) {
          result[prop] = cur;
      } else if (Array.isArray(cur)) {
           for(var i=0, l=cur.length; i<l; i++)
               recurse(cur[i], prop + "[" + i + "]");
          if (l === 0)
              result[prop] = [];
          } else {
              var isEmpty = true;
              for (var p in cur) {
                  isEmpty = false;
                  recurse(cur[p], prop ? prop+"."+p : p);
              }
              if (isEmpty && prop)
                  result[prop] = {};
          }
      }
      recurse(data, "");
      return result;
}

/* Styles go here */

[{
   "id": 123,
   "name": "blabla1",
   "kids": {
      "id": "kid1",
      "name": "kk1"
   }
},{
   "id": 456,
   "name": "blabla2",
   "kids": {
      "id": "kid2",
      "name": "kk2"
   }
}]