如何在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 (ie x: 7.5, y: 0, z: -7.5) but I do not know how to access the selected objects key ie 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

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

Answer 2

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