Невозможно использовать объекты JavaScript, обработанные JSON

Question

Я использую AngularJS для создания веб-приложения. У меня есть сервер с PHP, который извлекает некоторые данные из базы данных SQL и кодирует его в JSON. На стороне клиента я использую услугу Angular $ http для ее получения, анализирую ее, и она преуспевает, однако я не могу использовать переменную, назначенную с извлеченными данными. Это код для выполнения запроса HTTP:

factory.employees = factory.getEmployeesFromServer(); 

factory.getEmployeesFromServer = function() { 
     return $http.get("http://localhost/scrumboard/get_user.php") 
      .success(function(response) { 
       for(var property in response) { 
        console.log("PROP: "+property); 
        if (response.hasOwnProperty(property)) { 
         console.log("Has ownProperty: " + property) 
        } 
       } 
       console.log(JSON.stringify(response)); 
       return response.data; 
      }) 
      .error(function(response, status, headers, config) { 

      }) 
    } 

Печать свойств содержит только нули и единицы. Однако когда Stringify-печать достигает консоль выглядит следующим образом:

[{"email_id":"rob_en@gmail.com","user_name":"rob","first_name":"Robert","last_name":"Allen","password":"roballen","admin_right_id":"2"},{"email_id":"rob_ena@gmail.com","user_name":"robad","first_name":"Roben","last_name":"Lena","password":"aleno","admin_right_id":"1"}] 

Вы можете видеть, что это массив из двух объектов, но я не могу получить доступ к этим свойству объектов, несмотря на то, что я могу использовать это с ng-repeat. См. Следующий фрагмент:

<li ng-repeat="emp in availableEmployees"> 
    <label class="btn btn-primary" ng-model="checkModel" btn-checkbox> 
     HELLO {{emp.user_name}} 
    </label> 
</li> 

Этот код создает два элемента списка, но без текста.

Следующая изображение с консоли отладки, проверки employees объекта:

Я совершенно новым для веб-разработки и надеюсь, что кто-то может помочь мне! Я сделал намного больше отладки, но не хочу раздувать этот пост больше, поэтому просто спросите, нужна ли вам какая-либо конкретная информация.

Answer 1

Звонок на ваш сервер является асинхронным. В вашем заводском коде вы присваиваете employees возвращаемому значению $http.get, которое возвращает a promise.

Итак, в вашем HTML вы повторяете свойства объекта обещания. Вот почему вы получаете этот странный результат. Однако журнал консоли регистрирует правильные данные, но эти данные (как я уже сказал) не настроены на свойство, которое вы повторяете.

Вы должны обновить свой заводской код, чтобы установить результат обетования к employees переменным вместо самого обещания:

factory.getEmployeesFromServer().then(function(data){ 
    factory.employees = data; 
}); 

factory.getEmployeesFromServer = function() { 
     return $http.get("http://localhost/scrumboard/get_user.php") 
      .success(function(response) { 
       for(var property in response) { 
        console.log("PROP: "+property); 
        if (response.hasOwnProperty(property)) { 
         console.log("Has ownProperty: " + property) 
        } 
       } 
        console.log(JSON.stringify(response)); 
        return response.data; 

      }) 
     .error(function(response, status, headers, config) { 

     }) 
} 

Answer 2

Я думаю, что вы можете ссылаться на неверную переменную в своей строке ng-repeat в своем представлении.
Я бы заменил availableEmployees на сотрудников и посмотрел, исправляет ли он это, как это то, что вы, кажется, назначаете своей области.

<li ng-repeat="emp in employees"> 
<label class="btn btn-primary" ng-model="checkModel" btn-checkbox> 
    HELLO {{emp.user_name}} 
</label> 
</li> 

Answer 3

Проблема в коде, что factory.getEmployeesFromServer не будет возвращать список сотрудников, он асинхронный. что вы можете сделать, это вернуть только обещание с завода, как это:

factory.getEmployeesFromServer = function() { 
     return $http.get("http://localhost/scrumboard/get_user.php"); 
}; 

затем, чтобы получить список ваших работодателей, вам нужно передать вызов обратно к методу success, этот обратный вызов должен назначать необходимые значения на модели (скажем emp), который должен быть на контроллере $scope ($scope.emp), как это:

promise = factory.getEmployeesFromServer(); 
promise.success(function(response) { 
    $scope.emp = response.data; 
});