Reading JSON data in Angular JS (Part-1) – User friendly Tech help
n
Scenario: – How to fetch JSON data from backend into User Interface (UI) of application using Angular JS?
n
Solution:-
n
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.
n
Flow:-
n
Code:-n
n
JS File
n
//Creat app module
var app = angular.module('myApp',[])
//Creating the controller constructor
app.controller('familyCtrl',function($scope,$http){
//Calling the get method of service
$http.get("data/family.json").then(function(response){ $scope.myData = response.data; });});
n
nhtml file
n
n
Reading JSON data using AngularJS Service component
n
- n
- {{ x.age + ‘, ‘ + x.role }}
- House No = {{myData.house[0].no}}
- Income = {{myData.income}}
n
n
n
n
n
n
n
nExplanation:-
n
n
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).
n
nJSON File:-It consists of our JSON data. Few points to know for beginners in JSON
n
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.
