Parsing JSON File with AngularJS

Question

I am trying to parse a JSON File I created for an app I am working on. The JSON file looks like this:

{"thresholds":[
    {"heatIndex":[
        {"maxTemp":[{"red":"125","orange":"105","yellow":"90","green":"-80"}]},
        {"minTemp":[{"red":"-50","orange":"-35","yellow":"-20","green":"0"}]}
    ]},
    {"wind":[
        {"speed":[{"red":"34.8","orange":"26.1","yellow":"17.4","green":"0"}]},
        {"gust":[{"red":"50.4","orange":"39.1","yellow":"26.1","green":"0"}]}
    ]}
]}

I need to get my angular app to output the data for me and have been trying to follow the tutorials for http.get and I am not able to get my data out. The basic part I need help with how to format this part of my Angular app:

<ul>
    <li ng-repeat="x in thresholds">
        {{x.thresholds}}
    </li>
    </ul>
    </div>

    <!-- NG APP Script -->
    <script>
    var ehwo2App = angular.module('ehwo2App' , []);
    ehwo2App.controller('ehwo2Ctrl' , function ($scope, $http) {
        $http.get('config.json').success(function(data) {
            $scope.thresholds = data;
        });
        });
    </script>

$scope.thresholds = JSON.parse(data); (as data is coming string I think) ask your friend Google before posting question http://stackoverflow.com/questions/4935632/parse-json-in-javascript — Dmitri Algazin, Sep 11 '15 at 16:35
@DmitriAlgazin actually you don't have to do this, angular automatically parses json for you. Try being less condescending when commenting unless you know for a fact that you're right. — Ed_, Sep 11 '15 at 16:37

score 1 · Answer 1 · answered Sep 11 '15 at 16:35

1

in your $http request, try changing it from:

 $scope.thresholds = data;

to

 $scope.thresholds = data.thresholds;

answered Sep 11 '15 at 16:35

Nibb

1,801
1
13
19

Thanks bro. Still not sure about drilling down further though. For example if I want maxTemp:red value etc... – Mike Needham Sep 11 '15 at 16:44
I have a bit of a problem remebering that too. You should be able to access the data the same way you would access a javascript object, I believe. So the max temps would be $scope.thresholds.heatIndex.maxTemp check this out https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects – Nibb Sep 11 '15 at 17:16

score 0 · Answer 2 · answered Sep 11 '15 at 16:43

Firstly, note that success shortcut method is now deprecated, and you should use the standard .then methods (see the red box on this page.

Secondly, you've not actually said what exactly isn't working. Try using the below code and let us know what is logged in the console.

ehwo2App.controller('ehwo2Ctrl' , function ($scope, $http) {

  console.log("Making GET request");

  $http.get('http://www.dev.nids.noaa.gov/~mneedham/config.json')

  .then(function(response) {
    $scope.thresholds = response.data.thresholds;
    console.log($scope.thresholds);
  })

  .catch(function(error){
    console.error("Error with GET request", e);
  });

});

Parsing JSON File with AngularJS

2 Answers2