0

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>

1

3 Answers 3

0

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.

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

2 Comments

how would this print an array though?
By this time you already had the scope variable set. You can print in the view or do a console.log.
0

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>

Comments

0

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.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.