Access javascript objects dynamically

Question

I have a javascript object which I want to access by a dynamic variable:

var color = {
                red : '#ff0000',
                black : '#000000',
                silver : '#7d8989'
            };

var currentColor = $(val).html();

console.log(color[currentColor]);

But I get undefined message by the console. How can I access the data?

EDIT:

Problem was that the option value had whitespace at its end, thanks everyone for fast reply:

var currentColor = $.trim($(val).html());

Did you check what the value for `currentColor` is before you get the value from the `color`-object. If you specify an existing property name, this should work. — Kenneth, May 10 '13 at 14:01
Maybe you want to select an Element with the id "val" if so -> `$("#val").text()` — Moritz Roessler, May 10 '13 at 14:01
Works if i write `var currentColor = "red"` --> http://jsfiddle.net/mohammadAdil/LWteu/ — Mohammad Adil, May 10 '13 at 14:03
@MohammadAdil this is a string that comes from an option select @Kenneth yes the value is ok and I also tried to convert this with `String(currentColor` and `currentColor.toString()` without success — ThreeCheeseHigh, May 10 '13 at 14:05
To get the value of a select you want `.val()` not `.html()`! — Pointy, May 10 '13 at 14:05
@danny . You should have posted your html to make it more clear. — Mohammad Adil, May 10 '13 at 14:06

score 2 · Answer 1 · answered May 10 '13 at 14:04

2

This works. Like the comment, I'm not sure what "val" is, but if it's an ID, make sure it's targeted correctly.

HTML:

<p id="val">red</p>

JS:

var color = {
                red : '#ff0000',
                black : '#000000',
                silver : '#7d8989'
            };
var currentColor = $("#val").html();
console.log(color[currentColor]);

answered May 10 '13 at 14:04

Anthony Hessler

1,461
1
11
10

@blachawk Dot notation isn't possible with a dynamic value. There is no `currentColor` property of `color` - you have to use bracket notation like they have it – Ian May 10 '13 at 14:07

score 0 · Answer 2 · answered May 10 '13 at 14:05

You maybe want to trim your string before finding the color in your map:

var color = {
    red : '#ff0000',
    black : '#000000',
    silver : '#7d8989'
};

var currentColor = $.trim( $(val).html() );

console.log(color[currentColor]);

And it's not very fast to route your data through the DOMNodes like that.

score 0 · Answer 3 · answered May 10 '13 at 14:05

Your code seems to be working fine, so it is probably something wrong with your selector See http://jsfiddle.net/9GPbv/1/ works fine

<div class="val">red</div>

var color = {
                red : '#ff0000',
                black : '#000000',
                silver : '#7d8989'
            };

var currentColor = $(".val").html();

alert(color[currentColor]);

Also if your using an input like at http://jsfiddle.net/tMFZr/ you should use .val() not .html()

score 0 · Answer 4 · answered May 10 '13 at 14:07

0

You should use quotes in your object since you will be using it as string values: HTML

<div id="val">red</div>

JS

var color = {
                'red' : '#ff0000',
                'black' : '#000000',
                'silver' : '#7d8989'
            };

var currentColor = $(val).html();

console.log(color[currentColor]);

answered May 10 '13 at 14:07

rafaelcastrocouto

11,128
2
37
60

But then please use `var val = "#val"` – Bergi May 10 '13 at 14:11
Sure, but [it](http://stackoverflow.com/q/3434278/1048572) stays a bad practise inherited from faulty IE – Bergi May 10 '13 at 14:53
in my opinion, not to use var is a bad practice, having your IDs as references to elements is another subject. – rafaelcastrocouto May 10 '13 at 15:00

score 0 · Answer 5 · edited May 23 '17 at 10:32

0

I think you are getting the undefined in the chrome console. IF so please take a look at What does it mean if console.log(4) outputs undefined in Chrome Console?

edited May 23 '17 at 10:32

Community

1
1

answered May 10 '13 at 14:10

NT88

947
5
25

lfergon · Answer 6 · 2013-05-10T14:28:15.647

0

If your html have an id:

var color = {
    red : '#ff0000',
    black : '#000000',
    silver : '#7d8989'
};
var currentColor = document.getElementById("val").innerText;
console.log(currentColor);
console.log(color[currentColor]);

edited May 10 '13 at 14:28

answered May 10 '13 at 14:12

lfergon

963
14
27

Access javascript objects dynamically

6 Answers6