通过将对象数组与数组进行比较来创建新数组

Question

I have a list of gameData and used athletes. I need to make a new array that only contains Athlete from gameData that is not in usedAthletes. I've honestly looked all over, tried lodash and various things over the past day or so. Any advise would be great. If there are ES6 methods that work it would be cool to know that too :)

const gameData = [
        {Athlete: "Peyton Manning", Img: "url"},
        {Athlete: "Tony Hawk", Img: "url"},
        {Athlete: "Tom Brady", Img: "url"},
        {Athlete: "Usain Bolt", Img: "url"},
        {Athlete: "Kevin Durant", Img: "url"},
        {Athlete: "Cristiano Ronaldo", Img: "url"},
        {Athlete: "Michael Phelps", Img: "url"},
        {Athlete: "Conor McGregor", Img: "url"},
        {Athlete: "Phil Mickelson", Img: "url"},
        {Athlete: "Stephen Curry", Img: "url"},
        {Athlete: "Rory McIlroy", Img: "url"},
        {Athlete: "Mike Trout", Img: "url"},
        {Athlete: "Danica Patrick", Img: "url"},
        {Athlete: "Drew Brees", Img: "url"},
        {Athlete: "Carmelo Anthony", Img: "url"},
        {Athlete: "Ryan Lochte", Img: "url"},
        {Athlete: "Eli Manning", Img: "url"},
        {Athlete: "Chris Paul", Img: "url"}
]

const usedAthletes = ["Peyton Manning", "Tony Hawk", "Tom Brady"];

gameData.forEach( x => {
  const gameDataNamesOnly = x.Athlete;
  newAnswerlist = [];
  usedAthletes.forEach( item => {
    if(gameDataNamesOnly != item){
        //I was trying to push to newAnswerList here but could get access to gameDataNamesOnly correctly or something.
    }
  })
  console.log(newAnswerlist)
})

Answer 1

You could use Array#filter with Array#includes and exclude the usedAthletes .

You solution does not work, because you initialize the result array in every iteration.

 const gameData = [{ Athlete: "Peyton Manning", Img: "url" }, { Athlete: "Tony Hawk", Img: "url" }, { Athlete: "Tom Brady", Img: "url" }, { Athlete: "Usain Bolt", Img: "url" }, { Athlete: "Kevin Durant", Img: "url" }, { Athlete: "Cristiano Ronaldo", Img: "url" }, { Athlete: "Michael Phelps", Img: "url" }, { Athlete: "Conor McGregor", Img: "url" }, { Athlete: "Phil Mickelson", Img: "url" }, { Athlete: "Stephen Curry", Img: "url" }, { Athlete: "Rory McIlroy", Img: "url" }, { Athlete: "Mike Trout", Img: "url" }, { Athlete: "Danica Patrick", Img: "url" }, { Athlete: "Drew Brees", Img: "url" }, { Athlete: "Carmelo Anthony", Img: "url" }, { Athlete: "Ryan Lochte", Img: "url" }, { Athlete: "Eli Manning", Img: "url" }, { Athlete: "Chris Paul", Img: "url" }], usedAthletes = ["Peyton Manning", "Tony Hawk", "Tom Brady"], result = gameData.filter(o => !usedAthletes.includes(o.Athlete)); console.log(result); 

 .as-console-wrapper { max-height: 100% !important; top: 0; } 

Answer 2

Lodash's _.differenceWith() creates an array of array values not included in the other given arrays using a comparator:

 const gameData = [{"Athlete":"Peyton Manning","Img":"url"},{"Athlete":"Tony Hawk","Img":"url"},{"Athlete":"Tom Brady","Img":"url"},{"Athlete":"Usain Bolt","Img":"url"},{"Athlete":"Kevin Durant","Img":"url"},{"Athlete":"Cristiano Ronaldo","Img":"url"},{"Athlete":"Michael Phelps","Img":"url"},{"Athlete":"Conor McGregor","Img":"url"},{"Athlete":"Phil Mickelson","Img":"url"},{"Athlete":"Stephen Curry","Img":"url"},{"Athlete":"Rory McIlroy","Img":"url"},{"Athlete":"Mike Trout","Img":"url"},{"Athlete":"Danica Patrick","Img":"url"},{"Athlete":"Drew Brees","Img":"url"},{"Athlete":"Carmelo Anthony","Img":"url"},{"Athlete":"Ryan Lochte","Img":"url"},{"Athlete":"Eli Manning","Img":"url"},{"Athlete":"Chris Paul","Img":"url"}]; const usedAthletes = ["Peyton Manning", "Tony Hawk", "Tom Brady"]; const result = _.differenceWith(gameData, usedAthletes, ({ Athlete }, othVal) => Athlete === othVal); console.log(result); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script> 

