Added HTTP Service to display Data from JSON File. Used Eval (Securit…

…y issue)
ltfschoen · Sep 14, 2014 · f30c6bb · f30c6bb
1 parent 44282e9
commit f30c6bb
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 9 deletions.
diff --git a/app/data/sentences.json b/app/data/sentences.json
@@ -1,10 +1,9 @@
-// dataset of sentences stored in JSON format
 [
   {"name": "Hello",
    "snippet": "1"
   },
   {"name": "Goodbye", 
-   "snippet': "2"
+   "snippet": "2"
   },
   {"name": "Greetings", 
    "snippet": "3"

diff --git a/app/index.html b/app/index.html
@@ -26,8 +26,6 @@
     <link rel="stylesheet" href="styles/main.css">
     <!-- endbuild -->
 
-    <link rel="import" id="map" href="shared/map.html">
-    <link rel="import" id="footer" href="shared/footer.html">
   </head>
   <!-- ROOT SCOPE (i.e. ngApp) -->
   <!-- MAPCTRL SCOPE -->
@@ -72,7 +70,7 @@ <h1 class="title">Map for Luke</h1>
               <!-- Angular filter fn to process input for ngRepeat Directive -->
               <!-- it creates a new array of records matching the query --> 
               <!-- orderProp Model is input to orderBy Filter -->
-              <li ng-repeat="sentence in sentences | filter:query | orderBy:orderProp">
+              <li ng-repeat="sentence in sentences | filter:query | orderBy:orderProp track by $index">
                 <!-- bindings refer to app model setup in controller -->
                 <!-- ngBind or ngBindTemplate Directives used instead of handlebars in innerHTML section so invisible to user while page loading -->
                 <!-- ngCloak (works w IE7) hides attr until compiled by Angular -->

diff --git a/app/scripts/controllers.js b/app/scripts/controllers.js
@@ -15,10 +15,31 @@ angular.module('YeomanIonic.controllers', [])
   // AngularJS detects and parses the JSON response automatically
   // $http service returns a promise object with a success method
   // assign dataset to scope of the controller as a Model named 'sentences'
-  // Shortcut method applied below
-  $http.get('data/sentences.json').success(function(data) {
-    $scope.sentences = data;
-  });
+  $http({
+    method: 'GET', 
+    url: 'data/sentences.json'
+  }).
+    success(function(data, status, headers, config) {
+      // this callback will be called asynchronously
+      // when the response is available
+      console.log("HTTP Request - Success");
+      console.log("Data is: " + data);
+      console.log("Status is: " + status);
+      console.log("Headers is: " + headers);
+      console.log("Config is: " + config);
+
+      // console.log("angular.fromJson(data) ==> " + angular.fromJson('data'));
+      // console.log("window.JSON.parse('data') ==> " + window.JSON.parse('data'));
+      // console.log("JSON.parse('data') ==> " + JSON.parse('data'));
+      console.log("eval(data) ==> " + eval(data)); // security issues 
+      $scope.sentences = eval(data);
+      console.log(typeof($scope.sentences));
+    }).
+    error(function(data, status, headers, config) {
+      // called asynchronously if an error occurs
+      // or server returns response with an error status.
+      console.log("HTTP Request - Error");
+    });
 
   // dataset moved to data/sentences.json