Trying to create angular foreach with dynamic variable

Question

I am trying to create a list of variable with id attached. I am using following code with foreach loop.

    angular.forEach(str, function(value, key) {
      console.log(key + ': ' + value.id);
      //we found project id
      //now attach it to dynamic variable 
        $http.get("http://abounde.com/portal/api/tasks/"+value.id).then(function(response) {
          //create dynamic variable
           if (key != null) {                       
            $parse("project_"+value.id).assign($scope, value);                                
          }                 
          $scope.value = response.data.taskLists;
        });         

    });

I want to have project_1, project_2, project_3 .... passed to scope.

What I am doing wrong?

Edit:

After looking at some suggestions tried something..

app.controller('portalController',function($scope, $http, $rootScope){
    $scope.$on('$viewContentLoaded', function() {
        $rootScope.backgroundImg="url(" + images[2].imgObj.src + ")";   //abt bg     
        $http.get("http://abounde.com/portal/api/projects").then(function(response) {
           $scope.myData = response.data.projects;
           var x=0;
           var str = response.data.projects;
            angular.forEach(str, function(value, key) {
              console.log(key + ': ' + value.id);
              //we found project id
              //now attach it to dynamic variable 
                $scope.projects = [];
                $http.get("http://abounde.com/portal/api/tasks/"+value.id).then(function(response) {
                  //create dynamic variable
                  $scope.projects.push(value.id) = response.data.tasklists;            

                });         
                //console.log($scope.projects);
            });
        }); 


    });

    //make a function which takes project id as parameter and returns tasks list
        $scope.getTasksList = function(projectId)
        {
            $http.get("http://abounde.com/portal/api/tasks/"+projectId).then(function(response) {
               $scope.myTasks = response.data.tasklists;
            });
        } 

});

Following error

How do i access the dynamic variable on view? I am assuming I will need to use something like..

What is the actual way of accessing dynamic variable in angular?

I'd suggest simply using an array ($scope.projects = [] and $scope.projects.push(value)) or an object ($scope.projects = {} and $scope.projects[value.id] = value) — Phil
– Phil, Commented Aug 17, 2016 at 0:12
@Phil can you kindly look at my edit please. i tried to follow your suggestion, and i may have not understood you properly. and failed. — Nurul Alam
– Nurul Alam, Commented Aug 17, 2016 at 0:23
@NurulAlamAnik just read my comment again and compare it to your code — Phil
– Phil, Commented Aug 17, 2016 at 0:31

Shannon Hochkins · Accepted Answer · 2016-08-17 00:35:32Z

2

No need to use $parse

Change it to $scope, and use proper object maniuplation.

$scope['project_'+v‌alue.id] = value;

Or, so you can use the data in an array of dynamic values;

$scope.projects = [];
// inside your response
$scope.projects.push({
    _id : 'project_'+v‌alue.id,
    value : value
});

HTML:

<div ng-repeat="project in projects">
    id: {{ project._id}}
    value: {{ project.value}}
</div>

answered Aug 17, 2016 at 0:35

Shannon Hochkins

12.3k15 gold badges70 silver badges101 bronze badges

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

Collectives™ on Stack Overflow

Trying to create angular foreach with dynamic variable

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related