Working with JavaScript to push numerous results generated by a for loop into an array

Question

Working with JavaScript to push numerous results generated by a for loop into an array

I have developed a simple system that identifies users with matching genre interests as a specific user. I am trying to store the results of the for loop in an array, but currently only the last output is being added. I want all matching results to be included in the array. Any suggestions?

// User database
var jon = {username: 'Jon', genrePref: 'Rock'};
var lucy = {username: 'Lucy', genrePref: 'Pop'};
var mike = {username: 'Mike', genrePref: 'Rock'};
var luke = {username: 'Luke', genrePref: 'House'};
var james = {username: 'James', genrePref: 'House'};
var dave = {username: 'Dave', genrePref: 'Bass'};
var sarah = {username: 'Sarah', genrePref: 'Country'};
var natalie = {username: 'Natalie', genrePref: 'Bass'};

//userProfile.push()

// User database array
var userProfile = [jon, lucy, mike, luke, james, dave, sarah, natalie];


// Object containing username of logged in user and specification of the loaded track's genre
var trackGenre = {username: 'Harry', trackGenre: 'Rock'};

// For loop listing usernames of users with genre preference matching the distributed track
for(i = 0; i < userProfile.length; i++){

  if(userProfile[i].genrePref == trackGenre.trackGenre){

    console.log(userProfile[i].username);

    var matches = [];

    matches.push(userProfile[i].username);

  }
}

console.log(matches)

javascript arrays push

Answer 1

Answer №1

Consider moving the var declaration up to avoid reinitializing it each time and clearing it out:


var trackGenre = {username: 'Harry', trackGenre: 'Rock'};
var matches = [];

// Loop through user profiles to find matches based on genre preference
for(i = 0; i < userProfile.length; i++){

    if(userProfile[i].genrePref == trackGenre.trackGenre){

        console.log(userProfile[i].username);
        matches.push(userProfile[i].username);

    }
}

Answer 2

Consider moving the var declaration up to avoid reinitializing it each time and clearing it out:


var trackGenre = {username: 'Harry', trackGenre: 'Rock'};
var matches = [];

// Loop through user profiles to find matches based on genre preference
for(i = 0; i < userProfile.length; i++){

    if(userProfile[i].genrePref == trackGenre.trackGenre){

        console.log(userProfile[i].username);
        matches.push(userProfile[i].username);

    }
}

Answer 3

Answer №2

In response to the previous answer by @Montagist, I wanted to present two different methods to achieve the desired outcome. The first method utilizes the Array.prototype.forEach() instead of a traditional for loop to iterate over the array of users:

// User database
var jon = {
  username: 'Jon',
  genrePref: 'Rock'
};
var lucy = {
  username: 'Lucy',
  genrePref: 'Pop'
};
// Remaining user objects...
var userProfile = [jon, lucy, /* Additional users */];

// Object with user data for track comparison
var trackGenre = {
    username: 'Harry',
    trackGenre: 'Rock'
  },
  matches = [];

// Using Array.prototype.forEach() to iterate over users and find matches
userProfile.forEach(function(user) {
  if (user.genrePref === trackGenre.trackGenre) {
    matches.push(user.username);
  }
});

console.log(matches) // Example output: ["Jon", "Mike"]

JS Fiddle demo.

Another approach involves both Array.prototype.map() and Array.prototype.filter():

// User database
var jon = {
  username: 'Jon',
  genrePref: 'Rock'
};
var lucy = {
  username: 'Lucy',
  genrePref: 'Pop'
};
// Remaining user objects...
var userProfile = [jon, lucy, /* Additional users */];

// Object with user data for track comparison
var trackGenre = {
    username: 'Harry',
    trackGenre: 'Rock'
  },

  // Using Array.prototype.map() and Array.prototype.filter() to find matches
  matches = userProfile.map(function(user) {
    if (user.genrePref === trackGenre.trackGenre) {
      return user.username;
    }
  }).filter(Boolean);

console.log(matches) // Example output: ["Jon", "Mike"]

JS Fiddle demo.

References:

Answer 4

In response to the previous answer by @Montagist, I wanted to present two different methods to achieve the desired outcome. The first method utilizes the Array.prototype.forEach() instead of a traditional for loop to iterate over the array of users:

// User database
var jon = {
  username: 'Jon',
  genrePref: 'Rock'
};
var lucy = {
  username: 'Lucy',
  genrePref: 'Pop'
};
// Remaining user objects...
var userProfile = [jon, lucy, /* Additional users */];

// Object with user data for track comparison
var trackGenre = {
    username: 'Harry',
    trackGenre: 'Rock'
  },
  matches = [];

// Using Array.prototype.forEach() to iterate over users and find matches
userProfile.forEach(function(user) {
  if (user.genrePref === trackGenre.trackGenre) {
    matches.push(user.username);
  }
});

console.log(matches) // Example output: ["Jon", "Mike"]

JS Fiddle demo.

Another approach involves both Array.prototype.map() and Array.prototype.filter():

// User database
var jon = {
  username: 'Jon',
  genrePref: 'Rock'
};
var lucy = {
  username: 'Lucy',
  genrePref: 'Pop'
};
// Remaining user objects...
var userProfile = [jon, lucy, /* Additional users */];

// Object with user data for track comparison
var trackGenre = {
    username: 'Harry',
    trackGenre: 'Rock'
  },

  // Using Array.prototype.map() and Array.prototype.filter() to find matches
  matches = userProfile.map(function(user) {
    if (user.genrePref === trackGenre.trackGenre) {
      return user.username;
    }
  }).filter(Boolean);

console.log(matches) // Example output: ["Jon", "Mike"]

JS Fiddle demo.

References:

Working with JavaScript to push numerous results generated by a for loop into an array

Answer №1

Answer №2

Similar questions

Error in Next.js Image Component: Missing SRC

Struggling with jQuery and the "hash" functionality?

bxSlider adds in an empty slide after deleting an image

Alter the component and then refresh it

Guide to retriecing a state in Next.js 14

Determine if a MySQL query in node.js returns no results

Tips on how to direct the attention to a text box within a unique dialog, ensuring that the blinking cursor highlights the input area

Update the variables upon a click event following the completion of an AJAX request

Utilizing array iteration to display images

Having trouble resetting a checked checkbox label in Vuejs?

Tips for handling an empty jQuery selection

Examining Vuex Mutations using Jest confirms no alteration in state

The inline script is deemed non-compliant as it infringes upon the Content Security Policy directive: "script-src 'self'"

I'm looking to add a price ticker to my html webpage. Does anyone know how to do this?

What are the ways to activate an element in vue js?

Unable to find the matching closing parenthesis ')" before reaching the end

Retrieve information from a MongoDB document based on the specific month

What is the recommended Vue js lifecycle method for initializing the materialize dropdown menu?

Is there a way to create triangles on all four corners of an image using canvas in JavaScript?

Issue with MIME handling while utilizing Vue-Router in combination with Express