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](https://stackoverflow.com/a/1063027/3082296) -> then `appendChild` — adiga, May 11 '19 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, May 11 '19 at 17:42
Since this is not about your template framework, please click [edit](https://stackoverflow.com/posts/56092751/edit) then the `[<>]` snippet editor and create a [mcve] with relevant RENDERED HTML and JS — mplungjan, May 11 '19 at 17:56
ID's need tp be unique. I made you the snippet I asked for. Please update with relevant HTML — mplungjan, May 12 '19 at 07:15

adiga · Accepted Answer · 2019-05-11T17:52:29.310

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 '19 at 17:52

answered May 11 '19 at 17:47

adiga

34,372
9
61
83

Thanks! I just tried to add this exact code inside of a Javascript html – locq May 11 '19 at 18:15
1

@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 – adiga May 11 '19 at 18:17
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! – locq May 11 '19 at 19:18
@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 May 12 '19 at 12:28

mplungjan · Answer 2 · 2019-05-12T12:47:56.713

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>

Sorting order of randomly generated numbers with Javascript

2 Answers2