OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Some options are not beeing displayed

  • Thread starter Thread starter David Márquez
  • Start date Start date
D

David Márquez

Guest
In my HTML I have created a select tag and I want to add options dinamically.

Code:
<select class="form-control selectpicker"
data-style="btn btn-outline"
id="mySelect"
data-live-search="true"
>
   <option class="d-none" value="all" selected>My option</option>
</select>

I have to read the keys and values from a json and then create the options. There are around 2000 keys in the file.

Code:
const mySelect = document.getElementById("mySelect");
  fetch("myFile.json")
    .then((response) => response.json())
    .then((result) => {
      Object.entries(result).forEach(([key, value]) => {
        const option = document.createElement("option");
        option.value = value;
        option.text = key;
        mySelect.appendChild(option);
      });
      $(mySelect).selectpicker("refresh");
    });

Only around 100 options are beeing created. But if I make a console.log inside the loop I get all keys. How is it possible? Am I doing something wrong?

<p>In my HTML I have created a select tag and I want to add options dinamically.</p>
<pre><code><select class="form-control selectpicker"
data-style="btn btn-outline"
id="mySelect"
data-live-search="true"
>
<option class="d-none" value="all" selected>My option</option>
</select>
</code></pre>
<p>I have to read the keys and values from a json and then create the options. There are around 2000 keys in the file.</p>
<pre><code>const mySelect = document.getElementById("mySelect");
fetch("myFile.json")
.then((response) => response.json())
.then((result) => {
Object.entries(result).forEach(([key, value]) => {
const option = document.createElement("option");
option.value = value;
option.text = key;
mySelect.appendChild(option);
});
$(mySelect).selectpicker("refresh");
});
</code></pre>
<p>Only around 100 options are beeing created. But if I make a console.log inside the loop I get all keys. How is it possible? Am I doing something wrong?</p>
 
Top