Need to understand JavaScript arrays, objects, and properties

Question

First see how JSON should look like

[
    {"ShortCode":"US","Name":"United States"},
    {"ShortCode":"CA","Name":"Canada"},
    {"ShortCode":"AG","Name":"Antigua and/or Barbuda"}
]

Code:

var countries = [];
map = {};

// This is going to make an HTTP post request to the controller
return $.post('/Client/CountryLookup', { query: query }, function (data) {
    // Loop through and push to the array
    $.each(data, function (i, country) {
    map[country.Name] = country;
    countries.push(country.Name);
});

$post() will return the above json & i need to parse the json in each loop but i do not understand what will be store in map object this line map[country.Name] = country;

Suppose country name is "united state" so actually store will be map['united state']=country what does it mean?

Even in the save code map{} access later like

var selectedShortCode = map[item].ShortCode;

How map can have a property like ShortCode ??

So please discuss this type of coding technique in detail and help me to understand the above code with few more example. thanks

Welcome to the wonderful world of async! You can't do that. — SLaks
– SLaks, Commented Jun 20, 2014 at 19:03
You're setting an index (the country name) on an object to be equal to the object containing the country name. So console.log(map['United States'].Name) will output United States. — Jasper
– Jasper, Commented Jun 20, 2014 at 19:06
@SLaks possible, but that's not evident from the question - it depends on how he's using the return value from his function - the return value will be a Promise, and if he puts his code in promise.done() it'll work just fine. Good point though! — CupawnTae
– CupawnTae, Commented Jun 20, 2014 at 20:04

Dayan Moreno Leon · Accepted Answer · 2014-06-20 19:31:31Z

1

your map is an object literal defined also known as hash or dictionary or relational array in other languages what basically relates a key(Strin) with a value(anything) in this case relates country names with the actual country object thats why

the map structure after your map[country.Name] = country operations would be { "United States":{"ShortCode":"US","Name":"United States"}, "Canada":{"ShortCode":"CA","Name":"Canada"}, "Antigua and/or Barbuda":{"ShortCode":"AG","Name":"Antigua and/or Barbuda"} }

then when you do

map["United States"]

you get

{"ShortCode":"US","Name":"United States"}

edited Jun 20, 2014 at 19:31

answered Jun 20, 2014 at 19:13

Dayan Moreno Leon

5,4552 gold badges25 silver badges24 bronze badges

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

2 Comments

Thomas Over a year ago

but how we can access like this way map[item].ShortCode? how ShortCode property used here ? please come with some sample code to understand this dynamic property ? thanks for reply.

Dayan Moreno Leon Over a year ago

thats what is writtend in the answer using map[item] is the same as using map["United States"] if item=="United States" map["United States"] is an object containing the properties ShortCode and Name hence map["United States"].ShortCode is "US".

Dragan Okanovic · Accepted Answer · 2014-06-23 10:01:09Z

0

Your data after the $.post call would be:

data = 
[
    { ShortCode: "US", Name: "United States" },
    { ShortCode: "CA", Name: "Canada" },
    { ShortCode: "AG", Name: "Antigua and/or Barbuda" }
];

Take a look at the jQuery's .each function documentation.

It basically can be rewritten as follows:

for(var i in data)
{
    var country = data[i];
    map[country.Name] = country;
    countries.push(country.Name);
}

So you end up with:

map =
{
    "United States": { ShortCode: "US", Name: "United States" },
    "Canada": { ShortCode: "CA", Name: "Canada" },
    "Antigua and/or Barbuda": { ShortCode: "AG", Name: "Antigua and/or Barbuda" }
};

countries = [ "United States", "Canada", "Antigua and/or Barbuda" ];

So your code parses json, and outputs all the countries that exist (countries) and all the data associated with them (map), in two different objects. countries can be used to easily itterate through the map, but there's no real need for it.

EDIT:

var country = data[0];
// country = { ShortCode: "US", Name: "United States" };
map[country.Name] = country;
// map["United States"] = { ShortCode: "US", Name: "United States" };

So you can later take map["United States"], it will return you an object { ShortCode: "US", Name: "United States" }, then you can simply access it's property ShortCode if you'd like to.

Mind that all variables in JavaScript are passed by reference, and that myObject["someProperty"] is exactly the same as myObject.someProperty.

edited Jun 23, 2014 at 10:01

answered Jun 20, 2014 at 19:19

Dragan Okanovic

7,7713 gold badges35 silver badges49 bronze badges

2 Comments

Thomas Over a year ago

but how we can access like this way map[item].ShortCode? how ShortCode property used here ? please come with some sample code to understand this dynamic property ? thanks for reply.

Dragan Okanovic Over a year ago

Edited. Hope it helps you understanding.

Collectives™ on Stack Overflow

Need to understand JavaScript arrays, objects, and properties

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related