Angular $http.get

Question

I'm trying to show all lists and the tasks associated with each list. In my controller I have:

$http.get('api/list/').success(function (data) {
            $scope.lists = data;
            $scope.tasks = data[0].Task;
        });

This works for the first item but of course data[0].Task needs to be dynamic. The problem I'm having is that this is being called once for each list. I tried using a variable but it gets reset to it's original value. I've also tried using a callback but no luck. I'm not sure what I'm overlooking or if I'm going about it all wrong.

Is Lists->Tasks a one to many relationship? This would mean that each task must have a list and can only have one list as its parent object. — Trevor Elliott
– Trevor Elliott, Commented Sep 24, 2013 at 19:57
Is $scope.tasks supposed to refer to all of the tasks, or only all of the tasks associated with the current (selected) list? Also, you most likely shouldn't be calling api/list/ multiple times. If it's a one-to-many relationship you should be able to return a JSON array with each list having a Tasks property being a nested JSON array of the child tasks. Then you can access those tasks with $scope.lists.tasks. — Trevor Elliott
– Trevor Elliott, Commented Sep 24, 2013 at 20:05
Still not having any luck with this. If I add console.log('whatever') inside the $http.get, it shows once for every list, if I remove $scope.lists = data and $scope.tasks = data[0].Task console.log only gets called once, why is $http.get getting called once for each list? I thought it was getting the data and filling my array. — tcrafton
– tcrafton, Commented Sep 25, 2013 at 13:50

Fourth · Accepted Answer · 2013-09-24 20:05:19Z

1

Your best bet is to wrap the http.get in a factory and let it return new representations of your Lists that have the tasks in them. This way you get new references and it won't overwrite your existing objects. Essentially, you want the http.get to return new List objects in its success resolution.

After that, the controller gets the promise resolution, takes the new list object, and binds it into something thats on the scope. This will filter through to the rest of the page and let you preserve existing lists/tasks for the life of the page.

answered Sep 24, 2013 at 20:05

Fourth

9,3811 gold badge25 silver badges30 bronze badges

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

Comments

Trevor Elliott · Accepted Answer · 2013-09-25 18:41:16Z

0

Your GET api/list/ request you probably return something like this:

[
    {
        "id": 1,
        "name": "List #1",
        "tasks": [
            {
                "id": 1,
                "name": "Task #1 on List #1"
            },
            {
                "id": 2,
                "name": "Task #2 on List #1"
            },
            {
                "id": 3,
                "name": "Task #3 on List #1"
            }
        ]
    },
    {
        "id": 2,
        "name": "List #2",
        "tasks": [
            {
                "id": 1,
                "name": "Task #1 on List #2"
            },
            {
                "id": 2,
                "name": "Task #2 on List #2"
            },
            {
                "id": 3,
                "name": "Task #3 on List #2"
            }
        ]
    }
]

This is assuming that you always want to return the associated tasks in an api/list/ command.

You then only need to call this once every time you want to refresh all lists and all tasks.

You should have a single controller which is bound to a view, in which your $http.get is called. It should set $scope.lists = data on success.

In your view you simply need two nested ng-repeat tags. For example, you could use unordered lists:

<div ng-controller="ListsController">
    <ul>
        <li ng-repeat="list in lists">
            <ul>
                <li ng-repeat="task in list.tasks">

                </li>
            </ul>
        </li>
    </ul>
</div>

I haven't used angular but I'm pretty sure this is all you need to do. A single AJAX call will populate a <li> element for each list, with nested <li> elements for each task belonging to that list.

edited Sep 25, 2013 at 18:41

answered Sep 25, 2013 at 14:07

Trevor Elliott

11.3k11 gold badges69 silver badges106 bronze badges

1 Comment

tcrafton Over a year ago

I think I was causing myself problems trying to use a view within a page. Finally got this to work: <div> <ul> <li ng-repeat="list in lists"> {{list.Name}} <ul> <li ng-repeat="task in list.Task"> {{task.Name}} </li> </ul> </li> </ul> </div> Thanks for your help!

Matt Zeunert · Accepted Answer · 2013-09-24 19:59:25Z

0

If each list has a task and you want a list of them you can do this:

$scope.tasks = data.map(function(obj){return obj.task;})

map creates an array based on what the function returns for each list.

answered Sep 24, 2013 at 19:59

Matt Zeunert

16.6k7 gold badges56 silver badges83 bronze badges

1 Comment

tcrafton Over a year ago

that's returning each list, but 10 (the total number of lists) blank rows for each list instead of it's tasks

Collectives™ on Stack Overflow

Angular $http.get

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related