// Data Structures
// array - simple
const locations = [
{ city: 'San Francisco', state: 'CA' },
{ city: 'Los Angeles', state: 'CA' },
{ city: 'San Diego', state: 'CA' },
{ city: 'Denver', state: 'CO' },
{ city: 'Boulder', state: 'CO' },
{ city: 'Colorado Springs', state: 'CO' },
{ city: 'Kansas City', state: 'KS' },
{ city: 'Austin', state: 'TX' },
{ city: 'Dallas', state: 'TX' },
{ city: 'Houston', state: 'TX' },
{ city: 'Kansas City', state: 'MO' },
{ city: 'New York', state: 'NY' },
{ city: 'Rochester', state: 'NY' }
]
// object - map
const locationsByState = {
CA: [
{ city: 'San Francisco', state: 'CA' },
{ city: 'Los Angeles', state: 'CA' },
{ city: 'San Diego', state: 'CA' },
],
CO: [
{ city: 'Denver', state: 'CO' },
{ city: 'Boulder', state: 'CO' },
{ city: 'Colorado Springs', state: 'CO' },
],
KS: [
{ city: 'Kansas City', state: 'KS' },
],
MO: [
{ city: 'Kansas City', state: 'MO' },
],
NY: [
{ city: 'New York', state: 'NY' },
{ city: 'Rochester', state: 'NY' },
],
TX: [
{ city: 'Austin', state: 'TX' },
{ city: 'Dallas', state: 'TX' },
{ city: 'Houston', state: 'TX' },
]
}
// Questions
//
// What is a simple array format useful for?
// What is an object map useful for?
// What would be the benefits of working with an array vs an object?
// What are some tradeoffs of looping vs looking up directly?
//
// How would you format your data for...
// calculating number of entries per state?
// a list of unique city names?
// percentage of unique city names?
// rendering a list of cities grouped by states?
// data you want to sort?
// filtering down to a cities starting with a specific character?
// same as before but inside a specific state?
// searching for a matching result?
//
//
// Randomly assign a `distance` property to each city
// Sort the cities by `distance` property
// Find the difference between the closest and furthest city
// Add a property for the time...
Please Whitelist JSFiddle in your content blocker.
Help keep JSFiddle free for always by one of two ways:
Whitelist JSFiddle in your content blocker (two clicks)
Go PRO and get access to additional PRO features →
Join the 4+ million users, and keep the JSFiddle dream alive.
Ad-free
All ads in the editor and listing pages are turned completely off.
Use pre-released features
You get to try and use features (like the Palette Color Generator) months before everyone else.
Fiddle collections
Sort and categorize your Fiddles into multiple collections.
Private collections and fiddles
You can make as many Private Fiddles, and Private Collections as you wish!
Console
Debug your Fiddle with a minimal built-in JavaScript console.