If you just need the athletes names, there is a simpler solution using _.difference() :

 const gameData = [{"Athlete":"Peyton Manning","Img":"url"},{"Athlete":"Tony Hawk","Img":"url"},{"Athlete":"Tom Brady","Img":"url"},{"Athlete":"Usain Bolt","Img":"url"},{"Athlete":"Kevin Durant","Img":"url"},{"Athlete":"Cristiano Ronaldo","Img":"url"},{"Athlete":"Michael Phelps","Img":"url"},{"Athlete":"Conor McGregor","Img":"url"},{"Athlete":"Phil Mickelson","Img":"url"},{"Athlete":"Stephen Curry","Img":"url"},{"Athlete":"Rory McIlroy","Img":"url"},{"Athlete":"Mike Trout","Img":"url"},{"Athlete":"Danica Patrick","Img":"url"},{"Athlete":"Drew Brees","Img":"url"},{"Athlete":"Carmelo Anthony","Img":"url"},{"Athlete":"Ryan Lochte","Img":"url"},{"Athlete":"Eli Manning","Img":"url"},{"Athlete":"Chris Paul","Img":"url"}]; const usedAthletes = ["Peyton Manning", "Tony Hawk", "Tom Brady"]; const result = _(gameData) .map('Athlete') .difference(usedAthletes) .value(); console.log(result); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script> 

Answer 3

Use filter followed by map,

const newAnswerlist = gameData
.filter(data => usedAthletes.indexOf(data.Athlete) !== -1)
.map(data => data.Athlete);

Use only filter if you want the img information too,

const newAnswerlist = gameData
.filter(data => usedAthletes.indexOf(data.Athlete) !== -1);

Answer 4

 const gameData = [ {Athlete: "Peyton Manning", Img: "url"}, {Athlete: "Tony Hawk", Img: "url"}, {Athlete: "Tom Brady", Img: "url"}, {Athlete: "Usain Bolt", Img: "url"}, {Athlete: "Kevin Durant", Img: "url"}, {Athlete: "Cristiano Ronaldo", Img: "url"}, {Athlete: "Michael Phelps", Img: "url"}, {Athlete: "Conor McGregor", Img: "url"}, {Athlete: "Phil Mickelson", Img: "url"}, {Athlete: "Stephen Curry", Img: "url"}, {Athlete: "Rory McIlroy", Img: "url"}, {Athlete: "Mike Trout", Img: "url"}, {Athlete: "Danica Patrick", Img: "url"}, {Athlete: "Drew Brees", Img: "url"}, {Athlete: "Carmelo Anthony", Img: "url"}, {Athlete: "Ryan Lochte", Img: "url"}, {Athlete: "Eli Manning", Img: "url"}, {Athlete: "Chris Paul", Img: "url"} ]; const usedAthletes = ["Peyton Manning", "Tony Hawk", "Tom Brady"]; var value = gameData.map((data) => {if(!usedAthletes.includes(data.Athlete)){return data;}}).filter((data) => data); console.log(value); 

Answer 5

Try this:

 const gameData = [ {Athlete: "Peyton Manning", Img: "url"}, {Athlete: "Tony Hawk", Img: "url"}, {Athlete: "Tom Brady", Img: "url"}, {Athlete: "Usain Bolt", Img: "url"}, {Athlete: "Kevin Durant", Img: "url"}, {Athlete: "Cristiano Ronaldo", Img: "url"}, {Athlete: "Michael Phelps", Img: "url"}, {Athlete: "Conor McGregor", Img: "url"}, {Athlete: "Phil Mickelson", Img: "url"}, {Athlete: "Stephen Curry", Img: "url"}, {Athlete: "Rory McIlroy", Img: "url"}, {Athlete: "Mike Trout", Img: "url"}, {Athlete: "Danica Patrick", Img: "url"}, {Athlete: "Drew Brees", Img: "url"}, {Athlete: "Carmelo Anthony", Img: "url"}, {Athlete: "Ryan Lochte", Img: "url"}, {Athlete: "Eli Manning", Img: "url"}, {Athlete: "Chris Paul", Img: "url"} ] const usedAthletes = ["Peyton Manning", "Tony Hawk", "Tom Brady"]; const newAnswerlist = []; gameData.forEach( data => { if (usedAthletes.indexOf(data.Athlete) == -1) { newAnswerlist.push(data.Athlete); } }); 

newAnswerlist should contain the array you want.