I'm using the bootstrap-table.js plugin to populate a table using dating returned from my api. I'm using the data format where you define the data using an array of objects and then define a "data-field" attribute in the <th> of the html table to link the data from the array. I need to include a select element in one of the columns so the use can select an option. The data will be sent back to my database using another api. Howvever, when I try to add a select element to the data array using jquery, the HTML output is [object Object]. I'm not sure how I can get a select element to appear using this method. Any advice is greatly appreciated!
This is the function that populates the table. The 'reason' key takes in the selection variable as a value, but the output in html is [object Object]
$(function () {
let selection = $('<select class="form-select" id="inputGroupSelect01"><option>hello</option><option>goodbye</option><option>welcome</option></select>')
let data = [
{
'date': obj.model.data.timestamp[365],
'temperature': obj.model.data.average_dry_bulb_temperature[365],
'hdd': parseFloat(obj.model.data.degree_day[365]).toFixed(0),
'meterReading': obj.model.data.raw_value[365],
'expected': parseFloat(obj.model.data.predicted_value[365]).toFixed(0),
'reason': selection
},
{
'date': obj.model.data.timestamp[366],
'temperature': obj.model.data.average_dry_bulb_temperature[366],
'hdd': parseFloat(obj.model.data.degree_day[366]).toFixed(0),
'meterReading': obj.model.data.raw_value[366],
'expected': parseFloat(obj.model.data.predicted_value[366]).toFixed(0),
'reason': selection
},
{
'date': obj.model.data.timestamp[367],
'temperature': obj.model.data.average_dry_bulb_temperature[367],
'hdd': parseFloat(obj.model.data.degree_day[367]).toFixed(0),
'meterReading': obj.model.data.raw_value[367],
'expected': parseFloat(obj.model.data.predicted_value[367]).toFixed(0),
'reason': selection
},
{
'date': obj.model.data.timestamp[368],
'temperature': obj.model.data.average_dry_bulb_temperature[368],
'hdd': parseFloat(obj.model.data.degree_day[368]).toFixed(0),
'meterReading': obj.model.data.raw_value[368],
'expected': parseFloat(obj.model.data.predicted_value[368]).toFixed(0),
'reason': selection
},
{
'date': obj.model.data.timestamp[369],
'temperature': obj.model.data.average_dry_bulb_temperature[369],
'hdd': parseFloat(obj.model.data.degree_day[369]).toFixed(0),
'meterReading': obj.model.data.raw_value[369],
'expected': parseFloat(obj.model.data.predicted_value[369]).toFixed(0),
'reason': selection
},
{
'date': obj.model.data.timestamp[370],
'temperature': obj.model.data.average_dry_bulb_temperature[370],
'hdd': parseFloat(obj.model.data.degree_day[370]).toFixed(0),
'meterReading': obj.model.data.raw_value[370],
'expected': parseFloat(obj.model.data.predicted_value[370]).toFixed(0),
'reason': selection
},
{
'date': obj.model.data.timestamp[371],
'temperature': obj.model.data.average_dry_bulb_temperature[371],
'hdd': parseFloat(obj.model.data.degree_day[371]).toFixed(0),
'meterReading': obj.model.data.raw_value[371],
'expected': parseFloat(obj.model.data.predicted_value[371]).toFixed(0),
'reason': selection
},
{
'date': obj.model.data.timestamp[372],
'temperature': obj.model.data.average_dry_bulb_temperature[372],
'hdd': parseFloat(obj.model.data.degree_day[372]).toFixed(0),
'meterReading': obj.model.data.raw_value[372],
'expected': parseFloat(obj.model.data.predicted_value[372]).toFixed(0),
'reason': selection
},
{
'date': obj.model.data.timestamp[373],
'temperature': obj.model.data.average_dry_bulb_temperature[373],
'hdd': parseFloat(obj.model.data.degree_day[373]).toFixed(0),
'meterReading': obj.model.data.raw_value[373],
'expected': parseFloat(obj.model.data.predicted_value[373]).toFixed(0),
'reason': selection
},
{
'date': obj.model.data.timestamp[374],
'temperature': obj.model.data.average_dry_bulb_temperature[374],
'hdd': parseFloat(obj.model.data.degree_day[374]).toFixed(0),
'meterReading': obj.model.data.raw_value[374],
'expected': parseFloat(obj.model.data.predicted_value[374]).toFixed(0),
'reason': selection
},
{
'date': obj.model.data.timestamp[375],
'temperature': obj.model.data.average_dry_bulb_temperature[375],
'hdd': parseFloat(obj.model.data.degree_day[375]).toFixed(0),
'meterReading': obj.model.data.raw_value[375],
'expected': parseFloat(obj.model.data.predicted_value[375]).toFixed(0),
'reason': selection
},
{
'date': obj.model.data.timestamp[376],
'temperature': obj.model.data.average_dry_bulb_temperature[376],
'hdd': parseFloat(obj.model.data.degree_day[376]).toFixed(0),
'meterReading': obj.model.data.raw_value[376],
'expected': parseFloat(obj.model.data.predicted_value[376]).toFixed(0),
'reason': selection
},
{
'date': obj.model.data.timestamp[377],
'temperature': obj.model.data.average_dry_bulb_temperature[377],
'hdd': parseFloat(obj.model.data.degree_day[377]).toFixed(0),
'meterReading': obj.model.data.raw_value[377],
'expected': parseFloat(obj.model.data.predicted_value[377]).toFixed(0),
'reason': selection
},
{
'date': obj.model.data.timestamp[378],
'temperature': obj.model.data.average_dry_bulb_temperature[378],
'hdd': parseFloat(obj.model.data.degree_day[378]).toFixed(0),
'meterReading': obj.model.data.raw_value[378],
'expected': parseFloat(obj.model.data.predicted_value[378]).toFixed(0),
'reason': selection
},
{
'date': obj.model.data.timestamp[379],
'temperature': obj.model.data.average_dry_bulb_temperature[379],
'hdd': parseFloat(obj.model.data.degree_day[379]).toFixed(0),
'meterReading': obj.model.data.raw_value[379],
'expected': parseFloat(obj.model.data.predicted_value[379]).toFixed(0),
'reason': selection
},
{
'date': obj.model.data.timestamp[380],
'temperature': obj.model.data.average_dry_bulb_temperature[380],
'hdd': parseFloat(obj.model.data.degree_day[380]).toFixed(0),
'meterReading': obj.model.data.raw_value[380],
'expected': parseFloat(obj.model.data.predicted_value[380]).toFixed(0),
'reason': selection
},
{
'date': obj.model.data.timestamp[381],
'temperature': obj.model.data.average_dry_bulb_temperature[381],
'hdd': parseFloat(obj.model.data.degree_day[381]).toFixed(0),
'meterReading': obj.model.data.raw_value[381],
'expected': parseFloat(obj.model.data.predicted_value[381]).toFixed(0),
'reason': selection
},
{
'date': obj.model.data.timestamp[382],
'temperature': obj.model.data.average_dry_bulb_temperature[382],
'hdd': parseFloat(obj.model.data.degree_day[382]).toFixed(0),
'meterReading': obj.model.data.raw_value[382],
'expected': parseFloat(obj.model.data.predicted_value[382]).toFixed(0),
'reason': selection
},
{
'date': obj.model.data.timestamp[383],
'temperature': obj.model.data.average_dry_bulb_temperature[383],
'hdd': parseFloat(obj.model.data.degree_day[383]).toFixed(0),
'meterReading': obj.model.data.raw_value[383],
'expected': parseFloat(obj.model.data.predicted_value[383]).toFixed(0),
'reason': selection
},
{
'date': obj.model.data.timestamp[384],
'temperature': obj.model.data.average_dry_bulb_temperature[384],
'hdd': parseFloat(obj.model.data.degree_day[384]).toFixed(0),
'meterReading': obj.model.data.raw_value[384],
'expected': parseFloat(obj.model.data.predicted_value[384]).toFixed(0),
'reason': selection
},
{
'date': obj.model.data.timestamp[385],
'temperature': obj.model.data.average_dry_bulb_temperature[385],
'hdd': parseFloat(obj.model.data.degree_day[385]).toFixed(0),
'meterReading': obj.model.data.raw_value[385],
'expected': parseFloat(obj.model.data.predicted_value[385]).toFixed(0),
'reason': selection
},
{
'date': obj.model.data.timestamp[386],
'temperature': obj.model.data.average_dry_bulb_temperature[386],
'hdd': parseFloat(obj.model.data.degree_day[386]).toFixed(0),
'meterReading': obj.model.data.raw_value[386],
'expected': parseFloat(obj.model.data.predicted_value[386]).toFixed(0),
'reason': selection
},
{
'date': obj.model.data.timestamp[387],
'temperature': obj.model.data.average_dry_bulb_temperature[387],
'hdd': parseFloat(obj.model.data.degree_day[387]).toFixed(0),
'meterReading': obj.model.data.raw_value[387],
'expected': parseFloat(obj.model.data.predicted_value[387]).toFixed(0),
'reason': selection
},
{
'date': obj.model.data.timestamp[388],
'temperature': obj.model.data.average_dry_bulb_temperature[388],
'hdd': parseFloat(obj.model.data.degree_day[388]).toFixed(0),
'meterReading': obj.model.data.raw_value[388],
'expected': parseFloat(obj.model.data.predicted_value[388]).toFixed(0),
'reason': selection
},
{
'date': obj.model.data.timestamp[389],
'temperature': obj.model.data.average_dry_bulb_temperature[389],
'hdd': parseFloat(obj.model.data.degree_day[389]).toFixed(0),
'meterReading': obj.model.data.raw_value[389],
'expected': parseFloat(obj.model.data.predicted_value[389]).toFixed(0),
'reason': selection
},
{
'date': obj.model.data.timestamp[390],
'temperature': obj.model.data.average_dry_bulb_temperature[390],
'hdd': parseFloat(obj.model.data.degree_day[390]).toFixed(0),
'meterReading': obj.model.data.raw_value[390],
'expected': parseFloat(obj.model.data.predicted_value[390]).toFixed(0),
'reason': selection
},
{
'date': obj.model.data.timestamp[391],
'temperature': obj.model.data.average_dry_bulb_temperature[391],
'hdd': parseFloat(obj.model.data.degree_day[391]).toFixed(0),
'meterReading': obj.model.data.raw_value[391],
'expected': parseFloat(obj.model.data.predicted_value[391]).toFixed(0),
'reason': selection
},
{
'date': obj.model.data.timestamp[392],
'temperature': obj.model.data.average_dry_bulb_temperature[392],
'hdd': parseFloat(obj.model.data.degree_day[392]).toFixed(0),
'meterReading': obj.model.data.raw_value[392],
'expected': parseFloat(obj.model.data.predicted_value[392]).toFixed(0),
'reason': selection
},
{
'date': obj.model.data.timestamp[393],
'temperature': obj.model.data.average_dry_bulb_temperature[393],
'hdd': parseFloat(obj.model.data.degree_day[393]).toFixed(0),
'meterReading': obj.model.data.raw_value[393],
'expected': parseFloat(obj.model.data.predicted_value[393]).toFixed(0),
'reason': selection
},
{
'date': obj.model.data.timestamp[394],
'temperature': obj.model.data.average_dry_bulb_temperature[394],
'hdd': parseFloat(obj.model.data.degree_day[394]).toFixed(0),
'meterReading': obj.model.data.raw_value[394],
'expected': parseFloat(obj.model.data.predicted_value[394]).toFixed(0),
'reason': selection
},
{
'date': obj.model.data.timestamp[395],
'temperature': obj.model.data.average_dry_bulb_temperature[395],
'hdd': parseFloat(obj.model.data.degree_day[395]).toFixed(0),
'meterReading': obj.model.data.raw_value[395],
'expected': parseFloat(obj.model.data.predicted_value[395]).toFixed(0),
'reason': selection
},
]
$table2.bootstrapTable({ data: data })
})
})
This is the HTML output
<table id="table2" class="table table-bordered table-hover">
<thead>
<tr>
<th style="" data-field="date">
<div class="th-inner ">Date</div>
<div class="fht-cell"></div>
</th>
<th style="" data-field="temperature">
<div class="th-inner ">Temperature</div>
<div class="fht-cell"></div>
</th>
<th style="" data-field="hdd">
<div class="th-inner ">HDD</div>
<div class="fht-cell"></div>
</th>
<th style="" data-field="meterReading">
<div class="th-inner ">Meter</div>
<div class="fht-cell"></div>
</th>
<th style="" data-field="expected">
<div class="th-inner ">Expected</div>
<div class="fht-cell"></div>
</th>
<th style="" data-field="replacement">
<div class="th-inner ">Replacement</div>
<div class="fht-cell"></div>
</th>
<th style="" data-field="reason">
<div class="th-inner ">Reason</div>
<div class="fht-cell"></div>
</th>
<th style="" data-field="notes">
<div class="th-inner ">Notes</div>
<div class="fht-cell"></div>
</th>
</tr>
</thead>
<tbody>
<tr data-index="0">
<td>2020-05-01</td>
<td>74.8</td>
<td>9</td>
<td>8060</td>
<td>7426</td>
<td>-</td>
<td>[object Object]</td>
<td>-</td>
</tr>
<tr data-index="1">
<td>2020-05-02</td>
<td>78.4</td>
<td>6</td>
<td>6300</td>
<td>5717</td>
<td>-</td>
<td>[object Object]</td>
<td>-</td>
</tr>
<tr data-index="2">
<td>2020-05-03</td>
<td>81</td>
<td>3</td>
<td>5520</td>
<td>4483</td>
<td>-</td>
<td>[object Object]</td>
<td>-</td>
</tr>
<tr data-index="3">
<td>2020-05-04</td>
<td>82.4</td>
<td>2</td>
<td>4710</td>
<td>3818</td>
<td>-</td>
<td>[object Object]</td>
<td>-</td>
</tr>
<tr data-index="4">
<td>2020-05-05</td>
<td>77.2</td>
<td>7</td>
<td>4520</td>
<td>6287</td>
<td>-</td>
<td>[object Object]</td>
<td>-</td>
</tr>
<tr data-index="5">
<td>2020-05-06</td>
<td>75.6</td>
<td>8</td>
<td>4710</td>
<td>7046</td>
<td>-</td>
<td>[object Object]</td>
<td>-</td>
</tr>
<tr data-index="6">
<td>2020-05-07</td>
<td>73</td>
<td>11</td>
<td>6140</td>
<td>8281</td>
<td>-</td>
<td>[object Object]</td>
<td>-</td>
</tr>
<tr data-index="7">
<td>2020-05-08</td>
<td>76.6</td>
<td>7</td>
<td>6970</td>
<td>6572</td>
<td>-</td>
<td>[object Object]</td>
<td>-</td>
</tr>
<tr data-index="8">
<td>2020-05-09</td>
<td>68.7</td>
<td>15</td>
<td>5120</td>
<td>10322</td>
<td>-</td>
<td>[object Object]</td>
<td>-</td>
</tr>
<tr data-index="9">
<td>2020-05-10</td>
<td>69.3</td>
<td>15</td>
<td>9460</td>
<td>10037</td>
<td>-</td>
<td>[object Object]</td>
<td>-</td>
</tr>
<tr data-index="10">
<td>2020-05-11</td>
<td>73.6</td>
<td>10</td>
<td>8890</td>
<td>7996</td>
<td>-</td>
<td>[object Object]</td>
<td>-</td>
</tr>
<tr data-index="11">
<td>2020-05-12</td>
<td>69.1</td>
<td>15</td>
<td>7440</td>
<td>10132</td>
<td>-</td>
<td>[object Object]</td>
<td>-</td>
</tr>
<tr data-index="12">
<td>2020-05-13</td>
<td>74.5</td>
<td>10</td>
<td>9040</td>
<td>7569</td>
<td>-</td>
<td>[object Object]</td>
<td>-</td>
</tr>
<tr data-index="13">
<td>2020-05-14</td>
<td>80.6</td>
<td>3</td>
<td>7160</td>
<td>4673</td>
<td>-</td>
<td>[object Object]</td>
<td>-</td>
</tr>
<tr data-index="14">
<td>2020-05-15</td>
<td>80.1</td>
<td>4</td>
<td>4690</td>
<td>4910</td>
<td>-</td>
<td>[object Object]</td>
<td>-</td>
</tr>
<tr data-index="15">
<td>2020-05-16</td>
<td>71.8</td>
<td>12</td>
<td>4730</td>
<td>8850</td>
<td>-</td>
<td>[object Object]</td>
<td>-</td>
</tr>
<tr data-index="16">
<td>2020-05-17</td>
<td>76.5</td>
<td>8</td>
<td>7350</td>
<td>6619</td>
<td>-</td>
<td>[object Object]</td>
<td>-</td>
</tr>
<tr data-index="17">
<td>2020-05-18</td>
<td>80.4</td>
<td>4</td>
<td>6140</td>
<td>4768</td>
<td>-</td>
<td>[object Object]</td>
<td>-</td>
</tr>
<tr data-index="18">
<td>2020-05-19</td>
<td>83.1</td>
<td>1</td>
<td>4900</td>
<td>3486</td>
<td>-</td>
<td>[object Object]</td>
<td>-</td>
</tr>
<tr data-index="19">
<td>2020-05-20</td>
<td>83.8</td>
<td>0</td>
<td>4270</td>
<td>3154</td>
<td>-</td>
<td>[object Object]</td>
<td>-</td>
</tr>
<tr data-index="20">
<td>2020-05-21</td>
<td>81.7</td>
<td>2</td>
<td>4310</td>
<td>4151</td>
<td>-</td>
<td>[object Object]</td>
<td>-</td>
</tr>
<tr data-index="21">
<td>2020-05-22</td>
<td>83.3</td>
<td>1</td>
<td>4310</td>
<td>3391</td>
<td>-</td>
<td>[object Object]</td>
<td>-</td>
</tr>
<tr data-index="22">
<td>2020-05-23</td>
<td>83.7</td>
<td>0</td>
<td>3740</td>
<td>3201</td>
<td>-</td>
<td>[object Object]</td>
<td>-</td>
</tr>
<tr data-index="23">
<td>2020-05-24</td>
<td>80.1</td>
<td>4</td>
<td>0</td>
<td>4910</td>
<td>-</td>
<td>[object Object]</td>
<td>-</td>
</tr>
<tr data-index="24">
<td>2020-05-25</td>
<td>71.1</td>
<td>13</td>
<td>0</td>
<td>9183</td>
<td>-</td>
<td>[object Object]</td>
<td>-</td>
</tr>
<tr data-index="25">
<td>2020-05-26</td>
<td>74.7</td>
<td>9</td>
<td>0</td>
<td>7474</td>
<td>-</td>
<td>[object Object]</td>
<td>-</td>
</tr>
<tr data-index="26">
<td>2020-05-27</td>
<td>73.2</td>
<td>11</td>
<td>0</td>
<td>8186</td>
<td>-</td>
<td>[object Object]</td>
<td>-</td>
</tr>
<tr data-index="27">
<td>2020-05-28</td>
<td>75.7</td>
<td>8</td>
<td>0</td>
<td>6999</td>
<td>-</td>
<td>[object Object]</td>
<td>-</td>
</tr>
<tr data-index="28">
<td>2020-05-29</td>
<td>78.8</td>
<td>5</td>
<td>0</td>
<td>5527</td>
<td>-</td>
<td>[object Object]</td>
<td>-</td>
</tr>
<tr data-index="29">
<td>2020-05-30</td>
<td>77.4</td>
<td>7</td>
<td>0</td>
<td>6192</td>
<td>-</td>
<td>[object Object]</td>
<td>-</td>
</tr>
<tr data-index="30">
<td>2020-05-31</td>
<td>78.6</td>
<td>5</td>
<td>0</td>
<td>5622</td>
<td>-</td>
<td>[object Object]</td>
<td>-</td>
</tr>
</tbody>
</table>
This line gives you a jQuery object:
let selection = $('<select class="form-select" id="inputGroupSelect01"><option>hello</option><option>goodbye</option><option>welcome</option></select>')
Instead, you want a string of HTML:
let selection = '<select class="form-select" id="inputGroupSelect01"><option>hello</option><option>goodbye</option><option>welcome</option></select>'
However, you have coded this so that every <select> will have the same id inputGroupSelect01. You will need to change this so that every one has a different id, since duplicate ids are not allowed.