Building a modular approach in JavaScript

Question

I have the following code and it matches my requirements, however, it is not modular and not generic. For example, I might have a hundred of stats objects. Is there a way to make it more generic?

Actually, in dataSeries I have only two arrays of objects. And I am sorting them based on their color (red, green). Therefore, there are only four stats objects initialized.

var stats1 = {data: []}
var stats2 = {data: []}
var stats3 = {data: []}
var stats4 = {data: []}


stats1.data.push(self.dataSeries[0].data.filter(function (x) { return x.color == "green" }))
stats2.data.push(self.dataSeries[0].data.filter(function (x) { return x.color == "red" }))
stats3.data.push(self.dataSeries[1].data.filter(function (x) { return x.color == "green" }))
stats4.data.push(self.dataSeries[1].data.filter(function (x) { return x.color == "red" }))

a=[{ data: stats1.data[0] }, { data: stats2.data[0] }, { data: stats3.data[0] }, { data: stats4.data[0] }];

any ideas you might have already? any patterns in the code that can be "genericised" for example? — Nikos M.
– Nikos M., Commented May 14, 2015 at 2:12
I am relatively new on this environment. That is why first I looked for functionality rather than making more generic or modular. Since I see similarity in my code, then I thought that should be a way to make it more modular. — casillas
– casillas, Commented May 14, 2015 at 2:14
@Knu Codereview is for real code. Hypothetical code or code that hasn't been created yet is off-topic there. — Ethan Bierlein
– Ethan Bierlein, Commented May 14, 2015 at 2:14

floribon · Accepted Answer · 2015-05-14 02:40:41Z

1

Well if you know the number of data, you've got it all:

var numberOfData = 4;
var a = [];
for (var i = 0; i < numberOfData; i++) {
  var color = (i%2 === 0) ? 'green' : 'red';
  var index = Math.floor(i/2);
  var stat = {data: []};
  stat.data.push( self.dataSeries[index].data.filter(function (x) { return x.color == color }) );
  a.push( {data: stat.data[0] } );
}

Now it looks like you are creating a useless stat.data array, if so you could simplify the code by:

var numberOfData = 4;
var a = [];
for (var i = 0; i < numberOfData; i++) {
  var color = (i%2 === 0) ? 'green' : 'red';
  var index = Math.floor(i/2);
  var d = self.dataSeries[index].data.filter(function (x) { return x.color == color });
  a.push( {data: d} );
}

The resulting a array will be the same as in your example in both cases.

UPDATE If you have more colors, you could put them all in an array of colors and get the matching one using a modulo:

var numberOfData = 4;
var colors = ['green', 'red', 'blue', 'pink', 'rainbow'];

var a = [];
for (var i = 0; i < numberOfData; i++) {
  var color = colors[i%colors.length];
  var index = Math.floor(i/2);
  var d = self.dataSeries[index].data.filter(function (x) { return x.color == color });
  a.push( {data: d} );
}

edited May 14, 2015 at 2:40

answered May 14, 2015 at 2:21

floribon

19.2k5 gold badges56 silver badges68 bronze badges

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

2 Comments

floribon Over a year ago

@ilyasUyanik glad it helped you, I jave updated my answer with how to handle as many colors as you want in the third example.

casillas Over a year ago

Thanks a lot Floribon, it is very well written.

alebruck · Accepted Answer · 2015-05-14 02:29:59Z

1

This may give you an idea of how to turn it into something more generic.

a=[{ data: stats1.data[0] }, { data: stats2.data[0] }, { data: stats3.data[0] }, { data: stats4.data[0] }];

pushColor = function(stats, pos, x, color) {
    stats.data.push(self.dataSeries[pos].data.filter(function (x) {
        return x.color === color;
    }))
}

var arrayLength = a.length;
for (var i = 0; i < arrayLength; i++) {
    pushColor(a[i].data, a[1].pos, a[i].color, "green");
}

edited May 14, 2015 at 2:29

answered May 14, 2015 at 2:23

alebruck

4341 gold badge8 silver badges15 bronze badges

6 Comments

casillas Over a year ago

it is great answer. Thanks a lot alebruck, What if I have a more than two colors? Lets say 'color=['green', 'red', 'blue', 'yellow', etc]'

alebruck Over a year ago

How do you want to interact with this array? iterate the loop through each color?

casillas Over a year ago

First data sorted based on color. I will have color array to sort the dataSeries object.

alebruck Over a year ago

Correct me if I'm wrong. Do you have an array with multiple objects. Each object has a property called 'color'. Do you want to order this array based on this property?

floribon Over a year ago

@alebruck you could generate even the initial a array in the loop, no need to write that big array manually.

|

Will Reese · Accepted Answer · 2015-05-14 02:37:08Z

1

The easiest way to clean this up would be to move all the variables into an array. Here's a sample of one possibility.

Edit: added support for unknown number of colors

var stats = [], colors = [];

for(var i = 0; i < 25; i++) {
    stats.push({data: []});
}

colors = ["red", "green", "blue", "yellow"];
colorCount = colors.length;
for(var i = 0, len = stats.length; i < len; i++) {
    color = colors[i % colorCount];
    stats[i].data.push(self.dataSeries[0].data.filter(
        function (x) { return x.color == color }
    ));
}

edited May 14, 2015 at 2:37

answered May 14, 2015 at 2:19

Will Reese

2,8512 gold badges17 silver badges28 bronze badges

2 Comments

casillas Over a year ago

Thanks a lot Will, what if I have more than two colors? Let 's a say I have a array of color objects. 'color=['green', 'red', 'blue', 'yellow', etc]'

Will Reese Over a year ago

Would you just cycle through them, starting over after you get to the end?

Collectives™ on Stack Overflow

Building a modular approach in JavaScript

3 Answers 3

2 Comments

6 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

6 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related