Display Json Data in View using AngularJS and PHP

1. For this example I am using php server side code to gather the data from the data base and return it as a Json format. For this we can use the buid in code for php i.e.
json_encode($data);

for eg: (using Codeigniter model)

                $check_sql = "Select * from user where about_status = 1"; //status is flag for the active user
$check = $ci->db->query($check_sql);
$row = $check->result();

echo json_encode($row);

which gives output as:

{
"records": [
  {
    "Name" : "Yubraj Pokharel",
    "City" : "Kathmandu",
    "Country" : "NP"
  },
  {
    "Name" : "Chitra Shrestha",
    "City" : "Pokhara",
    "Country" : "NP"
  },
  {
    "Name" : "Prayag Upd",
    "City" : "California",
    "Country" : "US"
  },
  {
    "Name" : "Sudhan Pokharel",
    "City" : "Nepalgunj",
    "Country" : "NP"
  },
  {
    "Name" : "Mr Tom Cruise",
    "City" : "California",
    "Country" : "US"
  }
]
}

2. calling it from the angular page:

<html>
<head>
<title>Json Data</title>
        call angular js here
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-12" ng-app="myApp" ng-controller="customersCtrl"> 
<table class="table">
<tr>
<th>Name</th>
<th>country</th>
</tr>
<tr  ng-repeat="x in names">
     <td>{{ x.Name }} </td>
     <td>{{ x.Country }}</td>
   </tr>
</table>
</div>
</div>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
    $http.get("http://localhost/angular/news.php")
    .success(function(response) {$scope.names = response.records;});
});
</script>
</body>
</html>

3. Here it is done enjoy happy coding :)

6 comments:

  1. Pleasant Post. It is truly intriguing to peruse from the earliest starting point and I might want to share your site to my circles, continue sharing more like this.
    Angularjs courses in Chennai | Angularjs Training in Chennai

    ReplyDelete
  2. This technical post helps me to improve my skills set, thanks for this wonder article I expect your upcoming blog, so keep sharing...
    PHP Training Institute in Chennai|Best PHP training in chennai

    ReplyDelete
  3. Hi admin, i went through article. As we all know, .net is most popular programming language and it offer huge career prospects for talented professionals. It’s totally awesome, keep on updating your blog with such awesome information. .Net Training in Chennai

    ReplyDelete
  4. Excellent post! Thank you for Sharing. We are the best erp software providers in chennai. For more details call +91 9677025199 or email us on info@bravetechnologies.in
    erp in chennai

    ReplyDelete
  5. Excellent post! I heve read your blog it's very interesting and informative. Keep sharing.
    erp providers in chennai | erp software chennai

    ReplyDelete
  6. Your post is useful for me. Thanks for sharing this technical information with us. Great effort.
    PHP training classes | PHP training institute in chennai

    ReplyDelete