[Javascript] Object property name

[Chaosy]

I got got the following:

Object object = {
something1: x,
something2: x,
something3: x,
something4: x
};

And I want to get the name of one of the properties.

I read that object[0].name should work but it does not seem to do so for me.

 

[GhostWolf]

I have no clue how it passes without syntax errors.
JS is a dynamically typed language, you don't explicitly define the types of things.
Writing Object object is an error.
Instead, you use the var keyword for old JS code, and let or const for new code.

For example:

let object = { ... };

object = [1, 2, 3]; // This is a dynamically typed language, types aren't static!

As to keys - object[key] or, if the key is a valid identifier, object.key.
In your case, all four keys are valid identifiers (as in, could be variable names), and so you can choose either way.

object["something1"]
object.something1

Note that the key in the first notation is always converted to a string.
object[1] for example, is the same as object["1"].
If you ever need to map any type of key to any type of value, see Map.



/Edit
Err...I just reread your post and saw this wasn't your question, but I'll keep the above text still it's still relevant.

If you want to get the names of the properties that an object holds, use the static Object.keys function.

let keys = Object.keys(object);

for (let key of keys) {
    console.log(key);
}

 

[Chaosy]

Writing
Object object
is an error.

I am aware. Merely typing it that way for the sake of clarity in this thread.

/Edit
Err...I just reread your post and saw this wasn't your question, but I'll keep the above text still it's still relevant.

If you want to get the names of the properties that an object holds, use the static Object.keys function.

let keys = Object.keys(object);

for (let key of keys) {
    console.log(key);
}

I am working on a client side quiz application as a school assignment.
I have no control over the server which makes life harder for me than it should be.

Anyway this is a example:
Who invented Javascript?
<receives an object with alternatives from the server>
{1: "John Cena", 2: "..."}

And the server demands that the user doesn't answer "John Cena" but rather the name of the key.
Which is why I need a way to display the key so that the user knows what to type.
(sadly the name is not "1,2,3" and so on, just an simplified example)

So does your script return the key only? or all keys including the value?

 

[GhostWolf]

It depends on how you compare the key to the user's input - I'll assume the user input and keys are always in the same case (e.g. via String.prototype.toLowerCase), since that's what you should generally do with anything that has user control in it.
In this case, you don't even need to loop or anything, you can simply ask if the value at your key exists.

for (let key of Object.keys(object)) {
    // key here is your "1", "2", ...
    // print it, add to HTML, whatever

    // if you want the value:
    let value = object[key];
}

// Later, when selection occurs

let value = object[userKey];

if (value) {
    // do stuff with value
} else {
    // the key doesn't exist in your object, or it exists but its value is null or undefined.
}

In this case you don't control what the server gives you. If it gives all keys in the same lower/upper case, then transform the user input to match it.

If you can't trust the server to be consistent, you have to do it on the client:

let foundKey = false;

for (let key of Object.keys(object)) {
    // assuming userKey is also all lower cased with a previous toLowerCase call
    if (key.toLowerCase() === userKey) {
        foundKey = true;
   
        // do stuff

        break; // Found it, can stop the loop
    }
}

if (!foundKey) {
    // error?
}

Or if you want something that looks more linear:

let value;

for (let key of Object.keys(object)) {
    if (key.toLowerCase() === userKey) {
        value = object[key];
        break;
    }
}

if (value) {
    // do stuff
} else {
    // key doesn't exist, or exists but value is null or undefined
}

On a side note, writing broken code doesn't clarify anything, it just makes me think you don't know it's broken.

 

[Chaosy]

Thanks. I got it to work.

A quick unrelated question adding "\n" does not work when I do:
myTag.textContent = "\n" + "something";
\n goes invisible aka is ignored but does not create a new line.

myTag is a <p> tag if that's relevant.

 

[LordDz]

Why do you need to add a new line with code when <p> does itself?
Tryit Editor v3.3

But try myTag.textContent = "<br>" + "something";

 

[Chaosy]

I could make one tag per line but that's annoying.

As for the <br>, I thought that would work as well but that displays <br> as a string.

 

[LordDz]

It was a while ago that I used normal javascript (jQuery and angular master race reporting!)

The reason myTag.textContext doesn't work is because the <p> tag doesn't support textContext.
use myTag.innerHTML
instead.

 

[Chaosy]

My teacher is generally against innerHTML.
I think it was due security issues.

 

[TriggerHappy]

My teacher is generally against innerHTML.
I think it was due security issues.

There should be no security issues if you escape the input.

DOM based XSS Prevention Cheat Sheet - OWASP

However this should be fine since there's no user input on the HTML side.

element.innerHTML = "<br/>";
element.textContent = userInput;

EDIT: This works

// <input type="text" id="userinput" value="<script>alert('test');</script>" />

var x = document.getElementById("test");
var userinput = document.getElementById("userinput").value;

x.innerHTML = "line 1<br/>";

x.appendChild(document.createTextNode(userinput));

 

[GhostWolf]

Not only should you prefer to add DOM elements properly and not use eval-like functionality (innerHTML), but I also don't really see why it would help you to do the latter in this case.
In the end I assume you want one element per object entry either way, so just create the elements in the loop.

Also as TriggerHappy shows above, user input goes in text nodes, then everything's good.