how to get json data from php file in angular JS
<p>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:</p>

<p>file name: json.php</p>

<pre><code>&lt;?php

$data = array();

$data1 = array('name' =&gt; 'dheerendra', 'city' =&gt; 'bangalore');
$data2 = array('name' =&gt; 'kk', 'city' =&gt; 'delhi');
$data3 = array('name' =&gt; 'aakash', 'city' =&gt; 'kanpur');
$data4 = array('name' =&gt; 'amit', 'city' =&gt; 'bangkok');

$data[] = [$data1, $data2, $data3, $data4];
print json_encode($data);
?&gt;
</code></pre>

<p>this is my app.js file for angular js:</p>

<p>filename: app.js</p>

<pre><code>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;
});
</code></pre>

<p>this is my angular controller:</p>

<p>filename: controller.js</p>

<pre><code>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 );
        });
    }
});
</code></pre>

<p>this is my index.html:</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html ng-app="calculator"&gt;
    &lt;head&gt;
        &lt;title&gt;Calculator&lt;/title&gt;
        &lt;meta charset="UTF-8"&gt;
        &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;div ng-controller="controller1"&gt;            
          &lt;ul&gt;
            &lt;li ng-repeat="customer in customers"&gt;
             {{customer.name}} - {{customer.city}}
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;

        &lt;script src="javascript/angular.min.js"&gt;&lt;/script&gt;
        &lt;script src="javascript/angular-route.min.js"&gt;&lt;/script&gt;
        &lt;script src="javascript/app.js"&gt;&lt;/script&gt;
        &lt;script src="javascript/controllers.js"&gt;&lt;/script&gt;
    &lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>my console.log($scope.customers ) shows this :</p>

<p>Ok I saw that I have the data in console.log but how do I get those values which I am interested in ?</p>

<p><a href="https://i.stack.imgur.com/nrsJP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nrsJP.png" alt="enter image description here"></a></p>

<p>I want my customer array to have only these values so that I can print them in my li element:</p>

<pre><code>var customer=[          
          {name: 'dheerendra', city: 'bangalore'},
          {name: 'kk', city: 'delhi'},
          {name: 'aakash', city: 'kanpur'},
          {name: 'amit', city: 'bangkok'},
        ];
</code></pre>

<p>I have created another same array in the file and I am logging both the arrays. Both of them seems to be different:</p>

<pre><code>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);
        });
    }
});
</code></pre>

<p>console output is as follows:</p>

<p><a href="https://i.stack.imgur.com/5mlLw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5mlLw.png" alt="enter image description here"></a></p>

<p>Top one is my hardcoded array and bottom one is what I got from http.
Both of them seem to be different.</p>

<p>Found the solution. The problem was in my json.php file</p>

<pre><code>$data[] = [$data1, $data2, $data3, $data4] ;
</code></pre>

<p>this line was creating an array of length one which contained array of four objects. Thats why <code>customers = response.data;</code> was not returning me those 4 objects.</p>

<p>The solution is to just remove square brackets  in this line </p>

<pre><code>$data = [$data1, $data2, $data3, $data4];
</code></pre>