AngularJS $http.get retrieves an array in unusable format for the ng-data-repeat directive

Question

I cant to find a way to bind the elements of the array using the data-ng-repeat directive to the html page that contains the script below. The problem is that the Quizes looks like this:

[{"quizname":"Quiz 1", "username":"musa"...}]



<script> 
   var app = angular.module("QuizApp");
   app.controller("QuizCntrl",function($scope,$http){
   var onSuccess = function(data, status, headers, config){
   $scope.Quizes = data.getQuizesResult; //Returns an size5, checked it using console.log
  };
 var promise = $http.get("http://localhost:59503/Service1.svc/GetQuizes");
 promise.success(onSuccess);
 });
</script>

So when i try doing this:

 <div data-ng-controller="QuizCntrl">
     <table>
      ...
       <tr data-ng-repeat = "quiz in Quizes">
          <td>{{quiz.username}}</td>
          <td>{{quiz.quizname}}</td>
        <tr>
       ...
      </table>

Nothing gets displayed. In the tutorials and online examples that I've done all arrays look something like this:

 $scope.array = [{username: "value".....}]

How can i work around those quotations on my field names to use the data-ng-repeat directive? Any small help will be appreciated. Thank You.

What does it output only with "quiz" in angular? The quotes doesn't matter. In both ways they are interpreted as strings, so The Problem must lie elsewhere — Stefan Rein
– Stefan Rein, Commented Oct 30, 2016 at 3:30
it displayed nothing. Anyway it now works..I'm silly I had misspelled the word repeat with reapeat. — user4715644
– user4715644, Commented Oct 30, 2016 at 3:45

Stefan Rein · Accepted Answer · 2016-10-30 03:44:33Z

1

As you see in the example, the quotes doesn't matter. Maybe you will find your mistake with the example.

And you should be doing this one:

$http.get("http://localhost:59503/Service1.svc/GetQuizes").then(onSuccess);

var app = angular.module("QuizApp", []);

app.controller("QuizCntrl", function ($scope, $http) {
  $scope.Quizes = [{"quizname":"Quiz 1", "username":"musa"}, {quizname:"Quiz 2", username:"musa 2"}];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="QuizApp">
  <div data-ng-controller="QuizCntrl">
     <table>
       <tr data-ng-repeat = "quiz in Quizes">
          <td>{{quiz.username}}</td>
          <td>{{quiz.quizname}}</td>
        <tr>
      </table>
  </div>
</div>

answered Oct 30, 2016 at 3:44

Stefan Rein

9,2324 gold badges44 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS $http.get retrieves an array in unusable format for the ng-data-repeat directive

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related