How can I display the key of an accessed object in javascript

Question

I would like to be able to get and use the key of a selected object in js

Lets say I have the following object that contains other objects

verts = { A: {x: 7.5, y: 0, z: -7.5}, B: {x: 0, y: 0, z: -15 }

If I can access item A for example with the following;

console.log(verts.A)

It will show me the value within the object (i.e. x: 7.5, y: 0, z: -7.5) but I do not know how to access the selected objects key i.e. in this case "A". I would like to be able to store it as a variable for use as a string later on. It feels like I should be able to write this.key or this[key] somewhere somehow but I cannot find an appropriate answer on here. I am using jquery so if there is a quick way using that thank you.

Thanks for any advice as ever

What do you mean by "selected object"? Please provide an example of some code where there is a selected object. — JLRishe, Dec 11 '17 at 13:36
Thanks JLRishe maybe I am using the wrong terminology but if you look at my example, I access the value of verts.A by logging it to the console but I can only see the value of verts.A and not the key i.e. A — Nick, Dec 11 '17 at 13:38
Probably you may find relevant here https://stackoverflow.com/questions/9907419/how-to-get-a-key-in-a-javascript-object-by-its-value — Vivek Harikrishnan, Dec 11 '17 at 13:50
The key isn't part of the object, so in general, you can't get the key from the object. Could you provide an example of a situation where you need this? There's probably another way to accomplish it. — JLRishe, Dec 11 '17 at 13:51
Hi JLRishe, thanks, Ok at the below fiddle there is some illustrative code (ie it does not work but shows the kind of thing I would like to achieve) https://jsfiddle.net/3amo87zm/ any ideas welcome — Nick, Dec 11 '17 at 14:15

Jamiec · Answer 1 · 2017-12-11T13:52:19.943

1

Once you've read an object using a key, there is no longer a link back to the key you used.

The best thing you can do is store the key you're using in a variable and then use square bracket notation to read it:

var verts = { A: {x: 7.5, y: 0, z: -7.5}, B: {x: 0, y: 0, z: -15 } };
var key = 'A';
var result = verts[key];

console.log(key, result);

Another option is to run your initial object through a pre-processor to build this link:

function preProcess(input){
    return Object.keys(input).reduce( function(p,c){
      var newObj = input[c];
      newObj._key = c;
      p[c] = newObj
      return p
    },{});
}

var verts = { A: {x: 7.5, y: 0, z: -7.5}, B: {x: 0, y: 0, z: -15 } };
var vertsWithKeys = preProcess(verts);

var item = verts.A;
console.log(item._key, item);

edited Dec 11 '17 at 13:52

answered Dec 11 '17 at 13:47

Jamiec

133,658
13
134
193

Thanks Jamiec - I wondered if that might be the case, maybe I have the only use case for it but it seems like something it would be good to be able to do – Nick Dec 11 '17 at 13:51
@Nick see update. Its less than ideal IMO but serves your requirement. – Jamiec Dec 11 '17 at 13:52
Thanks Jamiec, its not quite as succinct as I had hoped but it works so thank you – Nick Dec 11 '17 at 14:00

score 0 · Accepted Answer · answered Dec 11 '17 at 19:08

You're making this more complicated than it has to be. If you know at some point which keys you're using (and it seems you do), then all you need to do is ensure that those keys are passed along to whatever it is that needs them.

Like this:

//vertices stored as objects
verts = { A: {x: 7.5, y: 0, z: -7.5}, B: {x: 0, y: 0, z: -15}, C: {x: 0, y: 0, z: -7.5} }

//make a triangle using accessed vertices
makeTriangle(verts, 'A', 'B', 'C')

function makeTriangle(vertices, key1, key2, key3){
    $("example").append('\
    <a-triangle\
        id="' + key1 + '_'+ key2 + '_'+ key3 + '"\
        vertex-a="' + vertices[key1](joined) + '"\
        vertex-b="' + vertices[key2](joined) + '"\
        vertex-c="' + vertices[key3](joined) + '"\
    </a-triangle>');
}

This is a good solution, thank you JLRishe. I will use this approach since I am in control of the keys but the other answer would work well if you weren't. Thank you very much for looking at this — Nick, Dec 11 '17 at 22:21

How can I display the key of an accessed object in javascript

2 Answers2