CODEWITHSUNDEEP
javascriptjqueryangularjsangularjs-scopeangularjs-ng-repeat
Atul kumar singh
Atul kumar singh

Reputation: 474

Not able to read data from controller into the view

In view

 <fieldset>
                         <legend>Projects:</legend>
                            <label>Total: {{projectsData.totalProjects}}</label> <br>
                            <label>Create: {{projectsData.createdProjects}}</label> <br>
                            <label>Open: {{projectsData.openProjects}}</label> <br>
                            <label>Completed: {{projectsData.completedProjects}}</label> <br>
                            <label>Accepted: {{projectsData.acceptedProjects}}</label> <br>



                    </fieldset>

In controller

    app.controller('dashboardConroller', ['$scope', '$http', function($scope, $http){

        var userDashboardService = dashboardService($http);

        $scope.projectsData = [
{  
    "totalProjects": "20",
   "createdProjects":"2",
   "openProjects":"3",
   "completedProjects":"5",
   "acceptedProjects":"10"
}
];

    }])

In the view i am not getting anything, the data from the JSON is not getting displayed. I dont know why ?

Upvotes: 1

Views: 65

Answers (4)

vamshi krishna kurella
vamshi krishna kurella

Reputation: 332

your $scope.projectsData is an array. Make it an object as below

$scope.projectsData = {  
   "totalProjects": "20",
   "createdProjects":"2",
   "openProjects":"3",
   "completedProjects":"5",
   "acceptedProjects":"10"
}

It will work as expected after this.

Upvotes: 1

RIYAJ KHAN
RIYAJ KHAN

Reputation: 15292

$scope.projectsData is array of object.

If you want to use array of obejct then you can do it using [ng-repeat][1].

e.g.

<p ng-repeat="project in projectsData">
 <label>Total: {{project .totalProjects}}</label> <br> 
<label>Create: {{project .createdProjects}}</label> <br> 
<label>Open: {{project .openProjects}}</label> <br> 
<label>Completed: {{project .completedProjects}}</label> <br>
 <label>Accepted: {{project .acceptedProjects}}</label> <br
</p>

If you not using array of obejct then your object should be this

 $scope.projectsData =  {  
    "totalProjects": "20",
   "createdProjects":"2",
   "openProjects":"3",
   "completedProjects":"5",
   "acceptedProjects":"10"
};

So, your HTML will work with no change.

<label>Total: {{projectsData.totalProjects}}</label> <br> 
<label>Create: {{projectsData.createdProjects}}</label> <br>
<label>Open: {{projectsData.openProjects}}</label> <br>
<label>Completed: {{projectsData.completedProjects}}</label> <br>
<label>Accepted: {{projectsData.acceptedProjects}}</label> <br>

Upvotes: 1

Anik Islam Abhi
Anik Islam Abhi

Reputation: 25352

Your projectsData is an array of object.

You have to use index in order to access.

Try like this

 <label>Total: {{projectsData[0].totalProjects}}</label> <br>
<label>Create: {{projectsData[0].createdProjects}}</label> <br>
<label>Open: {{projectsData[0].openProjects}}</label> <br>
<label>Completed: {{projectsData[0].completedProjects}}</label> <br>
<label>Accepted: {{projectsData[0].acceptedProjects}}</label> <br>

DEMO

Upvotes: 1

Karan
Karan

Reputation: 1108

Use ng-repeat to show the data.Because you have array of object: 

 <div ng-repeat="x in projectsData">{{x.totalProjects}}</div>

Upvotes: 1

Related Questions