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;

What specifically are you having problems with? There are not many ways to iterate over an object and none of them depends on the actual structure of objects. Does this help: [How to iterate over a JavaScript object?](https://stackoverflow.com/q/14379274/218196) — Felix Kling, Mar 06 '20 at 09:51

score 1 · Accepted Answer · answered Mar 06 '20 at 09:59

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);

score 1 · Answer 2 · edited Mar 06 '20 at 10:23

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)

Zlatko · Answer 3 · 2020-03-07T12:09:32.917

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.

E.g. 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) => b.x - a.x)[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) => b.x - a.x)[0].playerId;

console.log(`Leader: ${leaderId}`);

That's a great solution! You can also use `Object.values` to get the property values as an array. — Felix Kling, Mar 06 '20 at 11:59
Yep, I've missed noticing that the keys and playerIds are the same actually. — Zlatko, Mar 07 '20 at 12:09

What is the best way to loop through this Object?

3 Answers3