Scenario: – How to fetch JSON data from backend into User Interface (UI) of application using Angular JS?

We have divided our solution approach into 2 parts; in part-1, tutorial we would fetch the data in a straight flow, without thinking about the framework level things.

Reading json data using service


JS File

//Creat app module
var app = angular.module('myApp',[])
//Creating the controller constructor
//Calling the get method of service
$scope.myData =;


html file

<!DOCTYPE html>
<html ng-app="myApp">
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/controllerRead.js"></script>
<link rel="stylesheet" type="text/css" href="css/family.css">
<div ng-controller="familyCtrl">
<p>Reading JSON data using AngularJS Service component</p>
<li ng-repeat="x in">
{{ x.age + ', ' + x.role }}
House No = {{[0].no}}
Income = {{myData.income}}



JS File:- it contains the business logic, which uses the get method of the service ($http), to fetch data from JSON, on success it binds data to scope (myData).

JSON File:-It consists of our JSON data. Few points to know for beginners in JSON

HTML File:-Consists of ng-app (bootstrap angular), ng-controller(using this directive to link to controller – controllerRead.js), ng-repeat (to repeat it for all the values of json element) and lastly we use the scope to display the fetched data from JSON.

One Reply to “Reading JSON data in Angular JS (Part-1)”

Leave a Reply

Your email address will not be published. Required fields are marked *