Explore our sites

Stack Exchange
tour help careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 1 down vote favorite

I have an API on my nodejs server which will return an array.

[
  "123_ayesha098",
  "3ar7hkung",
  "aali",
  "Abdelhak",
  "adityaputra",
  "adraga",
  "agnusdark",
  "ahkeno",
  "ahmedjubayer",
  "ahsan_hq",
  "akenygren",
  "alexfuser",
  "alexlakatos",
  "alexxed",
  "alfasst",
  "amaciel"
  ...
  ...
]

I'm trying to display this list 

  <div class="list-group" ng-repeat="name in contributors">
    <!-- Links to detail level -->
    <a href="#/contributors/{{ name }}" class="list-group-item">
      <strong>Contributor: </strong> {{ name }} <br>
    </a>
  </div>

It is being display like this

Contributor: {"0":"1","1":"2","2":"3","3":"_","4":"a","5":"y","6":"e","7":"s","8":"h","9":"a","10":"0","11":"9","12":"8"} 
Contributor: {"0":"3","1":"a","2":"r","3":"7","4":"h","5":"k","6":"u","7":"n","8":"g"} 
Contributor: {"0":"a","1":"a","2":"l","3":"i"} 
Contributor: {"0":"A","1":"b","2":"d","3":"e","4":"l","5":"h","6":"a","7":"k"} 
Contributor: {"0":"a","1":"d","2":"i","3":"t","4":"y","5":"a","6":"p","7":"u","8":"t","9":"r","10":"a"} 
Contributor: {"0":"a","1":"d","2":"r","3":"a","4":"g","5":"a"}

How do I display them correctly here?

After doing this 

  <pre>{{ contributors | json }}</pre>

I'm getting this in the page

[
  {
    "0": "1",
    "1": "2",
    "2": "3",
    "3": "_",
    "4": "a",
    "5": "y",
    "6": "e",
    "7": "s",
    "8": "h",
    "9": "a",
    "10": "0",
    "11": "9",
    "12": "8"
  },
  {
    "0": "3",
    "1": "a",
    "2": "r",
    "3": "7",
    "4": "h",
    "5": "k",
    "6": "u",
    "7": "n",
    "8": "g"
  },
  {
    "0": "a",
    "1": "a",
    "2": "l",
    "3": "i"
  },

This is in service.js

listOfContributors: $resource('/transifex/listOfContributors', {}, {
  query: {
    method: 'GET',
    params: {},
    isArray: true
  }
}),

in controller.js

$scope.contributors = Transifex.listOfContributors.query();

and in `app.js

$routeProvider.when( "/trans/contributors", { templateUrl: "partials/transifex/userlist.html", controller: "TransifexSplattrController"});
share|improve this question
 
To verify your data is really an array add this to the page: <pre>{{ contributors | json }}</pre> –  Heikki Nov 14 '13 at 19:50
 
Updated the question with the result @Heikki –  Ali Nov 14 '13 at 19:51
 
There's nothing wrong in the template. Either you're getting wrong format from the server or something is modifying the result on the client. How do you load your data? –  Heikki Nov 14 '13 at 19:54
 
copy data from response found in netwrk tab of console/developer tools to show us. What your outputting makes me believe you have more than simple array returned –  charlietfl Nov 14 '13 at 19:55
 
@Heikki I have updated my question with how I'm calling this. –  Ali Nov 14 '13 at 19:56
show 3 more comments

1 Answer

up vote 1 down vote accepted

first when you recieve the answer from the api you set your 'contributors' variable: something like this:

$http({method: 'GET', url: apiservice})
    .success(function(data, status, headers, config) {
        $scope.contributors= data;
    });

in your html you do:

 <div class="list-group">
        <!-- Links to detail level -->
        <a ng-repeat="name in contributors" 
            href="#/contributors/{{ name }}" 
            class="list-group-item">
          <strong>Contributor:</strong> {{ name }}</a><br>
     </div>

it is the element wher you put the ng-repeat on that will be repeated, i presume you want:

<div>
<a ..../a>
<a ..../a>
<a ..../a>
</div>

and not

<div>
<a ..../a>
</div>
<div>
<a ..../a>
</div>
<div>
<a ..../a>
</div>

to use $http add it to the Controller declaration:

myModule.controller('MyController',function($scope, $http) {

  // all your controller code

}
share|improve this answer
 
I think I was doing something the same on my question above? –  Ali Nov 14 '13 at 20:03
 
@Ali Trying the $http instead of $resource might narrow down the problem though. –  Heikki Nov 14 '13 at 20:05
 
Ali, yes after your edit I think the api response itself is the problem, not your code. Altough you might still want to consider in which element to put your ng-repeat. –  Michiel Reyers Nov 14 '13 at 20:06
 
How do I define the $http? I'm sorry, I'm very new to angular –  Ali Nov 14 '13 at 20:08
 
Yes doing the way you suggest worked perfectly now :D –  Ali Nov 14 '13 at 20:12
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.