Array syntax

[DrKen]

I'm trying to understand some JavaScript that I have to maintain and
in looking at one bit, I'm trying to validate that I understand it,
but I have not been able through a Google search to find an
explanation of this syntax. I'm wondering in fact if it is from a
JavaScript library of some kind. I am not incliuding the whole array
but this should be sufficient:
var locations = $("#field-location select:first option");
var loc = new Array();
loc["az"] = { value: "AZ", caption: "Azusa" };
loc["co"] = { value: "CO", caption: "Colorado Springs" };
loc["hd"] = { value: "VI", caption: "High Desert Regional Center" };
loc["ie"] = { value: "IE", caption: "Inland Empire Regional Center" };
loc["in"] = { value: "IN", caption: "International" };
loc["la"] = { value: "LA", caption: "Los Angeles Regional Center" };
loc["mu"] = { value: "MU", caption: "Murrieta Regional Center" };

The array values are used later in the .js file so that when a user
clicks on one select and makes a choice, another box shows one or more
of these locations that are specific to it. That has always worked
fine. What I want to know, to be very specific is, if a user selects
the choice "High Desert" (hd), the result will be that the select will
return "VI" as the value that should go back to ther server? Thanks.

Ken

 

[Jukka K. Korpela]

I'm trying to understand some JavaScript that I have to maintain and
in looking at one bit [...] I'm wondering in fact if it is from a
JavaScript library of some kind. I am not incliuding the whole array
but this should be sufficient:

The whole array is needed, but what matters is how it is used. Often a
URL tells more than 10,000 words.

var locations = $("#field-location select:first option");

This appears to use the widely used jQuery library, though one cannot be
absolutely sure without seeing the context. After all, "$" is in
principle just yet another identifier. The rest of the code snippet does
not seem to have any direct relationship to jQuery.

var loc = new Array();
loc["az"] = { value: "AZ", caption: "Azusa" };
loc["co"] = { value: "CO", caption: "Colorado Springs" };
loc["hd"] = { value: "VI", caption: "High Desert Regional Center" };

It's difficult to guess what the idea might be. This looks like an
unnecessarily complicated way of mapping two-letter codes to names, and
the initialization with new Array() does not appear to be useful. After
all, loc is not an array but an object, though informally objects might
be described as kind-of associative arrays.

The array values are used later in the .js file so that when a user
clicks on one select and makes a choice, another box shows one or more
of these locations that are specific to it. That has always worked
fine. What I want to know, to be very specific is, if a user selects
the choice "High Desert" (hd), the result will be that the select will
return "VI" as the value that should go back to ther server?

Well this entirely depends on what happens in the code. It's not even
certain what strings appear in the user interface, visible to the user,
though I would expect the caption values to be used. But what happens
upon selection is up to the code - it could result in "VI" being sent,
or "hd" being sent, or (in principle) something else.

 

[Denis McMahon]

On Mon, 09 Jan 2012 14:11:11 -0800, DrKen wrote:

var locations = $("#field-location select:first option");
var loc = new Array();
loc["az"] = { value: "AZ", caption: "Azusa" };
loc["co"] = { value: "CO", caption: "Colorado Springs" };
loc["hd"] = { value: "VI", caption: "High Desert Regional Center" };
loc["ie"] = { value: "IE", caption: "Inland Empire Regional Center" };
loc["in"] = { value: "IN", caption: "International" };
loc["la"] = { value: "LA", caption: "Los Angeles Regional Center" };
loc["mu"] = { value: "MU", caption: "Murrieta Regional Center" };

What I want to know, to be very specific is, if a user selects
the choice "High Desert" (hd), the result will be that the select will
return "VI" as the value that should go back to ther server?

I don't think anyone without knowledge of whatever '$' means can answer
your question from the data given. '$' may relate to jquery, or it may
relate to something else entirely. If it does relate to jquery, you need
to ask in a jquery related forum, I don't use jquery and various comments
by many other posters here suggest that they don't either.

