Get value by key from array javascript

Question

I'm experiencing an issue with getting the value from a javascript array.

var color = new Array();
for (var i = 0; i < datafeatures.length - 1; i++) {
    color[datafeatures[i].properties.userid] = datafeatures[i].properties.linecolor;
}

snapshot.forEach(function (childSnapshot) {
     var colour = childSnapshot.wp_user;
     console.log(color[colour]);
     console.log(JSON.stringify(color));
     console.log(color);
     console.log(colour);
}

Console.log result:

color[colour]: undefined

JSON.stringify(color): []

color:

[]
 26: "#9d36ee"
 45: "#b1c743"
 56: "#f9c53c"
 61: "#d770ce"
 63: "#267fa1"
 64: "#85002f"
 68: "#78eca8"
 92: "#a4a2e7"
length: 93
__proto__: Array(0)

colour: 61

Expected output from color[colour]: "#d770ce"

Real output from color[colour]: undefined.

Color has something in it, Colour is a number (key), but it seems impossible to get a value from Color..

Most likely there are issues with your colour, we can not test your code is we can not test problematic areas. Please create test environment or create fake arrays to see how it works. — Dimash
– Dimash, Commented Aug 15, 2017 at 7:52
You are traversing snapshot, is that the correct variable ? — Fawaz
– Fawaz, Commented Aug 15, 2017 at 7:56
For consistency and code clarity (and also by convention), you should name your array (or object) colours and one of its elements colour. Naming the array color and one of its element colour is just confusing. — Jeremy Thille
– Jeremy Thille, Commented Aug 15, 2017 at 7:56
@jkris Yes, console.log(JSON.strinify(color)); returns [] and as you pointed out in your answer below, when changing the color array to an object, it returns {} — Bart Ros
– Bart Ros, Commented Aug 15, 2017 at 8:00

jkris · Accepted Answer · 2017-08-15 08:42:17Z

3

You might want to try changing the line

var color = new Array();

to

var color = {};

What you may be looking for not an array but, the term in javascript, an object.

EDIT

After looking at the source and doing some debugging, the problem seems to be the asynchronous executions. You're color variable is being populated at a later time, which explains why JSON.stringify produces an empty object when printing which the console.log maintains the reference to the variable.

You'll want to ensure the color variable is populated first.

Some steps on how I debugged this, (using chrome):

Open Chrome Dev Tools (Ctrl+Shift+I)
Go to console
Click on the line number that prints undefined
You should be sent to the sources tab where you'll see your source code
Here add a breakpoint by clicking on the line number (407, in this case)
Refresh while on the dev tools window, (Ctrl+R)
The javascript execution should stop at the debugger
In this state mouse over variables on the source codes to see their values at that point in time
You'll find that color is indeed an empty object
So trace back to how color is being populated
Find it nested under this code d3.json(
That's when you know you got an asynchronous problem

edited Aug 15, 2017 at 8:42

answered Aug 15, 2017 at 7:52

jkris

6,6691 gold badge24 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Bart Ros Over a year ago

var color = {}; only changes the color[] to color{}

Jeremy Thille Over a year ago

Precisely, and then it works. You get an object with keys you can address. Arrays don't have keys, they're just a list.

Bart Ros Over a year ago

Nope, color[colour] returns undefined

Bart Ros Over a year ago

Oh god, after your edit, I realised that a whole part of my code was outside the async. request. Thank you a thousand times!

Christopher Messer · Accepted Answer · 2017-08-15 07:51:44Z

0

This code here

for (var i = 0; i < datafeatures.length - 1; i++) {
    color[datafeatures[i].properties.userid] = datafeatures[i].properties.linecolor;
}

Should look more like this

for (var i = 0; i < datafeatures.length - 1; i++) {
    color.push({[datafeatures[i].properties.userid]: datafeatures[i].properties.linecolor})
}

It will give you the array you're looking for, I think.

answered Aug 15, 2017 at 7:51

Christopher Messer

2,09011 silver badges13 bronze badges

6 Comments

Jeremy Thille Over a year ago

Nope, you're constructing an array of objects : [{26: "#9d36ee"} , {45: "#b1c743"}]

Christopher Messer Over a year ago

Based on the fact that he started off by constructing a new Array() - I thought he might want an array of objects.

Jeremy Thille Over a year ago

But then how do you get the coulour 63? This solution is more complex than it should be. OP doesn't know what he wants. He made an array, but doesn't want it, because the solution here is really to build an object { "26" : "#9d36ee", "63" : "#b1c743"} then you easily get the coulour 63 : colours["63"].

Bart Ros Over a year ago

@JeremyThille is correct. But when changing var color = [] to 'var color = {}', I'm getting exactly the same result in console.log (only the '[]' is replaced by '{}')

Christopher Messer Over a year ago

Can we see the snapshot array ?

|

Collectives™ on Stack Overflow

Get value by key from array javascript

2 Answers 2

4 Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related