How to Fetch data from an External JSON in AngularJS

Technology, AngularJS Leave a comment

How to Fetch data from an External JSON in AngularJS

In this Post We Will Explain About is How to Fetch data from an External JSON in AngularJS With Example and Demo.Welcome on Pakainfo.com – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to How to Load and external json file in Angularjs Example

In this post we will show you Best way to implement javascript – Reading data from JSON file in Angularjs, hear for How to read JSON file data using AngularJS HTTP Get method with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.

How to Read Data from an External JSON file in AngularJS

Using simple data in simple JSON format is easy common in table web-applications and its simply and widely used in javascript frameworks AngularJS web-applications too.

Read Also:  Angular Call Component function into another component

JSON Data in a File

The simple file name is like as a live.json. We can make a simple JSON file using the here Notepad. Its simple or very best example.

[
{
   "ID": "001",
   "Name": "Karshan Pansuriya",
   "stype": "male"
},
{
    "ID": "002",
    "Name": "Mahesh Rathod",
    "stype": "male"
},
{
    "ID": "003",
    "Name": "Dipti Dhanani",
    "stype": "Female"
},
{
    "ID": "004",
    "Name": " bhalodiya Sanjay",
    "stype": "male"
},
{
    "ID": "005",
    "Name": "Manoj kothival",
    "stype": "male"
},
{
    "ID": "006",
    "Name": "Parth radadiya",
    "stype": "male"
},
{
    "ID": "007",
    "Name": "Ankit pipaliya",
    "stype": "male"
},
{
    "ID": "008",
    "Name": "Jalapa patadiya",
    "stype": "Female"
},
{
    "ID": "009",
    "Name": "Rupal Bapodariya",
    "stype": "Female"
},
{
    "ID": "010",
    "Name": "Megha Pithadiya",
    "stype": "Female"
}
]

Parse JSON file and Populate Data to a Table in AngularJS

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
    
    <style>
        table, th, td {
            border:solid 1px #3D3D3D;
            padding:3px;
            font:15px Verdana;
            text-align:center;
        }
        th {font-weight:bold;}
    </style>
</head>
<body>
    <div ng-app="liveApp" 
        ng-controller="liveCtrl">

        <table>
            <tr>
                <th>ID</th>
                    <th>Stud Name</th>
                        <th>stype of Stud</th>
            </tr>

            <tr ng-repeat="stud in studentList">
                <td>{{stud.ID}}</td>
                    <td>{{stud.Name}}</td>
                        <td>{{stud.stype}}</td>
            </tr>
        </table>
    </div>
</body>

The Controller (Script)

<script>
    var app = angular.module('liveApp', []);
    app.controller('liveCtrl',
        function ($scope, $http) {
			//get json data
            var request = {
                method: 'get',
                url: 'live.json',
                datastype: 'json',
                contentstype: "application/json"
            };

            $scope.datastud = new Array;

            $http(request)
                .success(function (jsonData) {
                    $scope.datastud = jsonData;
                    $scope.studentList = $scope.datastud;
                })
                .error(function () {

                });
        });
</script>
</html>

json Parse JSON file and Display Data with