What I can tell you is that you're creating an array of objects, each
object having properties .value and .caption, such that, eg:

loc["ie"].caption = "Inland Empire Regional Center"
loc["la"].value = "LA"

If these values are then being used to populate the option element text
and value attributes within a select element, I would speculate that the
original intent might well have been that if the option with the text
attribute corresponding a given caption property was selected, then the
value of the associated value property would be set as the value of the
select element. If that select was part of a form, then yes, I'd expect
the intent was that that value be submitted.

However, this is all speculation about the intent of the original coder
based on the partial code snippet you have posted, your comments, and my
own knowledge and understanding of javascript, html etc. As such, it
could easily be way off base.

Rgds

Denis McMahon

 

[Evertjan.]

Denis McMahon wrote on 10 jan 2012 in comp.lang.javascript:

var loc = new Array();
loc["az"] = { value: "AZ", caption: "Azusa" };
loc["co"] = { value: "CO", caption: "Colorado Springs" };
loc["hd"] = { value: "VI", caption: "High Desert Regional Center" };
loc["ie"] = { value: "IE", caption: "Inland Empire Regional Center" };
loc["in"] = { value: "IN", caption: "International" };
loc["la"] = { value: "LA", caption: "Los Angeles Regional Center" };
loc["mu"] = { value: "MU", caption: "Murrieta Regional Center" };

[...]

What I can tell you is that you're creating an array of objects, each
object having properties .value and .caption, such that, eg:

loc["ie"].caption = "Inland Empire Regional Center"
loc["la"].value = "LA"

An array of objects would be populated thus:

loc[3] = { value: "AZ", caption: "Azusa" };
loc[7].caption = "Inland Empire Regional Center"

Despite de defining as an array,
"loc" is NOT used as an ARRAY at al,
but as an OBJECT.

So why not define it as an object?

var loc = {};

 

[Thomas 'PointedEars' Lahn]

On Mon, 09 Jan 2012 14:11:11 -0800, DrKen wrote:

var locations = $("#field-location select:first option");
var loc = new Array();
loc["az"] = { value: "AZ", caption: "Azusa" };
loc["co"] = { value: "CO", caption: "Colorado Springs" };
loc["hd"] = { value: "VI", caption: "High Desert Regional Center" };
loc["ie"] = { value: "IE", caption: "Inland Empire Regional Center" };
loc["in"] = { value: "IN", caption: "International" };
loc["la"] = { value: "LA", caption: "Los Angeles Regional Center" };
loc["mu"] = { value: "MU", caption: "Murrieta Regional Center" };

(sic!)

Is this your code or are you quoting the OP? Watch for the quotation
levels.

It does not make a lot of sense to use an `Array' instance here. The
properties of `Array' instances are not employed here. The array data
structure is _not_ added elements with indexes "az", "co" etc., but the
`Array' instance is *augmented* with *properties* named "az", "co" etc.

As a result, the value of `loc.length' remains 0 (evidence that there are no
built-in associative arrays in ECMAScript implementations). Indeed, should
for some reason a *perceived* "index" be the name of a built-in property of
`Array' instances or their prototype, unexpected behavior would be the
result. For example:

/* RangeError: Invalid array length */
loc["length"] = { value: "AZ", caption: "Azusa" };

(because there is no Object.prototype.toValue() and
Object.prototype.toString() returns "[object Object]" for `Object'
instances, which is numerically converted to NaN.)

So it should be

var log = new Object();

or more simple

var log = {};

(as already used) instead. However, it is not very efficient to add
properties on initialization that way. As already used, properties can be
defined in the Object initializer/literal, and initializers can be nested:

var log = {
az: { value: "AZ", caption: "Azusa" },
…
};

Obviously, if the data were generated by the server, a conversion of the
server-side data to JSON (for example, from PHP with json_encode()) would be
the simplest way to make it available to the client-side code (JSON differs
here only in that it requires the property name to be quoted, which is also
valid ECMAScript).


PointedEars