Join the Stack Overflow Community
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up

So I am working on a web-application made for teams. I already have the log-in and sign-up page implemented and some of the members of my group are working on the server (node.js with express framework) and database side and I am working on the frond-end/client-side using angularjs framework. I need to make a "team list page" in angularjs that basically fetches an array of team names (a person who is logged in may have several different software dev groups he/she may be working with).

The server side of team_list.html has not been implemented yet but will be after I am done with the client-side.

My problem is: I am not sure how to fetch an array from the server/database side in angularjs. I know that I should be using the ng-repeat directive somehow and also the GET method but I am not exactly sure how to do that. Especially how to do that with arrays.

Here is my code for team_list.html so far:

        var page = angular.module('teamListPage', []);
        page.controller('listController', function($scope, $http) {
            console.log("inside the controller");
            //need to figure out how to pass info to server to retrieve the correct page
            $scope.submit = function() {
                console.log("inside the login function");
                console.log()
            }
            $scope.enterTeamPage = function() {};
    
        }
<!DOCTYPE html>
<html>
    
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
  title>Team List</title>
</head>
    
<body>
    
    <h1>
        Welcome to Your Team Pages!
    </h1>
    
    <div  ng-controller="listController">
        <form id="Teams" ng-app="teamListPage">
            <fieldset>
                <legend>Your Teams</legend>
                <ul>
                    <div ng-repeat"x in teamList">
                        <td>{{x.Name}}</td>
                        <p>
                            <input type="button" id="enter" name="enter" value="Enter Home Page" />
                        </p>
                    </div>
                </ul>
            </fieldset>
        </form>
    </div>
    
    <p>
        <input type="button" id="Create" name="Create" value="Create New Team" />
    </p>
   
</body>
</html>

share|improve this question
2  
what about $http.get? see: stackoverflow.com/questions/18477711/… – jmunsch 22 hours ago

You can use the $http service:

$http.get('url').then(function (response) {
    // Success case
    $scope.teamList = response.data;
}, function (error) {
    // Error case
});

Take a look on the $http docs to know more about the service.

share|improve this answer
    
how would this print an array though? – asddddddaaaad2 22 hours ago
    
By this time you already had the scope variable set. You can print in the view or do a console.log. – César Costa 22 hours ago

Inside your controller request data using GET method and $HTTP request you can do this in simple way like this

$scope.teamList = []; 

$http.get("url_to_fetch_data.js")
.then(function(response) {
    $scope.teamList = response.data;//This Data should be Array of Objects with properties 
});

//and then you can repeat in your view

<div ng-repeat"x in teamList">
    <td>{{x.Name}}</td>
</div>
share|improve this answer

We use $resource almost exclusively to handle requests in Angular. You'll need to include it in your HTML, as its an external module, as well as add it to the array of dependencies for the angular module you created, but it drastically simplifies working with external resources and supports CRUD operations out of the box.

So, in your html add:

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-resource.min.js"></script>

This can be from whatever CDN you prefer, of course.

Then in your javascript, change this line to be:

var page = angular.module('teamListPage', ['ngResource']);

When you create your controller, be sure to inject $resource:

page.controller('listController', function($scope, $resource) {} // You don't need $http if you use $resource.

Now in your controller you can do the following:

$scope.teamList = $resource('teams_url').query();

Of course, the url you pass to the $resource function will be whatever your nodejs developers decide, but that is enough to get the data in your controller and prepared to display. To get it on the view, just add ng-repeat, like you suggested, similar to:

<div ng-repeat="member in teamList">{{member.name}}</div>

Some caveats here:

  1. the .query() method on $resource is expecting an array to be returned. Which is what you're wanting, but if you call a route that returns a JSON object, you'll get an error.
  2. $resource actually returns an object or array (in this case array), with a promise attached. The promise lives on the .$promise property. So if you need to do something, like sort the array or perform some other type of transformation, you can always use the supplied .then function attached to the promise. e.g. $scope.teamList.$promise.then(function() { // do something here });. But you don't need that just to get things on to the view, as $resource will automatically put all that data in the array or object when it finally comes back from the server. Which means ng-repeat will just pick it up as soon as its available and display it for you.

$resource also provides a .get() method, which gets a single record, and a .save() method which creates a post request with an object you pass (e.g. $resource('some_api_url').save({name: 'John'});.

I like and use it because it's a really clean interface and makes working with ajax requests really simple and intuitive. There are many other ways to do this though, but this is what we do at work and it seems to make things very clear and easy to understand.

See the $resource documentation for more on how it works and how to use it in your project.

share|improve this answer
    
Thanks so much! – asddddddaaaad2 5 hours ago

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.