Load JSON data in angularjs

by bryiantan

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div ng-app='myApp'>
    <div ng-controller='DataCtrl'>
        <button ng-click="loadData()">load data</button>
<p ng-repeat="obj in items">
	{{ obj.Firstname }}
	</p>        
<h1>Data</h1> 
        <div ng-repeat="item in items">
             <h2>{{item.Name}}</h2>

            <table class="table">
                <tr ng-repeat="(key,value) in item">
                    <td>{{key}}</td>
                    <td>{{value}}</td>
                </tr>
            </table>
        </div>
    </div>
</div>

JavaScript

var mockData = "json=" + encodeURI(JSON.stringify([{
  "Firstname": "Me",
  "Lastname": "Windy",
  "EMail": "[email protected]",
  "Phone": "0110110111"
},
{
  "Firstname": "Me 2",
  "Lastname": "Windy 2",
  "EMail": "[email protected]" ,
  "Phone": "0110110111 2"
}]));



var App = angular.module('myApp', []);

function DataCtrl($scope, $http) {

    $scope.phones = [];

    $scope.loadData = function () {
        var httpRequest = $http({
            method: 'POST',
            url: '/echo/json/',
            data: mockData

        }).success(function (data, status) {
            $scope.items = data;
        });

    };

}