ng-repeat with getting array from php

Question

Ok, so this seems simple enough but evidently i'm missing something, and i've given up trying to understand what, my code goes something like this:

on my php side I read info from MySql database and it returns a json encoded object as such:

$rows = array();
        while($row = mysqli_fetch_assoc($result)) {
            $rows[]=$row;
        }    

        echo json_encode($rows);

on to my Angular javascript side, I attempt to load the contents of this array into an array i have created in the scope of one of my controllers (i have 2)

$scope.CurrentOIDs=[];
            $scope.populate = function () {
                $.ajax({
                    type: 'GET',
                    url: 'getOidJSON.php',
                    data: {criteria: '', archived: 'NO'},
                    success: function (phpmarkup) {
                        $scope.CurrentOIDs = JSON.parse(phpmarkup);   
                        console.log($scope.CurrentOIDs);
                    }
                });
            };

!when checking the console, the information shows up perfect, i get an array of 50 elements and all the info is there exactly how i need it as can be seen in the image here -> 1

i try to put all my data in a table using the following html,

 <div id="quicksearchresults" ng-controller="EditableRowCtrl" data-ng-init="populate()">
    <div id='searchResults'>
        <table id='resultstable'>
            <thead>
               <tr style='background-color:#333333; color:whitesmoke;' class='headers'>
                      <th style='white-space: nowrap;' class='sort' data-sort='OIDid'>OID#</th>
                      <th style='white-space: nowrap;' class='sort' data-sort='priority'>Priority</th>
                      <th style='white-space: nowrap;' class='sort' data-sort='topic'>Topic</th>
                      <th style='white-space: nowrap;' class='sort' data-sort='category'>Category</th>
                      <th style='white-space: nowrap;' class='sort' data-sort='task'>Task</th>
                      <th style='white-space: nowrap;' class='sort' data-sort='added'>Added</th>
                      <th style='white-space: nowrap;' class='sort' data-sort='target'>Target</th>
                      <th style='white-space: nowrap;' class='sort' data-sort='owner'>Owner</th>
                      <th style='white-space: nowrap;' class='sort' data-sort='remarks'>Remarks</th>
                      <th style='white-space: nowrap;' class='sort' data-sort='status'>Status</th>
               </tr> 
            </thead>
            <tbody class='list'>
                <tr ng-repeat='task in CurrentOIDs'>
                    <td class='OIDid'>{{ task.OIDid }}</td>
                    <td class='priority'>{{ task.Priority }}</td>
                    <td class='topic'>{{ task.Topic }}</td>
                    <td class='category'>{{ task.Category }}</td>
                    <td class='task'>{{ task.Task }}</td>      
                    <td class='added'>{{ task.Added }}</td>
                    <td class='target'>{{ task.Target }}</td>
                    <td class='owner'>{{ task.Owner }}</td>
                    <td class='remarks'>{{ task.Remarks }}</td>
                    <td class='status' style='font-size:150%; font-weight:bold;'>{{ task.Status }}%</td>
                </tr>
            </tbody>
        </table> 
    </div>
</div>

now i know this works when i manually give the same exact values to the array in my javascript instead of reading them from the database. the one difference i did note, is that each object has a field added to it $$hashkey, but as far as i can understand this is added because of the ng-repeat.

My knowledge of angular is still basic, and i have no idea why this is not working, and have run out of stuff to search on google for it. ANY and ALL help is greatly appreciated. thank you.

You're using jQuery to make the AJAX call, and its success callback happens outside of Angular's digest loop. Use `$scope.$apply()`, or (preferably) use `$http` to make the AJAX call. — Anthony Chu, Oct 02 '14 at 06:57
ok so ironically enough, seconds after posting this question I tried $scope.$apply() and it worked, i don't fully understand what is happening though, can you explain more why i needed this command here? thanks — Sean Bugeja, Oct 02 '14 at 07:02
$http is angular specific and returns a promise, AJAX-Call of jQuery isn't "builtin" in angularJS. If the AJAX-Call comes back, angularJS, doesn't realize that you changed data, if you use $http, angularJS knows theres something ongoing and makes a dirty check over your data and binds them. Further information: [link](http://stackoverflow.com/questions/18596744/why-use-http-in-angular-instead-of-jquerys-ajax) — graphefruit, Oct 02 '14 at 07:07
ok so i'm trying to implement this using $http and i got to this: $http.get('getOidJSON.php',{criteria: '', archived: 'NO'}) .success( function (phpmarkup) { $scope.CurrentOIDs = phpmarkup; console.log($scope.CurrentOIDs); }); no surprises here though, it's not working, the error this time on php side, the data doesn't seem to be getting there, any suggestions? — Sean Bugeja, Oct 02 '14 at 07:16
Try to use $http.post and grab data on php side like: `$postData = file_get_contents("php://input"); $request = json_decode($postData);` — graphefruit, Oct 02 '14 at 07:20

ng-repeat with getting array from php

0 Answers0