I have a php file which returns a json data. I am using angular http ajax. But I am unable to get my properly formatted json which i want to use in my angular js. Please have a look at my code:
file name: json.php
<?php
$data = array();
$data1 = array('name' => 'dheerendra', 'city' => 'bangalore');
$data2 = array('name' => 'kk', 'city' => 'delhi');
$data3 = array('name' => 'aakash', 'city' => 'kanpur');
$data4 = array('name' => 'amit', 'city' => 'bangkok');
$data[] = [$data1, $data2, $data3, $data4];
print json_encode($data);
?>
this is my app.js file for angular js:
filename: app.js
var calculator = angular.module('calculator', ['ngRoute', 'myController']);
calculator.factory('simpleFactory', function ($http) {
var customers = [];
var factory = {};
factory.getCustomers = function () {
return $http({method: 'GET', url: 'data/json.php'}).
then(function successCallback(response) {
customers = response.data;
return customers;
});
};
return factory;
});
this is my angular controller:
filename: controller.js
var myController = angular.module('myController', []);
myController.controller('controller1', function ($scope, simpleFactory) {
$scope.customers = [];
init();
function init() {
var myDataPromise = simpleFactory.getCustomers();
myDataPromise.then(function (result) {
// this is only run after getData() resolves
$scope.customers = result;
console.log($scope.customers );
});
}
});
this is my index.html:
<!DOCTYPE html>
<html ng-app="calculator">
<head>
<title>Calculator</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div ng-controller="controller1">
<ul>
<li ng-repeat="customer in customers">
{{customer.name}} - {{customer.city}}
</li>
</ul>
</div>
<script src="javascript/angular.min.js"></script>
<script src="javascript/angular-route.min.js"></script>
<script src="javascript/app.js"></script>
<script src="javascript/controllers.js"></script>
</body>
</html>
my console.log($scope.customers ) shows this :
Ok I saw that I have the data in console.log but how do I get those values which I am interested in ?
I want my customer array to have only these values so that I can print them in my li element:
var customer=[
{name: 'dheerendra', city: 'bangalore'},
{name: 'kk', city: 'delhi'},
{name: 'aakash', city: 'kanpur'},
{name: 'amit', city: 'bangkok'},
];
I have created another same array in the file and I am logging both the arrays. Both of them seems to be different:
var myController = angular.module('myController', []);
myController.controller('controller1', function ($scope, simpleFactory) {
$scope.customers = [];
init();
function init() {
//$scope.customers = simpleFactory.getCustomers();
var myDataPromise = simpleFactory.getCustomers();
myDataPromise.then(function (result) {
// this is only run after getData() resolves
$scope.customers1 = [
{name: 'dheerendra', city: 'bangalore'},
{name: 'kk', city: 'delhi'},
{name: 'aakash', city: 'kanpur'},
{name: 'amit', city: 'bangkok'}
];
$scope.customers = result;
console.log($scope.customers1);
console.log($scope.customers);
});
}
});
console output is as follows:
Top one is my hardcoded array and bottom one is what I got from http. Both of them seem to be different.
Found the solution. The problem was in my json.php file
$data[] = [$data1, $data2, $data3, $data4] ;
this line was creating an array of length one which contained array of four objects. Thats why customers = response.data; was not returning me those 4 objects.
The solution is to just remove square brackets in this line
$data = [$data1, $data2, $data3, $data4];
