["red", "green", "blue"] is the same as
Hence when you get the key of this array of letters it give you 01234.
So your solution would be to do something like this:
Why does it not display the keys of the object1 property? Because the ECMAScript 6 specification for how own keys of an object are traversed are as follows:
First, the keys that are “like” integer indices are ascending numeric order.
Then, all other string keys, in the order in which they were added to the object.
Lastly, all symbol keys, in the order in which they were added to the object.
Assuming you know for sure that all of the properties in the this.props.data object are named in such a way that Object.values(this.props.data) will return the first key listed, then you could use this code above.
I would like to make one simplification to @collinstommy’s code. The first line:
I agree with what your saying here. I guess the question is here is somewhat of a strange use case. In general if you are using a keyed object to store values, you would be doing so, so that you can access objects by Id. If you wanted to access values in a way where order matters, arrays are a much better mechanism.
A more full proof solution where we need to be sure we always access the first element in a data structure would be to use an array.
A third solution, combining the best of both words, store the order in a separate property.
In this example, the object is created in the code, so the order and property names can be controlled. The real problem comes in when you retrieve the object via an API as JSON and parse it to an object. Unless, the JSON has the byID property array, it would be risky.
If I was controlling the data manually, then I would to what you did above or use a Map Object instead, which really does combine the both of best worlds (array and object) like so: