Sorting order of randomly generated numbers with Javascript

Question

I have just added a Javascript function in my html to generate random numbers between 30 and 100 for every list item, and I'm trying to figure out how to sort these numbers in reverse and make sure that the first item always have a value of 100.

To add context, my goal is to give percent matching scores to my search results. ex: 90% Match.

For example the expected result would be this:

List of item (in reverse order with 100 as default first value):

1. 100%

2. 92%

3. 86%

4. 80%

5. 71%

6. 65%

7. 58%

8. 45%

9. 30%

While at the moment it look like this:

List of item (random order):

1. 58%

2. 66%

3. 97%

4. 58%

5. 89%

6. 61%

7. 63%

8. 86%

9. 46%

The html where the numbers are currently being displayed:

<div>
   {% if  page_obj.object_list %}
       <ol class="row top20" id="my_list">

          {% for result in page_obj.object_list %}

          <li id="list_item">
              <div class="showcase col-sm-6 col-md-4">
               <a href="{{ result.object.get_absolute_url }}">
                      <h3>{{result.object.title}}</h3>
                      <h5>{{ result.object.destination }}</h5>
                      <img src="{{ result.object.image }}" class="img-responsive">
               </a>
               </div>
          </li>

           {% endfor %}

       </ol>
</div>
    {% endif %}

How to sort the order in reverse and give a default value of 100 to the first result?

My script

var orderedList = document.getElementById("my_list");
var itemLength = 9; //REPLACE THIS WITH THE LENGTH OF THE ITEM LIST

function getRandomInt(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

var listItem;
var randomInt;

for (var i = 0; i < itemLength; i++) {

  listItem = document.getElementById("list_item");
  randomInt = document.createTextNode(getRandomInt(30, 100).toString() + "%");
  listItem.appendChild(randomInt);
  orderedList.appendChild(listItem);
}

<ul id="my_list">
  <li id="list_item"></li>
</ul>

Get itemLength random numbers and push to an array -> sort the array of numbers -> then appendChild — adiga
– adiga, Commented May 11, 2019 at 17:38
Thanks for the fast response, could you include an example ny answering the question or by adding a comment, I'm very new to this and not quite sure to understand what you meant. — locq
– locq, Commented May 11, 2019 at 17:42
Since this is not about your template framework, please click edit then the [<>] snippet editor and create a minimal reproducible example with relevant RENDERED HTML and JS — mplungjan
– mplungjan, Commented May 11, 2019 at 17:56
ID's need tp be unique. I made you the snippet I asked for. Please update with relevant HTML — mplungjan
– mplungjan, Commented May 12, 2019 at 7:15

adiga · Accepted Answer · 2019-05-11 17:52:29Z

1

You could create an array of random numbers first and sort them. Then, loop through them and add them to the DOM as you're currently doing

// get a default 100 into the array
var arrayOfNumbers = [100],
    listItem = document.getElementById("list_item");

// get itemLength random numbers
for (let i = 0; i < itemLength; i++) {
  arrayOfNumbers.push(getRandomInt(30, 100))
}

// sort the array of random numbers
arrayOfNumbers.sort(function(a, b) {
  return b - a
})

// now do the lopping and creating elements
for (let i = 0; i < arrayOfNumbers.length; i++) {
  let randomInt = document.createTextNode(arrayOfNumbers[i] + "%");
  listItem.appendChild(randomInt);
  orderedList.appendChild(listItem);
}

edited May 11, 2019 at 17:52

answered May 11, 2019 at 17:47

adiga

35.4k9 gold badges65 silver badges88 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

locq Over a year ago

Thanks! I just tried to add this exact code inside of a Javascript html <script> and I get this error in the console: Uncaught ReferenceError: itemLength is not defined and getRandomInt is not defined, what should I do?

adiga Over a year ago

@locq This is not the complete code. You have to use it in conjunction with your code. I have excluded declarations of itemLength, orderedList , getRandomInt function. You need to add those things from your code. You can replace everything below the getRandomInt function with my code

locq Over a year ago

Okay so Its working fine but the numbers were being displayed at the end of all items and not inside of every item, so I added this line in the looping section: listItem = document.getElementById("list_item"); And changed the ItemLenght from 9 to 8. Now it works perfectly!! Thanks a lot!

mplungjan Over a year ago

@locq You may get 100% twice in the above. Mine creates as many as there are items and forces the first to be 100

mplungjan · Accepted Answer · 2019-05-12 12:47:56Z

ES6 version

const getRandomInt = ((min, max) => Math.floor(Math.random() * (max - min + 1)) + min);
const list = document.querySelectorAll('#my_list li');
[...Array(list.length - 1)
    .fill()
    .map(() => getRandomInt(30, 99)), 
    100]
  .sort((a, b) => b - a)
  .forEach((item, i) => {
    list[i].appendChild(document.createTextNode(item + '%'));
  })

<ol class="row top20" id="my_list">
  <li class="list_item">
    <div class="showcase col-sm-6 col-md-4">
      <a href="#">
        <h3>Title 1</h3>
        <h5>Destination 1</h5>
        <img src="..." class="img-responsive">
      </a>
    </div>
  </li>
  <li class="list_item">
    <div class="showcase col-sm-6 col-md-4">
      <a href="#">
        <h3>Title 2</h3>
        <h5>Destination 2</h5>
        <img src="..." class="img-responsive">
      </a>
    </div>
  </li>
  <li class="list_item">
    <div class="showcase col-sm-6 col-md-4">
      <a href="#">
        <h3>Title 3</h3>
        <h5>Destination 3</h5>
        <img src="..." class="img-responsive">
      </a>
    </div>
  </li>
</ol>

Collectives™ on Stack Overflow

Sorting order of randomly generated numbers with Javascript

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related