2016-03-27 3 views
0

У меня есть php-файл, который возвращает данные json. Я использую угловой http ajax. Но я не могу получить правильно отформатированный json, который я хочу использовать в своих угловых js. Пожалуйста, посмотрите на мой код:Как получить данные json из php-файла в угловом JS

Имя файла: 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); 
?> 

это мой app.js файл для угловых ЯШ:

Имя файла: 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; 
}); 

Это мой угловой контроллер:

имя файла: 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); 
     }); 
    } 
}); 

это мой 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> 

мой console.log ($ scope.customers) показывает, что это:

Хорошо, я увидел, что у меня есть данные в console.log но как мне получить те ценности, которые меня интересуют?

enter image description here

Я хочу, чтобы мой массив клиента, чтобы иметь только эти значения, так что я могу напечатать их в моем Lī элемент:

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

я создал другой же массив в файле, и я лесозаготовки оба массива. Оба из них, кажется, разные:

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); 
     }); 
    } 
}); 

вывод консоли выглядит следующим образом:

enter image description here

Топ один мой жёстко массив и нижний, что я получил от HTTP. Оба они кажутся разными.

Найдено решение. Проблема была в моем json.php файл

$data[] = [$data1, $data2, $data3, $data4] ; 

эта линия создает массив длина один, который содержал массив из четырех объектов. Вот почему customers = response.data; не возвращал мне эти 4 объекта.

Решение просто удалить квадратные скобки в этой строке

$data = [$data1, $data2, $data3, $data4]; 
+1

так что же здесь актуальная проблема? Кажется, у вас есть данные, это просто вопрос? – user2950720

+0

Да У меня есть данные, но я не знаю, как получить только те данные, которые меня интересуют. –

+0

У вас есть сообщение об ошибке? – sjokkogutten

ответ

0

Глядя на лог консоли. XHR возвращает массив длиной один, который содержит массив из четырех объектов.

Измените завод, чтобы его обработать.

calculator.factory('simpleFactory', function ($http) { 
    var customers = []; 

    var factory = {}; 

    factory.getCustomers = function() { 
     return $http({method: 'GET', url: 'data/json.php'}). 
       then(function successCallback(response) { 
        //Use This 
        customers = response.data[0]; 
        //Instead of this 
        //customers = response.data; 
        return customers; 
       }); 
    }; 
    return factory; 
}); 
Смежные вопросы