Angular JS/IONIC Reading JSON FIle

Question

Hi I have an angular js/ionic project that is calling a Yahoo! finance webservice which is returning the following json.. I am trying to display it on my index.html however it fails to render the JSON data how can i reference in my angular to pull "price" : "34.849998" from the JSON?

I tried pulling using {{fiveDay.list[0].meta[0].type}} that diidnt work

index.html (

is where i need proper JSON reference)

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>


<!DOCTYPE html>
<html ng-app="starter">
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
      <title></title>
      <link href="lib/ionic/css/ionic.css" rel="stylesheet">
      <link href="css/style.css" rel="stylesheet">
      <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
         <link href="css/ionic.app.css" rel="stylesheet">
         -->
      <!-- ionic/angularjs js -->
      <script src="lib/ionic/js/ionic.bundle.js"></script>
	  
      <!-- cordova script (this will be a 404 during development) -->
      <script src="cordova.js"></script>
      <!-- your app's js -->
      <script src="js/app.js"></script>
      
      
 
 
   </head>
     </h1>
   <body >


      <ion-pane>
         <ion-header-bar class="bar-dark">
            <h1 class="title">Stock Profit Calculator</h1>
         </ion-header-bar>
         <ion-content>
            <div class="list" ng-controller="MainController">		   
               <label class="item item-input item-stacked-label">
              <b> <span class="input-label">Ticker Symbol:</span> </b>
               <input type="text" ng-model="ticker">
               </label>
			   <p>{{fiveDay.list.resources[0].resource.fields.price}}</p>
                       
			    <br>
               <label class="item item-input item-stacked-label">
              <b> <span class="input-label">Allotment:</span></b>
               <input type="text" placeholder="0.00">
               </label>
               
 
         </ion-content>
      </ion-pane>
   </body>
</html>

app.js:

// Ionic Starter App

// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
var app = angular.module('starter', ['ionic'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})

app.controller('MainController', ['$scope', 'stocks', function($scope, stocks) { 
//$scope.ticker = 'Bad Guy KUTA'; 
stocks.success(function(data) { 
    $scope.fiveDay = data; 
  }); 



}]);


app.factory('stocks', ['$http', function($http) { 
  return $http.get('http://finance.yahoo.com/webservice/v1/symbols/YHOO/quote?format=json') 
            .success(function(data) { 
              return data; 
            }) 
            .error(function(err) { 
              return err; 
            }); 
}]);

The JSON File i am tryign to read is as follows:

{
"list" : { 
"meta" : { 
"type" : "resource-list",
"start" : 0,
"count" : 1
},
"resources" : [ 
{
"resource" : { 
"classname" : "Quote",
"fields" : { 
"name" : "Yahoo! Inc.",
"price" : "34.849998",
"symbol" : "YHOO",
"ts" : "1449608400",
"type" : "equity",
"utctime" : "2015-12-08T21:00:00+0000",
"volume" : "19852579"
}
}
}

]
}
}

Could you describe more details about "fails to render"? Is there any error message? — yukuan
– yukuan, Commented Dec 9, 2015 at 1:38
Fails to render as in i do not get the string "resource-list" instead i just see the angular js call i made stockVariable.list.meta.type — BadGuyKUTA
– BadGuyKUTA, Commented Dec 9, 2015 at 5:55

R. Salisbury · Accepted Answer · 2015-12-09 16:34:23Z

2

You are calling .success() twice:

return $http.get('http://finance.yahoo.com/webservice/v1/symbols/YHOO/quote?format=json') 
            .success(function(data) { 
              return data; 
            }) 
...
stocks.success(function(data) {
    $scope.stockVariable = data; 
  });

I would advise simply returning the promise from your factory:

return $http.get('...');

...
stocks.then(function(data) { $scope.stockVariable = data; });

Edit:

Neither list nor meta are arrays:

{
   "list":{
      "meta":{
         "type":"resource-list",
         "start":0,
         "count":1
      },
      "resources":[
         {
            "resource":{
               "classname":"Quote",
               "fields":{
                  "name":"Yahoo! Inc.",
                  "price":"34.849998",
                  "symbol":"YHOO",
                  "ts":"1449608400",
                  "type":"equity",
                  "utctime":"2015-12-08T21:00:00+0000",
                  "volume":"19852579"
               }
            }
         }
      ]
   }
}

Only values with square braces are arrays, meaning only resources is an array. So, to access price, you need to do:

$scope.prices = fiveDay.list.resources
    .map(function(item) { 
         return item.resource.fields.price; 
    });

Or, if you are really only getting one:

$scope.price = fiveDay.list.resources[0].resource.fields.price;

edited Dec 9, 2015 at 16:34

answered Dec 9, 2015 at 1:49

R. Salisbury

2,00519 silver badges18 bronze badges

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

2 Comments

BadGuyKUTA Over a year ago

Everything works fine I think it is how I am trying to read the data from within the JSON document so my JSON path... What is the proper way to reference "price" : "34.849998" through angular?

BadGuyKUTA Over a year ago

odd i tried $scope.price = fiveDay.list.resources[0].resource.fields.price still failed to display it... see my original post edit

Collectives™ on Stack Overflow

Angular JS/IONIC Reading JSON FIle

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related