How do you iterate over a JavaScript object's properties like an array?

Question

I don't mean using a for loop using the keys.

For example if you had an array like:

var fruitArray = ["Apples", "Bananas", "Coconuts"],
    curFruit   = 0;

You could "iterate" over that using buttons, say you've got a prev/next button and all those buttons do is decrement/increment the curFruit index.

So if I'm on Bananas, I could get Apples using the prev button using:

fruitArray[0] // Apples

Where the index was at 1 for Bananas but the prev button drops the index by one.

So with an unknown-length object, and not using a numbered-index, how could you do that?

Say it's like this:

var fruitObject = {"Apples":"Red", "Bananas":"Yellow", "Coconuts":"Brown"};

I realize you could have set 0, 1, 2 and the fruit name, but just to show that you don't know what the object key/index might be.

So if I'm on Bananas using

fruitObject.Bananas // yellow

How could I get to Apples using the same decrement idea as the Array?

My question is not about the for in method

I don't know why that's not clear, it was literally the first line in my question.

I think I found a solution anyway though it might not be direct/the most effective way to do it where I'll create a temporary local "look up".

To explain:

Here's an object

var colorObject = {"red":"apple", "blue":"blueberries", "yellow":"banana"};

I don't want to use the for in method to go from left to right complete.

I want to be able to start/keep a current position like I'm at "blue":"berries" and I can jump to "red":"apple" without knowing what "red":"apple" is

My current solution in mind is, yes, though ironically I would use the for in method but to create a look up array.

Something like

var tempArray = [];

for (var key in colorObject) {
  tempArray.push(key);
}

Then I can navigate the object starting from anywhere using the increment/decrement method.

tempArray[1] would return "blue" and I could go to "red" by doing tempArray[0] which is interpreted as

colorObject.blue // blueberries

Edit thanks to the editor for making my question more clear

I did poorly word it so that's on me.

@SeinopSys yeah I see that but it's not a sequential 0 to 1, it might not even be numbers, I'm wondering if you have to create a local temporary array with the 0-# sequential order paired with the keys in order of the object. — Jacob David C. Cunningham, Jan 02 '17 at 22:25
@RadLexus it's not a duplicate, that was the first line in my question, I know that's how you could go through an object like that using a for loop but I'm asking about jumping left/right of a current object "index" not doing a for loop. — Jacob David C. Cunningham, Jan 02 '17 at 22:27
Order of object-elements doesn't matter. I'm pretty sure, object `[a,b]` is same as `[b,a]` from JS-standpoint, so if you want to keep a track of its elements order it's probably best to use additional array. — Wh1T3h4Ck5, Jan 02 '17 at 22:32
@Wh1T3h4Ck5 thanks that's the approach I decided to go with. I wasn't sure if there was a more efficient "official" way to do it. Just as a way to keep track of your progress as you go through an array where you might go in either direction not just sequential. — Jacob David C. Cunningham, Jan 02 '17 at 22:38

Alexander O'Mara · Answer 1 · 2017-01-02T22:57:03.463

This is not possible. JavaScript object properties do not have a defined order, so there is no concept of Y key comes after X key.

Excerpt from EnumerateObjectProperties section of ECMAScript 2017 Draft (ECMA-262) (emphasis added):

The mechanics and order of enumerating the properties is not specified but must conform to the rules specified below.

If you were to iterate over the properties of your fruitObject object, "Bananas" may or may not come before "Coconuts", this behavior simply is not defined by the specification. There does not even appear to be a guarantee the properties will come back in the same order each time you iterate over the properties.

The only way to have a consistent order would be to have an array. Optionally, you could do this by creating an array of the properties via Object.keys.

var fruitObject = {"Apples":"Red", "Bananas":"Yellow", "Coconuts":"Brown"};

// Get the property keys in an ordered list:
var fruitObjectKeys = Object.keys(fruitObject);

// An array of properties with a consistent order:
fruitObjectKeys.forEach(function(prop) {
    console.log(prop, '=', fruitObject[prop]);
});

Note however that the JavaScript engine running the code will decide what the order of the resulting array of properties is if you do it this way.

I found a solution, I'll just create a temporary look up array to use for the increment/decrement navigation of an unknown object structure but yes, it does use for in but it's not what I was after / already knew that. Ayee... whatever at least you can just create new accounts. Anyway thanks for understand what I was asking. — Jacob David C. Cunningham, Jan 02 '17 at 22:36

score 1 · Answer 2 · answered Jan 02 '17 at 22:32

1

Objects don't have order, so you can't say that the first element of fruitObject is "Apples", the second is "Bananas" and the third is "Cocounts".

You could get the keys as an array with Object.keys() and then do something like

var keys=Object.keys(fruitObject);
fruitObject[keys[0]];

Remember that in JS it's the obj.key is the same than obj["key"].

answered Jan 02 '17 at 22:32

Gabriel

2,170
1
17
20

Thanks, this is a helpful tip. – Jacob David C. Cunningham Jan 02 '17 at 22:37

How do you iterate over a JavaScript object's properties like an array?

2 Answers2