AngularJS Tutorial RESTful JSON Parsing

Abhigyan Singh 12th Jul 2020

In this tutorial I am going to explain you how to parse data to your angular application using RESTful JSON or you can incorporate data using other API’s too, to do the following we are going to use $http service. Here we can parse data using RESTful JSON.

AngularJS $http:

The AngularJS $http service makes a request to the server, and returns a response.

Directives used in this application:

ng-app: ng-app directives is used to show the root element of angular js. All angular js application must have only have ng-app directive.

ng-controller: ng-controller directive is used to define angular js controller.

angular.module: A module is a collection of services, directives, controllers, filters, and configuration information.

$scope: $scope refers to application which is to use the studentController object.

app.controller: its used to declare a controller.

controller: AngularJS controllers control the data of AngularJS applications.

In the demo application I have made an news reading app using api response from mashape of Times of india, i have added sample news record in a json file news.json and placed it under js folder, see the code description below:

news.json:

[
{
"NewsItemId": "53224065",
"HeadLine": "President's escort car meets with accident in Darjeeling",
"Agency": "IANS",
"DateLine": "Jul 15, 2016, 01.26PM IST",
"WebURL": "https://timesofindia.indiatimes.com/india/Presidents-escort-car-meets-with-accident-in-Darjeeling/articleshow/53224065.cms",
"Caption": "President Pranab Mukherjee's convoy was involved in an accident on Friday, when one of the escort vehicles slipped into a ditch while on its way to Bagdogra in northern West Bengal. Both Mukherjee and West Bengal chief minister Mamata Banerjee, who were part of the convoy, are safe.",
"Image": {
"Photo": "https://timesofindia.indiatimes.com/photo.cms?photoid=53224162",
"Thumb": "https://timesofindia.indiatimes.com/thumb.cms?photoid=53224162",
"PhotoCaption": ""
},
"Keywords": "",
"Story": "DARJEELING: President Pranab Mukherjee's convoy on Friday was involved in an accident when one of the escort vehicles slipped into a ditch while on its way to Bagdogra in northern West Bengal.\n\nBoth Mukherjee and West Bengal chief minister Mamata Banerjee, who was part of the convoy, are safe. The President is on a three-day visit to Darjeeling.\n\nThe accident happened when the convoy was heading towards the Bagdogra airport from Darjeeling. At least five security personnel sustained minor injuries in the accident.\n\n\"There is no reason to worry. Everybody is safe. The President is safe,\" said Banerjee, who herself supervised the rescue work.\n\n\"Car in President's carcade from Darjeeling to Bagdogra goes off road, minor injuries to security personnel,\" Rashtrapati Bhavan said in tweets.\n\n\"Unfortunate accident involving escort vehicle in convoy enroute to Bagdogra. Everybody is well by grace of God,\" it added.\n",
"CommentsToken": "YUhSMGNEb3ZMM1JwYldWemIyWnBibVJwWVM1cGJtUnBZWFJwYldWekxtTnZiUzkxYzNKamIyMXRaVzUwWm1WbFpITnVaWGN2TlRNeU1qUXdOalV1WTIxelAyWmxaV1IwZVhCbFBYTnFjMjl1NTc4ODlhZjVkMWE5Mw==",
"CommentsCountToken": "YUhSMGNEb3ZMM1JwYldWemIyWnBibVJwWVM1cGJtUnBZWFJwYldWekxtTnZiUzkxYzJWeVkyOXRiV1Z1ZEdOdmRXNTBMelV6TWpJME1EWTFMbU50Y3c9PTU3ODg5YWY1ZDFhY2M=",
"RelatedNewsToken": "YUhSMGNEb3ZMM1JwYldWemIyWnBibVJwWVM1cGJtUnBZWFJwYldWekxtTnZiUzl1WlhkemNtVnNZWFJsWkdabFpXUnpMelV6TWpJME1EWTFMbU50Y3o5bVpXVmtkSGx3WlQxemFuTnZiZz09NTc4ODlhZjVkMWIwMg==",
"images": [
{
"id": "53224065",
"imagetoken": "YUhSMGNEb3ZMM1JwYldWemIyWnBibVJwWVM1cGJtUnBZWFJwYldWekxtTnZiUzkwYUhWdFlpNWpiWE0vY0dodmRHOXBaRDAxTXpJeU5EQTJOUT09NTc4ODlhZjVkMWI0ZQ=="
}
]
},
]

Index.html:

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header"><span class="navbar-brand"><img class="brand" src="img/logo.png" height="20" /> News App (AngularJS Tutorial RESTful JSON Parsing)</span></div>
</div>
</nav>
<div class="container">
<div><!-- Add an News --></div>
</div>
<div class="row"><!-- List of News -->
<div class="row">
<div class="col-xs-12">
<ul class="list-group">
<li class="list-group-item">
<h3><a href="{{update.WebURL}}">{{update.HeadLine}}</a></h3>
<img class="img-responsive" src="{{update.Image.Photo}}" />
{{update.DateLine}}
<h5>{{update.Caption}}</h5>
{{update.Story}}</li>
</ul>
</div>
</div>
</div>
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/angular.min.js"></script>
<script src="js/app.js"></script>

app.js:

var app = angular.module('myApp', []);
app.controller('newsController', function($scope, $http){
$http({method: 'POST', url: 'js/news.json'}).success(function(data)
{
$scope.updates = data; // response data
});

});

I hope you enjoyed the tutorial, you can download a copy for you and see the live demo below

Authored By Abhigyan Singh

He is a continuous blogger and has blogged on different topic. He loves to surf Internet and always trying to get new Idea about new Technology and Innovations and sharing these great information to all the technology lovers.

Also on DiscussDesk