CODEWITHSUNDEEP
javascriptjsonangularjs
Mike Needham
Mike Needham

Reputation: 143

Parsing JSON File with AngularJS

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>

Upvotes: 3

Views: 1526

Answers (2)

Ed_
Ed_

Reputation: 19098

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);
  });

});

Upvotes: 0

Nibb
Nibb

Reputation: 2025

in your $http request, try changing it from:

 $scope.thresholds = data;

to

 $scope.thresholds = data.thresholds;

Upvotes: 1

Related Questions