How to preserve element position and allow randomization (shuffling) in a JavaScript array?

Question

I don't know if it's the best way I'm implementing it, what I can't do is that pressing the block button only allows randomizing (shuffling) the elements that are not blocked, I tried several ways that doesn't work, for example, when i pressed the locked button, it saved the id and then compare, but i couldn't do it.

    // this array, button locked 
    const dataId = ["b79bc2a0-da09-4620-9b3d-1ed32d697f0a", "a60d0c77-439d-4764-b115-f4c24f857cd1"];

    const data =[
      {
          id: "b79bc2a0-da09-4620-9b3d-1ed32d697f0a"
          name: "three"
          email: "three@gmail.com"
      },
      {
          id: "c8648167-3103-44f9-b03c-3bd951fb339c"
          name: "two"
          email: "two@gmail.com"
      },
      {
          id: "a60d0c77-439d-4764-b115-f4c24f857cd1"
          name: "one"
          email: "one@gmail.com"
      }
    ];

function shuffle(array) {
  let currentIndex = array.length,
    randomIndex;

  // While there remain elements to shuffle.
  while (currentIndex !== 0) {
    // Pick a remaining element.
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex--;

    // And swap it with the current element.
    [array[currentIndex], array[randomIndex]] = [
      array[randomIndex],
      array[currentIndex]
    ];
  }

  return array;
}

  let locked = [];
    data.filter(
      (d: IList) => !dataId.includes(d.id) && locked.push(d)
    );

    const data = shuffle(locked);

As you can see, what I was doing is not right and I can't think of how to implement it. Is it possible to do something like what I am implementing?

any information you need please let me know

Thanks for answering, if I block element two, it will only change element one and three, but I don't know if that will be possible — Jackson Quintero, Oct 15 '22 at 12:33
Related question and source of the shuffle code: [How to randomize (shuffle) a JavaScript array?](https://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array) — Yogi, Oct 15 '22 at 12:56
And the expected output should include both locked and unlocked items? — Yogi, Oct 15 '22 at 13:10
thanks for replying, yes, locked and unlocked and it has to stay in the same place if it's locked — Jackson Quintero, Oct 15 '22 at 13:30

n-- · Answer 1 · 2022-10-16T11:39:27.197

It can be done by assigning a locked flag to the selected items, create a randomized array with unlocked items, then mapping locked and unlocked items in a resulting array:

const shuffle = array => {
    let r = array.map(i => [i, Math.random()])
        .sort((a, b) => a[1] - b[1]).filter(i => !i[0].locked);
    return array.map(i => i.locked ? i : r.pop()[0]);
};

An example of this in action is below:

label {
  font-family: monospace;
}

<script type="module">

import {State, insert} from '//cdn.jsdelivr.net/npm/karyon/karyon.js';

const data = [
  {
      id: "b79bc2a0-da09-4620-9b3d-1ed32d697f0a",
      name: "three",
      email: "three@gmail.com"
  },
  {
      id: "c8648167-3103-44f9-b03c-3bd951fb339c",
      name: "two",
      email: "two@gmail.com"
  },
  {
      id: "a60d0c77-439d-4764-b115-f4c24f857cd1",
      name: "one",
      email: "one@gmail.com"
  },
  {
      id: "c79bc2a0-da09-4620-9b3d-1ed32d697f0a",
      name: "four",
      email: "four@gmail.com"
  },
  {
      id: "d8648167-3103-44f9-b03c-3bd951fb339c",
      name: "six",
      email: "six@gmail.com"
  },
  {
      id: "e60d0c77-439d-4764-b115-f4c24f857cd1",
      name: "nine",
      email: "nine@gmail.com"
  }
];

const shuffle = array => {
    let r = array.map(i => [i, Math.random()])
        .sort((a, b) => a[1] - b[1]).filter(i => !i[0].locked());
    return array.map(i => i.locked() ? i : r.pop()[0]);
};

const rows = State(data.map(({locked = State(), id, email}) => (
    {locked, content: [
      {is: 'input', id, props: {type: 'checkbox', value: locked}},
      {is: 'label', attrs: {for: id}, content: [email, ': ', id]}
    ]}
)));

const app = [
    {is: 'button', content: 'Shuffle',
        listen: {click: () => rows(shuffle(rows()))}},
    {content: rows}
];

insert(app, document.body);

</script>

How to preserve element position and allow randomization (shuffling) in a JavaScript array?

1 Answers1