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 stackoverflow.com/questions/4935632/parse-json-in-javascript — Dmitri Algazin
– Dmitri Algazin, Commented Sep 11, 2015 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_
– Ed_, Commented Sep 11, 2015 at 16:37

Nibb · Accepted Answer · 2015-09-11 16:35:49Z

1

in your $http request, try changing it from:

 $scope.thresholds = data;

to

 $scope.thresholds = data.thresholds;

answered Sep 11, 2015 at 16:35

Nibb

2,0451 gold badge15 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mike Needham Over a year ago

Thanks bro. Still not sure about drilling down further though. For example if I want maxTemp:red value etc...

Nibb Over a year ago

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 developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/…

Ed_ · Accepted Answer · 2015-09-11 16:43:12Z

0

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

});

answered Sep 11, 2015 at 16:43

Ed_

19.2k8 gold badges48 silver badges75 bronze badges

Collectives™ on Stack Overflow

Parsing JSON File with AngularJS

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related