\nIn JavaScript, objects contain one or more key, value pairs. The key, value pairs are enclosed in a set of curly brackets. Values may be variables, arrays, methods or even another object. The following is an example of an object:<\/p>\n
\nlet circle = {\n radius: 3,\n color: 'blue',\n diameter: function () {\n return this.radius * 2;\n };\n};\n<\/pre>\n<\/code><\/p>\n
The dot . operator is used to access an object property value:<\/p>\n
let radius = circle.radius;<\/pre>\n<\/code><\/p>\n
Brackets and the key name may also be used:<\/p>\n
let radius = circle['radius'];<\/pre>\n<\/code><\/p>\n
This way is helpful when creating an object property based on another variable, example:<\/p>\n
\nlet colorKey = 'color';\nlet myColor = 'black';\n\nlet car = {\n year: 1997,\n price: 12000,\n make: 'honda',\n model: 'accord'\n};\n\nconsole.log(JSON.stringify(car));\n\ncar[colorKey] = myColor;\n\nconsole.log(car[colorKey]);\nconsole.log(JSON.stringify(car));\n<\/pre>\n<\/code><\/p>\n
Looping through an object can be done with a for in loop;<\/p>\n
\nfor (key in car) {\n console.log('Key: ' + key + ', value: ' + car[key]);\n}\n<\/pre>\n<\/code><\/p>\n
\nor with Object.properties:<\/p>\n
\nObject.keys(car).forEach(function (key) {\n if (car.hasOwnProperty(key)) {\n let value = car[key];\n console.log('Key: ' + key + ', value: ' + car[key]);\n }\n});\n<\/pre>\n<\/code><\/p>\n
\nI use objects all the time because it's easy to retrieve items from when using a key.
\nFor example, in my vacation road website<\/a>, I store place types with a list of places for each type. <\/p>\n\nlet resultsMap = {\n Entertainment: {\n details: [\n 'ABC, 123 Random St., Somewhere, NY',\n 'DEF, 456 Blue St., Somewhere, NY',\n 'GHI, 789 Black St., Somewhere, NY'\n ],\n markers: [\n {id: 1, show: true},\n {id: 2, show: false},\n {id: 3, show: true}\n ]\n },\n Hotels: {\n details: [\n 'Marriott, 345 Some St., Somewhere, NY',\n 'Holiday Inn, 345 Other St., Somewhere, NY',\n 'Fairfield, 345 Red St., Somewhere, NY'\n ],\n markers: [\n {id: a, show: true},\n {id: b, show: false},\n {id: c, show: true}\n ]\n }\n}\n<\/pre>\n<\/code><\/p>\n
Then the list of hotels can be retrieved by doing:<\/p>\n
\nlet hotelList = resultsMap['Hotels'];\nconsole.log(JSON.stringify(hotelList.details));\n\n<\/pre>\n<\/code><\/p>\n
\nImplementation:<\/strong><\/p>\nInside the javascript_tutorial.js file created in the JavaScript set up tutorial<\/a>, add the following lines that are in bold:<\/p>\n\/\/ JavaScript Tutorial\n\n\/*\n* This file will add JavaScript\n* to a website.\n*\/\n\n(function() {\n let doc = document; \n let defaultLocation = [-86.7816, 36.1627]; \/\/ longitude, latitude\n\n\n \n function setLocation(location) {\n if (location) {\n let locationElement = doc.getElementById('location');\n locationElement.innerHTML = location.city + ', ' + location.region;\n }\n }\n <\/strong>\n})(); \n<\/pre>\n\nThis adds a function that will eventually be called to set the user's location in the html page.<\/p>\n
Next, in the js directory containing the javascript_tutorial.js file, create another directory called modules. Inside this directory, create a file called Weather.js. Add the following to Weather.js:<\/p>\n
class Weather {\n\n \/\/ Constructor\n constructor() {\n };\n\n getLocation() {\n let url = 'https:\/\/ipinfo.io\/json';\n let options = {\n mode : 'cors'\n };\n\n\n fetch(url, options)\n .then(response => response.json()); \n };\n}\n<\/pre>\n\nThis adds a function that will eventually call an API to retrieve the user's location based on their ip address. <\/p>\n
\nThe JavaScript tutorial series starts with this post<\/a>.<\/p>\n\n(paid links)
\nMore JavaScript<\/a><\/p>\n