CODEWITHSUNDEEP
javascriptangularjsjsonnode.js
HarryMoy
HarryMoy

Reputation: 171

JSON Data in Angular

I am creating an AngularJS client and connecting it to a REST API I have running on NodeJS. I do GET requests to get the data by going to the URL and then using the stock symbol i.e. localhost:8080/stocks/aapl for Apple's share data. In AngularJS I am using the $http service and then doing data-binding like this: 

var restURL = "http://localhost:8080/stocks/" + searchSymbol;

$http({
    method: 'GET',
    url: restURL
}).then(function successCallback(response) {
    //Variables that are going to be used
    var data, symbol, companyName;
    //Parsing the data
    data = angular.fromJson(response);
    //Putting the data into the variables
    symbol = data.symbol;
    companyName = data.name;
    //Putting data from variables into Angular code
    $scope.companyName = companyName;
    $scope.symbol = symbol;
}, function errorCallback(response) {
    var message = "Error getting response from server";
    $scope.errorMessage = message;
});

and this is what the view component looks like:

<h1>Search Stocks</h1>
<p>Search for stocks using the text box below</p>

<p><input type="text" ng-model="searchSymbol" placeholder="Search by Symbol"></p>
<p><button ng-click="search()">Search</button></p>

<p> {{ symbol }}</p>
<p>{{ companyName }}</p>

<p>{{ errorMessage }}</p>

When I click the button, the GET request is reflected on the NodeJS server as it shows the company data in the terminal view however I can't seem to get it parsed in Angular.

Upvotes: 0

Views: 105

Answers (1)

Suri
Suri

Reputation: 56

Since your response is an object which has a property data in it which contains symbol, your symbol assignment symbol = data.symbol; needs to change to symbol = data.data.symbol; And likewise for companyName (use data.data.name).

See if that works.

Upvotes: 2

Related Questions