What is the best way to loop through this Object?

Question

I'm stuck at looping through a Object called Players that contains player data. I want to check which player have the highest x value and save it in leader variable that will changes while an other player have higher x value.

The Object looks like this:

var players = {
  '86wjIB7Xbz1tmwlTAAAB': {
     rotation: 0.09999999999999964,    
     x: 579,
     y: 579,
     playerId: '86wjIB7Xbz1tmwlTAAAB'  
   },
  'dWwtnOI8PryXJNDWAAAC': {
    rotation: 0.09999999999999964,    
    x: 488,
    y: 579,
    playerId: 'dWwtnOI8PryXJNDWAAAC'  
  },
 'GZPYpWdrzj9x0-SsAAAD': {
    rotation: -0.09999999999999964,   
    x: 694,
    y: 579,
    playerId: 'GZPYpWdrzj9x0-SsAAAD'  
  }
}

This is how I want my output to look like

leader = GZPYpWdrzj9x0;

Answer 1

Please use Object.keys

 var players = { '86wjIB7Xbz1tmwlTAAAB': { rotation: 0.09999999999999964, x: 579, y: 579, playerId: '86wjIB7Xbz1tmwlTAAAB' }, dWwtnOI8PryXJNDWAAAC: { rotation: 0.09999999999999964, x: 488, y: 579, playerId: 'dWwtnOI8PryXJNDWAAAC' }, 'GZPYpWdrzj9x0-SsAAAD': { rotation: -0.09999999999999964, x: 694, y: 579, playerId: 'GZPYpWdrzj9x0-SsAAAD' } } const leader = Object.keys(players).reduce((acc, cur) => { const obj = players[cur]; return acc.x < obj.x ? { x:obj.x, leader: obj.playerId } : acc; }, { x: 0, leader: "" }); console.log(leader);

Answer 2

It can be done using below code:

 let data= { '86wjIB7Xbz1tmwlTAAAB': { rotation: 0.09999999999999964, x: 579, y: 579, playerId: '86wjIB7Xbz1tmwlTAAAB' }, 'dWwtnOI8PryXJNDWAAAC': { rotation: 0.09999999999999964, x: 488, y: 579, playerId: 'dWwtnOI8PryXJNDWAAAC' }, 'GZPYpWdrzj9x0-SsAAAD': { rotation: -0.09999999999999964, x: 694, y: 579, playerId: 'GZPYpWdrzj9x0-SsAAAD' } } let max = 0; let keyParent; let keys = Object.keys(data) for (var i = 0; i < keys.length; i++){ if (data[keys[i]].x > max) { max = data[keys[i]].x keyParent = keys[i] } } console.log(keyParent)

Answer 3

There are a few ways to do this. Jay has already a good answer, but here's another one, with a few more pointers:

We start with your data:

const playersObj = {
  '86wjIB7Xbz1tmwlTAAAB': {
     rotation: 0.09999999999999964,    
     x: 579,
     y: 579,
     playerId: '86wjIB7Xbz1tmwlTAAAB'  ,
   },
  'dWwtnOI8PryXJNDWAAAC': {
    rotation: 0.09999999999999964,    
    x: 488,
    y: 579,
    playerId: 'dWwtnOI8PryXJNDWAAAC',
  },
 'GZPYpWdrzj9x0-SsAAAD': {
    rotation: -0.09999999999999964,   
    x: 694,
    y: 579,
    playerId: 'GZPYpWdrzj9x0-SsAAAD',  
  },
};

Now, our first goal is to turn this object into a collection of objects - an array that we can operate on.

The easiest way is to grab the "keys" (property names) for the object:

const playerIds = Object.keys(playersObj); // gives us: ['86wjIB7Xbz1tmwlTAAAB', 'dWwtnOI8PryXJNDWAAAC', 'GZPYpWdrzj9x0-SsAAAD']

Now, you can loop those keys, playerIds, and return the actual objects. One simple way:

const players= playerIds.map(playerId => playersObj[playerId]);

This will give us the same data, but in an array, and we can operate on the array.

Eg let's sort by x:

players.sort((a, b) => b.x - a.x) // sorts the collection

We can take it further, and get the first entry:

players.sort((a, b) => b.x - a.x)[0];

Finally, we only need it's playerId property:

const leader = players.sort((a, b) => b.x - a.x)[0].playerId; // gives this: 'GZPYpWdrzj9x0-SsAAAD'

The whole thing as a runnable snippet:

 const playersObj = { '86wjIB7Xbz1tmwlTAAAB': { rotation: 0.09999999999999964, x: 579, y: 579, playerId: '86wjIB7Xbz1tmwlTAAAB', }, 'dWwtnOI8PryXJNDWAAAC': { rotation: 0.09999999999999964, x: 488, y: 579, playerId: 'dWwtnOI8PryXJNDWAAAC', }, 'GZPYpWdrzj9x0-SsAAAD': { rotation: -0.09999999999999964, x: 694, y: 579, playerId: 'GZPYpWdrzj9x0-SsAAAD', }, }; // get the player keys const playerIds = Object.keys(playersObj); // turn players into a collection const players = playerIds.map(playerId => playersObj[playerId]); const leaderId = players.sort((a, b) => bx - ax)[0].playerId; console.log(`Leader: ${leaderId}`);

---

Alternatively, as Felix suggests, you can skip the first few steps. You already have the playerId on each object, not just at the keys (as I originally thought), so you skip the `keys().map()' chain, like this:

 const playersObj = { '86wjIB7Xbz1tmwlTAAAB': { rotation: 0.09999999999999964, x: 579, y: 579, playerId: '86wjIB7Xbz1tmwlTAAAB', }, 'dWwtnOI8PryXJNDWAAAC': { rotation: 0.09999999999999964, x: 488, y: 579, playerId: 'dWwtnOI8PryXJNDWAAAC', }, 'GZPYpWdrzj9x0-SsAAAD': { rotation: -0.09999999999999964, x: 694, y: 579, playerId: 'GZPYpWdrzj9x0-SsAAAD', }, }; // turn players into a collection const players = Object.values(playersObj); const leaderId = players.sort((a, b) => bx - ax)[0].playerId; console.log(`Leader: ${leaderId}`);