unable to return array list from the javascript function in angularjs app

Question

This is my link in mvc view and it is redirecting to details view by invoking function call. pls see below.

<a href="/Home/Details" class="label label-primary"  ng-click="addTask(c)">View Details</a>

TasksController.js

var lines =[]
$scope.addTask= function(c)
{
    lines.push(c);
    return lines;
}

alert(lines);

the return value (lines) is becoming null always for some reason. I am unable to figure it out. What I am trying to achieve is ,

I am passing the details from one view to another view in angularjs app.

EDITED BELOW (latest)

I am getting totally crazy and unable to acccomplish this.

Index.cshtml

    <a href="/Home/Details" class="label label-primary" ng-controller="TasksController" ng-model="c" ng-click="addTask(c)">View Details</a>

(c is my object which I am trying to pass it to the next page)

TaskController.js

app.controller("TasksController", ['$scope' ,'TasksService', function ($scope, TasksService) {
$scope.addTask = function (currObj) {
    var promiseAddTsk = TasksService.addProduct(currObj);
    $scope.products = promiseAddTsk[0].Name;
    console.log($scope.products);
};

}]);

TasksService.js

 var productList = [];

this.addProduct = function (newObj) {
    productList.push(newObj);
    return productList;
};

Details.cshtml

<div ng-app="TasksModule" ng-controller="TasksController">
<div>
    {{products}}
    <span ng-model="products">{{products}}</span>
</div>

I can see the "Name" in scope.Products but it doesn't get bind in details.cshtml.

service / factory are meant for this , where data can be share between the views / controllers — Shushanth Pallegar
– Shushanth Pallegar, Commented Jun 22, 2015 at 19:55
Alerting it outside the addTask function you will always get [] as suggested look at services — michelem
– michelem, Commented Jun 22, 2015 at 19:56
why do i need the services. I am just adding an item to the list and returning it as simple as it. Please clarify this. or any example that you can show might be helpful — user3501278
– user3501278, Commented Jun 22, 2015 at 20:01
C is coming from here. I can't paste the entire code as it is too long. <div class="col-md-3" ng-repeat="c in TasksList | filter: searchtask"> — user3501278
– user3501278, Commented Jun 22, 2015 at 20:18

Darryn Smith · Accepted Answer · 2015-06-22 20:10:02Z

1

I'd suggest you create a service. You'd then need to inject the service into each controller and use the build in $q service to return the promise. The service would look something like this

.factory('Task', function($q) {
var lines = [];

 return {
addTask: function(c) {
    var deferred = $q.defer();
    lines.push(c);
    deferred.resolve(lines);
    return deferred.promise;
}
  };

});

and then you'd inject and use the service inside your controller like this ..

.controller('TasksController', function($scope, Task) {
$scope.addTask = function(c){
    var lines = Task.addTask(c);
    alert(lines);
}
});

answered Jun 22, 2015 at 20:10

Darryn Smith

478 bronze badges

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

2 Comments

user3501278 Over a year ago

I followed your instructions it worked partially but i am still unable to bind the data to the frontend/

user3501278 Over a year ago

Sorry, I am unable to create a plunker for this. I edited the code again.

4 revs · Accepted Answer · 2015-06-24 04:13:47Z

0

I believe your are missing ng-model in your HTML.

It should be:

<a href="/Home/Details" class="label label-primary"  ng-click="addTask(c)" ng-model="c">View Details</a>

If that is where the task is being set. If it is set in a form, then the ng-model needs to be set on the elements that sets the task, such as an input field.

The ng-model="c" should go wherever the task is being set on the UI. Also for the time begin, try placing logic in one controller and separate out afterwords after proof of concept.

<div ng-app="TasksModule" ng-controller="TasksController">

     <a href="/Home/Details" class="label label-primary"  ng-click="addTask(c)" ng-model="c">View Details</a>

     <div>
        {{products}}
        <span ng-model="products">{{products}}</span>
     </div>
</div>

Then "c" or whatever you decide to call it would be passed from that element to the function addRask(c) as a parameter.

You could also inject $log into your factory and $log.debug the variable to see to what it is being set via the console.

http://www.w3schools.com/angular/angular_directives.asp https://docs.angularjs.org/api/ng/directive/ngModel

Edit: make sure ng-click="addTask(product)" is set correctly, the name of the variable you are passing from the UI to the angular controller must be the same as the name of the model. You might have to move ng-click="addTask(product)" from the tag to a separate button and keep the tag dedicated to one task only.

One thing of note is that you are using two different controllers - Task and Details. A service for sharing data between controllers will work but for testing purposes, use the same controller in Index.cshtml as you do in Details.cshtml.

edited Jun 24, 2015 at 4:13

community wiki

4 revs
62696e617279

4 Comments

user3501278 Over a year ago

This doesn't work. I edited the code again can you please help me why it is not working

Boris Over a year ago

@user3501278 check my edit; I would move the ng-click from the <a> tag to a button and leave the a-tag for calling the /Home/Details. One thing I noticed that is very important - make sure you either use one controller only or create a service for sharing data between controllers. Keep things simple to get it working - put your logic in one controller. If your <a> tag is in DetailsController and your product div is in TaskController, the value you are passing from TaskController to Details will not be bound as you are observing.

user3501278 Over a year ago

I edited my post again as per your suggestion. No Luck :( I can still see the value in the console log but not on the details page :(

Boris Over a year ago

Without the full source and stack trace I am not sure; are you using Visual Studio? I recommend setting up break points in the JS code and stepping through the code in IE to see what's happening. If you make code changes, press "Ctrl + F5" rather than just F5, as IIS server and IE both tend to cache resources to improve load times.

Collectives™ on Stack Overflow

unable to return array list from the javascript function in angularjs app

EDITED BELOW (latest)

2 Answers 2

2 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

EDITED BELOW (latest)

2 Answers 2

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related