What is the best way to store the following in Javascript?

Question

I need to store country, state, city, and county info in Javascript. Example:

   Country    State           City           County 
    USA        CA           Oakland         Alameda 
    USA        CA           Markleeville    Alpine 
    USA        WA           Seattle         king
    ...
   CANADA     Ontario       Toronto          -
    ...

    UK    Grater London     London           -        

What is the best storage or data structure to store such information in Javascript? I was thinking of array but there must be other easier way.

Thanks

Answer 1

How much data are we talking about?

The most straight-forward way would be an array (of objects), which may not scale to tens of thousands of records:

var data = [
   { country: 'USA', state: 'CA', city : 'Oakland', county: 'Alameda' } 
   ....
];

Answer 2

Use JSON?

Answer 3

Almost like Thilo wrote, but I would have store them in a tree structure. Each tree one country/state and each tree in a different file :

    var data = { country: 'USA', states: [{name: 'CA', cities: [{'name':'Oakland', county: 'Alameda' }]
}] 
}

Each of those in different file, and when loaded they should overwrite each other (i.e. all of the files start with var data=...

If you store that in DB/server side code, make sure those files are being cached, no problem in caching megas of data.

Answer 4

If you want the easiest way to process you should store it in JSON.

[
   { country: 'USA', state: 'CA', city : 'Oakland', county: 'Alameda' },
   { country: 'USA', state: 'CA', city : 'Markleeville', county: 'Alpine' },
   { country: 'USA', state: 'CA', city : 'Seattle', county: 'king' }
   ....
];

If you want the smallest filesize possible you should use CSV:

Country,State,City,County 
USA,CA,Oakland,Alameda 
USA,CA,Markleeville,Alpine 
USA,WA,Seattle,king

If you want something in between you can use compressed JSON format:

[

  "cols": ["country", "state", "city", "county"],
  "rows": [["USA", "CA", "Oakland", "Alameda"],
           ["USA", "CA", "Markleeville", "Alpine"],
           ["USA", "CA", "Seattle", "king"],
          ... ]
};

Explanation

With JSON you get a native Javascript object which is loaded via <script> tag or Ajax. If you go with the compressed JSON format you still get a native object, the only difference is in how you use the data. With CSV you should write your own parser, but the small size may worth it.

You can read about the performance implications of JSON and a custom format here:

Building Fast Client-side Searches for Flickr

Answer 5

Since the requirement seems to be javascript regardless of the scenario, then use JSON. If you don't want to store everything on the client side, think about calling a web service that would return only the data you need is JSON format.