Reading JSON data in Angular JS (Part-1)

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.