Passing an array into a factory - AngularJS

Question

So I am current building a line chart using Angles.js (an angular Wrapper for Chart.js) - which works really well, when using mock data.

Right now, using the mock data in the chartData factory - it works fine - the graph is drawn.

What I can't seem to do - is replace the mock data with the "real" data for each user, seen below in the users array. For each user, they have an activities array - which contains a seperate object for each activity they perform.

Right now I am using mock dates as well (date.js) - but what I would like to do is - within the chartData factory - replace the data: [] array with the users real activities array. For the labels, I am a little unsure how I will solve that, but am open to ideas!

Fiddle: http://jsfiddle.net/ADukg/4843/

var myApp = angular.module('myApp',[]);

function myCtrl($scope) {

    myApp.factory("chartData", function() {
    return {
        1: { //This key is the user id
            labels: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"],
            datasets: [{
                fillColor: "rgba(151,187,205,0)",
                strokeColor: "#e67e22",
                pointColor: "rgba(151,187,205,0)",
                pointStrokeColor: "#e67e22",
                data: [4, 3, 5, 4, 6] // Here I would like to pull the data from the user
            }]
        },
        2: { //This key is the user id
            labels: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"],
            datasets: [{
                fillColor: "rgba(151,187,205,0)",
                strokeColor: "#e67e22",
                pointColor: "rgba(151,187,205,0)",
                pointStrokeColor: "#e67e22",
                data: [4, 3, 5, 4, 6] // Here I would like to pull the data from the user
            }]
        },
        3: { //This key is the user id
            labels: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"],
            datasets: [{
                fillColor: "rgba(151,187,205,0)",
                strokeColor: "#e67e22",
                pointColor: "rgba(151,187,205,0)",
                pointStrokeColor: "#e67e22",
                data: [4, 3, 5, 4, 6] // Here I would like to pull the data from the user
            }]
        }
    }
});

$scope.competitionDetails = {
        users: [{
            id: 2,
            name: "John Thompson",
            totalPoints: 40,
            activities: [{ 
                id: 6431,
                time: (57).minutes().ago(),
                points: 20
            }, {
                id: 6431,
                time: new Date(),
                points: 20
            }]
        }, {
            id: 3,
            name: "Bob Andersson",
            totalPoints: 60,
            activities: [{ 
                id: 6431,
                time: (1).days().ago,
                points: 20
            }, {
                id: 6431,
                time: (2).days().ago,
                points: 20
            }, {
                id: 6431,
                time: new Date(),
                points: 20
            }]
        }, {
            id: 1,
            name: "Jimmy Smiths",
            totalPoints: 140,
            activities: [{
                id: 6431,
                time: (3).days().ago,
                points: 20
            }, {
                id: 6431,
                time: (10).days().ago,
                points: 20
            }, {
                id: 6432,
                time: new Date(),
                points: 100
            }]
        }]
    };
}

1. why are you defining factory on undefined module? 2. why are you wrapping factory declaration inside controller? — doodeec
– doodeec, Commented Feb 25, 2014 at 9:14
Sorry, I tried to paste in as little code as possible. In my application the factory is in a defined module - and not wrapped inside the controller. — user2656127
– user2656127, Commented Feb 25, 2014 at 9:16

link64 · Accepted Answer · 2014-02-25 11:44:18Z

1

You seem to have things backwards. You should be using your factory to retrieve your data into your scope, and then binding the chart data to a scope variable.

Your factories are not supposed to know anything about your controllers. The factory has methods that can be called from the controller. If your chart data and the actual data come from different sources, you should probably have two separate factories which return this information. You can then transform this data in to an object appropriate for use with the charting component.

answered Feb 25, 2014 at 11:44

link64

1,9761 gold badge26 silver badges43 bronze badges

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

Collectives™ on Stack Overflow

Passing an array into a factory - AngularJS

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