Display an array in angularjs

Question

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"});

To verify your data is really an array add this to the page: <pre>{{ contributors | json }}</pre> — Heikki
– Heikki, Commented Nov 14, 2013 at 19:50
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
– Heikki, Commented Nov 14, 2013 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
– charlietfl, Commented Nov 14, 2013 at 19:55
@Heikki I have updated my question with how I'm calling this. — Ali
– Ali, Commented Nov 14, 2013 at 19:56

Michiel · Accepted Answer · 2018-07-20 12:40:14Z

9

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>

The element that 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>

You can only use $http if you inject it to the Controller declaration:

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

  // all your controller code

}

edited Jul 20, 2018 at 12:40

answered Nov 14, 2013 at 20:01

Michiel

4,2803 gold badges32 silver badges44 bronze badges

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

5 Comments

Ali Over a year ago

I think I was doing something the same on my question above?

Heikki Over a year ago

@Ali Trying the $http instead of $resource might narrow down the problem though.

Michiel Over a year ago

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.

Ali Over a year ago

How do I define the $http? I'm sorry, I'm very new to angular

Ali Over a year ago

Yes doing the way you suggest worked perfectly now :D

Collectives™ on Stack Overflow

Display an array in angularjs

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related