Question: This is my code

```
let array = [
  [
    ['firstName', 'Mary'],
    ['lastName', 'Jenkins'],
    ['age', 36],
    ['gender', 'female'],
  ],
  [
    ['lastName', 'Kim'],
    ['age', 40],
    ['gender', 'female'],
  ],  [
    ['firstName', 'Joe'],
    ['age', 42],
    ['gender', 'male'],
  ],
]

array.map(function (el) {
   return Object.assign({}, el)
})

```

However this is how it appears in the console

[![enter image description here](https://i.stack.imgur.com/kPD74.png)](https://i.stack.imgur.com/kPD74.png)

I've tried `array.flat()` but did not work as intended

I want the result to look something like this

```
[[{firstName : 'Mary'}.{lastName : 'jenkins'},..],...]

```

Answer: 
I was facing the same problem, the solution I found was to include the css file from bootstraptable on the head section of the html file.

```
<head>
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.18.2/dist/bootstrap-table.min.css">
</head>

```

also if you are working with the local files, do not forget to refer to the `bootstrap-table.min.css` file.
What worked for me was overriding Bootstrap´s CSS with my own. In a `yourname.css` file that has to be declared in HEAD **after** the Bootstrap CSS link, include this:

```
.fixed-table-loading {
    visibility: hidden;
    top: 0px;
    display: none;
}

.loading-wrap {
    visibility: hidden;
    display: none;
}

.table-loading {
    visibility: hidden;
    display: none;
}

.loading {
    visibility: hidden;
    display: none;
}

```

This prevents the div that contains the "*Loading, please wait*" from appearing.