Angular displaying php MySQL results

Question

I am trying to display each row in my SQL database as an angular card. Instead, my code is displaying each character as a card :( I am new to PHP, any recommendations? Here is a snippet from my index file

<md-card style="width: 32%;" ng-repeat="item in frats track by $index">
  <md-card-content>
    {{item}}

Here is a snippet from my php file

$query = "SELECT * FROM house_info";
mysqli_query($db, $query) or die('Error querying database.');
$result = mysqli_query($db, $query);
$row = mysqli_fetch_array($result);
while ($row = mysqli_fetch_array($result)) {
  echo $row['name'];
}

And here is a snippet from my js file

 $http.get('../phptestworkhere.php').success(function(data) {
   $scope.frats = data;
 });

Here is an example of what it looks like now. You can see that the first 5 cards spell out 'Alpha'. This should be on one card. example

Answer 1

I don't use Angular often, but based on what you're describing I think your problem is that your response is just one long string that is being iterated over, basically making each character an array element.

To fix that, replace your current while loop with this:

$frats = array();
while ($row = mysqli_fetch_array($result)) {
  $frats[] = $row['name'];
}

echo json_encode($frats);

This will make the response a Javascript array of strings instead of just one string, which should then allow you to iterate as expected.