How to read json and fetch data to html page using angularjs

My Scenario:

my.json file to be read using displayController from app.js and display in display.html page.

my.json:

{
“form”: {
“fn”: “FirstName”,
“ln”: “LastName”,
“un”: “Username”,
“em”: “Email”,
“pwd”: “Password”,
“dob”: “D.O.B”,
“mob”: “MobileNumber”
}
}

you can validate json here

app.js

app.controller(‘displayController’, function ($scope,$rootScope,$http) {

$http.get(‘json/my.json’).success(function(data,status){  // get data and status of it
console.log(data);
$scope.formdata = data;
});
});

display.html

<div class=”div-table-row” ng-repeat=”vari in formdata”>

{{vari.fn}} : {{ details.firstName }} <br/>
{{vari.ln}} : {{ details.lastName }} <br/>
{{vari.un}} : {{ details.username }} <br/>
{{vari.em}} : {{ details.email }} <br/>
{{vari.pwd}}: {{ details.password }} <br/>
{{vari.dob}}: {{ details.dob }} <br/>
{{vari.mob}}: {{ details.mobile }} <br/>
</div>

 

What for you waiting dude?? go and run it :D. It will work for 100% sure.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s