From e1e3985977df297a7076eca356967b5b1cb5928d Mon Sep 17 00:00:00 2001 From: SAGARI DATTA Date: Fri, 15 Feb 2019 14:50:15 -0500 Subject: [PATCH 1/2] HW4 submission Sagari Datta --- lab/lab1/part1.js | 28 ++++++++++++------ lab/lab2/js/part1-ajax-calls.js | 31 ++++++++++++++++++-- lab/lab2/js/part2-app-state.js | 49 +++++++++++++++++++++++++++----- lab/lab2/js/part3-application.js | 21 +++++++++++++- 4 files changed, 110 insertions(+), 19 deletions(-) diff --git a/lab/lab1/part1.js b/lab/lab1/part1.js index da84f3d..3861bce 100644 --- a/lab/lab1/part1.js +++ b/lab/lab1/part1.js @@ -63,7 +63,7 @@ Is printMenu a function? Answer this question with underscore. Should evaluate to true. ===================== */ -var query1; +var query1 = _.isFunction(printMenu); console.log('printMenu is a function:', query1); @@ -72,7 +72,7 @@ Is bakedGoods an array? Answer this question with underscore. Should evaluate to true. ===================== */ -var query2; +var query2 = _.isArray(bakedGoods); console.log('bakedGoods is an array:', query2); @@ -81,7 +81,7 @@ Is the first element in bakedGoods an object? Answer this question with underscore. Should evaluate to true. ===================== */ -var query3; +var query3 = _.isObject(bakedGoods[0]); console.log('The first element in bakedGoods is an object:', query3); @@ -89,7 +89,7 @@ console.log('The first element in bakedGoods is an object:', query3); Use _.where to return all cakes. Or bread. Whichever is your favorite. ===================== */ -var query4; +var query4 = _.filter(bakedGoods, function(a) {return a.type == "Cake"}); console.log('All bread. Or cakes:', query4); @@ -97,7 +97,7 @@ console.log('All bread. Or cakes:', query4); Use _.filter to return all baked goods that cost more than $4. ===================== */ -var query5; +var query5 = _.filter(bakedGoods, function(a) {return a.price > 4});; console.log('More than $4:', query5); @@ -105,7 +105,8 @@ console.log('More than $4:', query5); Use _.sortBy to order the list by inventory (from lowest to highest). ===================== */ -var query6; +var query6 = _.sortBy(bakedGoods, 'inventory'); +; console.log('Sorted by inventory (lowest to highest):', query6); @@ -113,7 +114,7 @@ console.log('Sorted by inventory (lowest to highest):', query6); Use _.groupBy to organize the baked goods by type. ===================== */ -var query7; +var query7 = _.groupBy(bakedGoods, 'type'); console.log('Grouped by type:', query7); @@ -137,7 +138,18 @@ Rye ... $5.09 Whole Wheat ... $4.49 ===================== */ -// printMenu(query7); +//printMenu(query7); + +var menuFunction = function (menu) { + for (i in menu){ + console.log(i); + for (var k = 0; k < menu[i].length; k = k+1){ + console.log(menu[i][k].name + " " + menu[i][k].price); + } + } +}; + +menuFunction(query7) /* ===================== Stretch Goal: diff --git a/lab/lab2/js/part1-ajax-calls.js b/lab/lab2/js/part1-ajax-calls.js index 575a13c..cfda002 100644 --- a/lab/lab2/js/part1-ajax-calls.js +++ b/lab/lab2/js/part1-ajax-calls.js @@ -19,7 +19,12 @@ This recipe, can be used by underscore's _.filter. It will return only words with >=5 characters. ===================== */ -var isLengthOfFiveOrMore = function(str) {}; +// var isLengthOfFiveOrMore = function(str) { +// return _.filter(str, function(a){return a.length > 5 }) +// }; + +var isLengthOfFiveOrMore = (a) => { + return a.length > 5 }; console.log("isLengthOfFiveOrMore success:", _.isEqual(_.filter(['this', 'is','a', 'test', 'testing'], isLengthOfFiveOrMore), ['testing'])); @@ -30,7 +35,9 @@ console.log("isLengthOfFiveOrMore success:", function you write along with underscore's _.each to log the double of every number in the provided array. ===================== */ -var logDouble = function(num) {}; +var logDouble = function(num) { + return num * 2 +}; var theArray = [1, 5, 20, 100]; @@ -94,7 +101,6 @@ var phillySolarInstallationDataUrl = "https://raw.githubusercontent.com/CPLN692- var phillyCrimeDataUrl = "https://raw.githubusercontent.com/CPLN692-MUSA611/datasets/master/json/philadelphia-crime-snippet.json"; var phillyBikeCrashesDataUrl = "https://raw.githubusercontent.com/CPLN692-MUSA611/datasets/master/json/philadelphia-bike-crashes-snippet.json"; - /* ===================== Data you grab through ajax is just text. You'll need to parse it as javascript objects to really work with it. Use the function `JSON.parse` on the string you @@ -104,12 +110,31 @@ var phillyBikeCrashesDataUrl = "https://raw.githubusercontent.com/CPLN692-MUSA61 that this step is completed before moving on! ===================== */ +/* +var storedValue; +$.ajax(phillyBikeCrashesDataUrl).done(function(result){ + storedValue = JSON.parse(result); + console.log(storedValue); +});*/ + /* ===================== Now that you've properly parsed your data, use _.each to plot the dataset you've pulled down. ===================== */ +//created a function that gets url data, parses through it and adds markers to the map +var getCrimeData = function() { + $.ajax(phillyCrimeDataUrl).done(function(res) { + //store data in JSON format + crimeData = JSON.parse(res); + console.log(crimeData); + _.forEach(crimeData, function(point){ + L.marker([point.Lat, point.Lng]).addTo(map);}); + }); +}; +//call the function +getCrimeData(); /* ===================== Leaflet setup - feel free to ignore this diff --git a/lab/lab2/js/part2-app-state.js b/lab/lab2/js/part2-app-state.js index e342fe3..841483f 100644 --- a/lab/lab2/js/part2-app-state.js +++ b/lab/lab2/js/part2-app-state.js @@ -33,12 +33,29 @@ var one = justOne(); ===================== */ -// We set this to HTTP to prevent 'CORS' issues -var downloadData = $.ajax("http://"); -var parseData = function() {}; -var makeMarkers = function() {}; -var plotMarkers = function() {}; +//download data from URL +var downloadData = $.ajax("https://raw.githubusercontent.com/CPLN692-MUSA611/datasets/master/json/philadelphia-solar-installations.json"); + +//change data into JSON format +var parseData = function(data){ + return JSON.parse(data); +}; + +//add markers - using map function since +var makeMarkers = function(data) { + return _.map(data, function(point){ + return L.marker([point.LAT, point.LONG_]); + }); +}; + +var plotMarkers = function(data) { + _.forEach(data, function(point) { + point.addTo(map); + }); +}; +/* +// We set this to HTTP to prevent 'CORS' issues /* ===================== Define the function removeData so that it clears the markers you've written @@ -53,7 +70,11 @@ var plotMarkers = function() {}; user's input. ===================== */ -var removeMarkers = function() {}; +var removeMarkers = function(data) { + return _.map(data, function(point) { + return map.removeLayer(point); + }); +}; /* ===================== Optional, stretch goal @@ -87,5 +108,19 @@ downloadData.done(function(data) { var parsed = parseData(data); var markers = makeMarkers(parsed); plotMarkers(markers); - removeMarkers(markers); + //removeMarkers(markers); }); + +/* +Test code for console +var solarPhilly; +var downloadData = $.ajax("https://raw.githubusercontent.com/CPLN692-MUSA611/datasets/master/json/philadelphia-solar-installations.json"); +var parseData = function() { + var download = downloadData; + download.done(function(res) { + console.log(res); + //store data in JSON format + solarPhilly = JSON.parse(res); + console.log(solarPhilly); + }) +};*/ diff --git a/lab/lab2/js/part3-application.js b/lab/lab2/js/part3-application.js index 8572d7d..afe1929 100644 --- a/lab/lab2/js/part3-application.js +++ b/lab/lab2/js/part3-application.js @@ -27,10 +27,18 @@ /* ===================== Define a resetMap function to remove markers from the map and clear the array of markers ===================== */ -var resetMap = function() { + +var resetMap = function(data) { /* ===================== Fill out this function definition ===================== */ + + //parse through the data (list) to remove the marker + //using map function (instead of _.forEach) since I wanted to have a return value + return _.map(data, function(point) { + return map.removeLayer(point); + }); + }; /* ===================== @@ -42,8 +50,19 @@ var getAndParseData = function() { /* ===================== Fill out this function definition ===================== */ + + //get url data + var downloadData = $.ajax("https://raw.githubusercontent.com/CPLN692-MUSA611/datasets/master/json/philadelphia-solar-installations.json"); + var parseData = function() { + var download = downloadData; + download.done(function(res) { + solarPhilly = JSON.parse(res); + console.log(solarPhilly); + }) + }; + /* ===================== Call our plotData function. It should plot all the markers that meet our criteria (whatever that criteria happens to be — that's entirely up to you) From 06e2711af3530057bd20058ba027f646d5db3870 Mon Sep 17 00:00:00 2001 From: SAGARI DATTA Date: Fri, 15 Feb 2019 18:16:37 -0500 Subject: [PATCH 2/2] added comments and made changes to part 3 of lab2 --- lab/lab1/part1.js | 7 ++++++- lab/lab2/js/part3-application.js | 17 +++++++++++++---- 2 files changed, 19 insertions(+), 5 deletions(-) diff --git a/lab/lab1/part1.js b/lab/lab1/part1.js index 3861bce..3b76b9b 100644 --- a/lab/lab1/part1.js +++ b/lab/lab1/part1.js @@ -140,15 +140,20 @@ Whole Wheat ... $4.49 //printMenu(query7); +//input for the function is the menu object var menuFunction = function (menu) { +//first for loop gets each key in menu i.e., cake and bread for (i in menu){ + //print the first item in the menu object console.log(i); + //second for loop loops through the length of the array objects under each key in the menu for (var k = 0; k < menu[i].length; k = k+1){ + //print name of each item and the price in the array for cake and bread console.log(menu[i][k].name + " " + menu[i][k].price); } } }; - +//call menu function menuFunction(query7) /* ===================== diff --git a/lab/lab2/js/part3-application.js b/lab/lab2/js/part3-application.js index afe1929..40a7d23 100644 --- a/lab/lab2/js/part3-application.js +++ b/lab/lab2/js/part3-application.js @@ -46,6 +46,8 @@ var resetMap = function(data) { will be called as soon as the application starts. Be sure to parse your data once you've pulled it down! ===================== */ + +var solarPhilly; var getAndParseData = function() { /* ===================== Fill out this function definition @@ -53,22 +55,29 @@ var getAndParseData = function() { //get url data var downloadData = $.ajax("https://raw.githubusercontent.com/CPLN692-MUSA611/datasets/master/json/philadelphia-solar-installations.json"); + //create function for parsing data var parseData = function() { + //store data in a variable var download = downloadData; download.done(function(res) { - solarPhilly = JSON.parse(res); - console.log(solarPhilly); + //store JSON (parsed data) in a new variable + var solarPhilly = JSON.parse(res); + //console log the parsed data + console.log(solarPhilly); }) }; - /* ===================== Call our plotData function. It should plot all the markers that meet our criteria (whatever that criteria happens to be — that's entirely up to you) ===================== */ -var plotData = function() { +var plotData = function(data) { /* ===================== Fill out this function definition ===================== */ + + _.forEach(data, function(point) { + L.marker([point.LAT, point.LONG_]).addTo(map); + };