How to assign and iterate only once over array?

Question

Feel free to flag this question if this is a duplicate and feel free to reword the title if you have better title. I did not know how to word the title. I have 2 different arrays. First array contains a set of users and second array contains a set of avatars. It's important to mention that the array of avatars will always be bigger than users. I need to pair only one avatar per user. Each user should not have the same avatar and each avatar should match the user's gender. How can I achieve this?

avatars = [
    {
        "id" : 1,
        "image" : "maleavatar1",
        "gender": "male"
    },
    {
        "id" : 2,
        "image" : "maleavatar2",
        "gender": "male"
    },
    {
        "id" : 3,
        "image" : "maleavatar3",
        "gender": "male"
    },
    {
        "id" : 4,
        "image" : "femaleavatar1",
        "gender": "female"
    },
    {
        "id" : 5,
        "image" : "femaleavatar2",
        "gender": "female"
    },
    {
        "id" : 6,
        "image" : "femaleavatar3",
        "gender": "female"
    },
    {
        "id" : 7,
        "image" : "femaleavatar4",
        "gender": "female"
    },

]
users = [
    {
        "id" : 1,
        "name" : "Manila",
        "gender": "female"
    },
    {
        "id" : 2,
        "name" : "Josy",
        "gender": "female"
    },
    {
        "id" : 3,
        "name" : "Eliza",
        "gender": "female"
    },
    {
        "id" : 4,
        "name" : "Martin",
        "gender": "male"
    },
    {
        "id" : 5,
        "name" : "Mark",
        "gender": "male"
    },
    {
        "id" : 6,
        "name" : "John",
        "gender": "male"
    }

]

var count = 0;
var randUser = '';
var randos = [];
var b_s = users.length;
var a_s = avatars.length;

users.forEach(function(user){count++
    
avatars.forEach(function(avatar){

if(avatar.gender === user.gender){

randUser = {

    "name" : user.name,
    "avatar" : avatar.image,
    "gender" : user.gender


}

  //push users
randos.push(randUser);

}

})

})
console.log(randos);

Won't search for duplicates for you or change the title, but will give you the search to do: stackoverflow.com/… — Randy Casburn
You can't exit a forEach loop before it finishes. What I'd do is for each user, filter based on gender, pick a random avatar, then remove it from the original pool: jsfiddle.net/f7586dLx — Chris G

danh danh · Accepted Answer · 2022-01-19T00:06:29

It's a good practice, when you hear "random without duplicates", to think "shuffle".

So to assign random, non-repeating, correctly gendered avatars, segregate the avatars by gender, shuffle the male and female avatars, then assign them sequentially to users....

const avatars = getAvatars();  // just to move the data to the bottom of the snippet
const users = getUsers();

const shuffledMales = shuffle(avatars.filter(a => a.gender==="male"));
const shuffledFemales = shuffle(avatars.filter(a => a.gender==="female"));

let maleIndex = 0, femaleIndex = 0;
users.forEach(user => {
  user.avatar = user.gender === "male" ? shuffledMales[maleIndex++] : shuffledFemales[femaleIndex++];
});

console.log(users);

// fisher-yates shuffle, adapted from https://bost.ocks.org/mike/shuffle/
function shuffle(array) {
  let copy = [],
    n = array.length,
    i;
  while (n) {
    let i = Math.floor(Math.random() * array.length);
    if (i in array) {
      copy.push(array[i]);
      delete array[i];
      n--;
    }
  }
  return copy;
}

function getAvatars() {
  return [{
      "id": 1,
      "image": "maleavatar1",
      "gender": "male"
    },
    {
      "id": 2,
      "image": "maleavatar2",
      "gender": "male"
    },
    {
      "id": 3,
      "image": "maleavatar3",
      "gender": "male"
    },
    {
      "id": 4,
      "image": "femaleavatar1",
      "gender": "female"
    },
    {
      "id": 5,
      "image": "femaleavatar2",
      "gender": "female"
    },
    {
      "id": 6,
      "image": "femaleavatar3",
      "gender": "female"
    },
    {
      "id": 7,
      "image": "femaleavatar4",
      "gender": "female"
    },
  ];
}

function getUsers() {
  return [{
      "id": 1,
      "name": "Manila",
      "gender": "female"
    },
    {
      "id": 2,
      "name": "Josy",
      "gender": "female"
    },
    {
      "id": 3,
      "name": "Eliza",
      "gender": "female"
    },
    {
      "id": 4,
      "name": "Martin",
      "gender": "male"
    },
    {
      "id": 5,
      "name": "Mark",
      "gender": "male"
    },
    {
      "id": 6,
      "name": "John",
      "gender": "male"
    }
  ];
}

How to assign and iterate only once over array?

2 Answers