AngularJS JSON Get Data



  • The AngularJS provides many advanced features to JSON.
  • JSON is a text format that is completely language independent.
  • JSON uses conventions that are familiar to programmers.
  • JSON is built on two structure
    1. A collection of names/ values pairs, such as an object, record, struct, dictionary, hash table, keyed list, or associative array.
    2. An order list of values such as an array, vector, list, or sequence.
  • We can fetch the data from the json file as well as we can design the table.

Sample code for get data from JSON file in AngularJS:

 Tryit<!DOCTYPE html>
<html>
    <head>
        <title>Wikitechy AngularJS Tutorials</title>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/
                    angular.min.js"></script>
    </head>
    <body>
        <div ng-app="myApp" ng-controller="jsonCtrl" >
            <h3>JSON Fetching example in AngularJS </h3>
            <table border="1">
                <tr>
                    <th>ID</th>
                    <th>Car</th>
                    <th>Model</th>
                </tr>
                <tr ng-repeat="x in myObject " >
                    <th>{{x.id}}</th>
                    <th>{{x.Car}}</th>
                    <th>{{x.Model}}</th>
                </tr>
            </table>
            <h3>Original JSON file: {{myObject}}</h3>    
        </div>   
        <script>
            var app = angular.module("myApp", []);
            app.controller("jsonCtrl", function($scope, $http) {
                $http.get("myjson.json")
                .then(function (res) {
                    $scope.myObject=res.data.records;
                });                  
            });
        </body>
    </script>
</html>

Fetching the JSON file by using $http.get() method:

  • Controller logic for fetching the JSON data in AngularJS application.
app.controller("jsonCtrl", function($scope, $http) {
    $http.get("myjson.json")
    .then(function (res) {
        $scope.myObject=res.data.records;
    });                  
});

myjson.json:

  • JSON file for the AngularJS application.
{ "records":[{"id":"1","Car":"Lamborghini","Model":"Veneno"},
{"id":"2","Car":"Porsche","Model":"Panamera"}, 
{"id":"3","Car":"Jaguar","Model":"XJ"}, 
{"id":"4","Car":"Mercedes","Model":"Benz"}, 
{"id":"5","Car":"Aston Martin","Model":"V8 Vantage"}, 
{"id":"6","Car":"Rolls Royce","Model":"Miley"}, 
{"id":"7","Car":"Bugatti","Model":"Veyron GT"} ] }

Code Explanation for get data from JSON file in AngularJS:

Code Explanation for AngularJS JSON Get Data

  1. The <table> is used to display the table in our application with border 1 and the table head as ID, Car and Model.
  2. The ng-repeat is used to repeat the row like a loop for each data in the myObject.
  3. The id, Car and Model data are displayed for each row in the table from the JSON data.
  4. The {{myObject}} is used to display the original JSON data file.
  5. The angular.module() is used to create a module for “myApp” application.
  6. The “jsonCtrl” used to create the controller for the Application with arguments $scope object and $http service.
  7. The $http.get is used to get the contents from the “myjson.json” JSON file.
  8. The .then() function is used to return the promises and it has an argument res (response).
  9. The $scope.myObject has the data from the JSON file.

Sample Output for get data from JSON file in AngularJS:

Sample Output for AngularJS JSON Get Data

  1. The JSON data are displayed in a table by using the $http.get() method.
  2. The content of the original JSON File has been displayed.



Related Searches to angularjs JSON get data