Can't access items in javascript array

Question

My array is:

{
"data":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAyAAAAJYCAYAAACadoJwAAAgAElEQ…ACCCCAAAIIIICAvwIEIP760zoCCCCAAAIIIIAAAoES+P992sgQ2E6rdwAAAABJRU5ErkJggg==",
"name":"splash.png",
"imageOriginalWidth":1024,
"imageOriginalHeight":768,
"imageWidth":1969,
"imageHeight":1477,
"width":800,
"height":600,
"left":-585,
"top":-406
}

and I have two variables:

$image_data = $array['data'];
$image_name = $array['name'];

Both of these variables return undefined

Am I missing something obvious?

Aren't javaScript arrays created with `var foo = ["bar", 9, false]` ? — unbindall, Apr 28 '15 at 01:44
Is there a possibility that you don't assign the object to `$array` — ocodo, Apr 28 '15 at 01:59
Regarding your update, what is the value of `data` and `name`? Why are you declaring `$object_keys`? I think reading the [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects) will actually be the most helpful to you. However, `$image_data = $array['data'];` **will work** if `$array` has the value you claim it to have. — Felix Kling, Apr 28 '15 at 02:05
Note that you should, in the strict sense, declare your **var** names at the start of a function. When you use _undeclared_ vars they are available globally, which will often lead to unwanted side effects, variable shadowing etc, etc. — ocodo, Apr 28 '15 at 02:08
@FelixKling - I'd argue that this is not a duplicate, since the question outlines a common misconception about what an array / object is. Since early on, new users will hear that *An Array is an Object*, and so on. In the utilitarian sense an Array is not an Object (although of course it is... ) - Hopefully you will see (a) this misconception is easy to hold for a beginner, and (b) that common misunderstandings, are also useful question examples in SO. It may seem a little meta, but as SO grows, it should cover things that people get wrong, often. — ocodo, Apr 28 '15 at 02:14
@RipzCurlz invite me to chat, your last question edit is now veering you away from a valid SO question. `$('input[name=promo_image_1_values]').val();` is introducing an unknown value. — ocodo, Apr 28 '15 at 02:19
@RipzCurlz - visit http://chat.stackoverflow.com/rooms/76403/js-objects-and-arrays — ocodo, Apr 28 '15 at 02:31

ocodo · Accepted Answer · 2015-04-28T02:06:15.790

First off, it's important to note that this is not an array, it's an object definition.

An array can be defined as:

[
"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAyAAAAJYCAYAAACadoJwAAAgAElEQ…ACCCCAAAIIIICAvwIEIP760zoCCCCAAAIIIIAAAoES+P992sgQ2E6rdwAAAABJRU5ErkJggg==",
"splash.png",
1024,
768,
1969,
1477,
800,
600,
-585,
-406
]

Which is doesn't the keys, like "data": (which can also be expressed as data:) It seems you definitely want to access values by key, so what you really want is:

var data, name, myObject;

// NOTE: We do not "quote" object keys under normal circumstances.
myObject = {
    data:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAyAAAAJYCAYAAACadoJwAAAgAElEQ…ACCCCAAAIIIICAvwIEIP760zoCCCCAAAIIIIAAAoES+P992sgQ2E6rdwAAAABJRU5ErkJggg==",
    name:"splash.png",
    imageOriginalWidth:1024,
    imageOriginalHeight:768,
    imageWidth:1969,
    imageHeight:1477,
    width:800,
    height:600,
    left:-585,
    top:-406
}

data = myObject["data"]; // We don't usuaully use this 
name = myObject["name"]; // style, although it works.
                         // 
                         // It's generally reserved for 
                         // dynamic access.
                         //
                         // i.e. we make a string to match the keyname.

However, to be correct you should use dot syntax to access the object key.

data = myObject.data;
name = myObject.name;

I hope this has cleared things up a little for you.

On a side note DO NOT use names like $array. First don't use the $ prefix for normal variables, this isn't PHP or BASIC.

Secondly, when you have an object, you want it to be named something that is useful / meaningful / memorable. (naming things is hard!)

When you name things properly, other people can read and understand your code, and after a heavy weekend on the town, so can you.

Thanks @Slomojo this has helped a lot as you may have guessed I am still learning. I have gone with UnderscoreJS but it still returning undefined. — RipzCurlz, Apr 28 '15 at 02:01
myObject[data] in your example is = myObject[undefined]. You did not define a value for data. The right approach would be to either initialize the data variable or use quotes myObject["data"] or myObject.data to access that property of the myObject. Other than that, good answer and information for the original question poster. — Carlos Pinto, Apr 28 '15 at 02:01
`myObject[data]` should be `myObject.data`. However, I don't see what you are doing vastly different from what the OP already does. — Felix Kling, Apr 28 '15 at 02:03
@Slomojo - I have added the actual code to my original question as it is still returning undefined. The image object is created by an image upload / cropping tool on a form. — RipzCurlz, Apr 28 '15 at 02:18

score -3 · Answer 2 · edited Oct 10 '15 at 10:29

-3

Have you tried declaring the array and also the variables you wanna store the store the stuff from array to, using the var keyword?

E.g:

var myArray = ["hello",["world"];

By looking at your code I have the impression that you were trying to make a custom object.

edited Oct 10 '15 at 10:29

Anders

8,307
9
56
88

answered Apr 28 '15 at 01:46

blackMarket

27
4

1

Your array definition isn't syntactically correct. – ocodo Apr 28 '15 at 01:49
Also, we should strive to use the correct language when referring to object structures like the one shown in the question which is referred to as an object literal. – Carlos Pinto Apr 28 '15 at 02:09

Can't access items in javascript array

2 Answers2