Update Array column from another another Array

I have a table that displays a player name. I now want to show the Team it belongs to.

My challenge is that the Player’s name comes from a collection called “RSVP” and the team calls from the collection “Players”
I have tried many things (creating function calls, manually doing and no success). The link below seems to do very close what I need but it only give me those that matches.

Is there a better approach?

Goal:
Show a table like this:
Player Name Team
john doe horn
jane doe honey
gia jade honey

I

Please provide more details: what is the reference filed that connects the collections? how do you bind the data to the table (I guess when you said ‘table’ you meant a table UI element on the webpage. Right?)?

Hey pulling data from 2 data collections. Need to display on a table UI element (Order, Player, Team.)

The function is now returning values, but is not setting the value for Team. Not sure what’s going on?

. find ()
. then ( res => {
const rowstoLoad = res . items . map ( ( r , i ) => {
return { “OrderID” : i +++ 1 , “player” : r . playerName , “Team” : “x” }
})

     rowstoLoad . forEach ( ( myitem )   => {           
         getPlayerTeam ( myitem . playerName ). then  (  myteam  =>    myitem . team  =  myteam 
        ) 
        });                           
     $w ( '#tblEventList' ). rows  =  rowstoLoad ; 

export async function getPlayerTeam ( varplayerName ) {
// console.log( "the player: " + varplayerName);
return await wixData . query ( ‘Players’ )
. eq ( “title” , varplayerName )
. find ()
. then ( res => {
if ( res . items . length == 0 ) {
return “” ;
}
else
return res . items [ 0 ]. teamname ;
});

You’re not handing the Promises correctly.
It should be something like:

//...
 .find()
 .then(async res => 
   const { items } = res;
   const varplayerNameItems = await getTeams(items.map(e => e.playerName));
   const rowsArr = [];
   varplayerNameItems.forEach(e => {
	const item = items.find(item=> item.title === e.playerName);
	const i = items.findIndex(item => item.title === e.playerName);
	if(item){
		rowsArr.push({OrderId: i +1, player: item.playerName, Team: e.team});
      }
    });
   $w('#tblEventList').rows = rowsArr;
   })

function getTeams(playerNames){
  return wixData.query('Players') 
        .hasSome('title', playerNames)
        .limit(1000)                                 
        .find()
        .then(res => res.items);
}

Hey JD! Thank you so much you are the best!!
I would had never thought about taking that approach.

It works perfectly. Now I have another thing to do and that is to show the ones that did not have a team assigned, since the logic you sent me only show those having a team.

Have a good one!

//In green are the lines that are already in you code, do not copy them again:
$w('#tblEventList').rows = rowsArr;                          
const teamlessPlayers = items.filter(e => !rowsArr.some(p => p.player === e.playerName));
const counter= rowsArr.length + 1;
const teamlessRows = teamlessPlayers.map((e, i) => ({OrderId: counter + i, player: e.playerName}));
$w('#teamlessTable').rows = teamlessRows;
   })
//...