Split JavaScript array into smaller ones and get frequency of each value

Question

I have the following big array:

var divs = [
    {class:'A', top:0,   left:0},
    {class:'B', top:50,  left:60},
    {class:'C', top:30,  left:10},
    {class:'D', top:100, left:180},
    {class:'E', top:80,  left:50},
    {class:'F', top:100, left:200},
    {class:'G', top:50,  left:80}
];

I'd like to isolate just the top values. I tried using split() but I might not be using it correctly because nothing returns as expected.

Once the top values are isolated into their own smaller array I want to iterate over it and find the frequency of occurrence for each value.

Can I please get some help?

frosty · Accepted Answer · 2011-09-26 21:28:33Z

2

var divs = [
            {class:'A', top:0,   left:0},
            {class:'B', top:50,  left:60},
            {class:'C', top:30,  left:10},
            {class:'D', top:100, left:180},
            {class:'E', top:80,  left:50},
            {class:'F', top:100,  left:200},
            {class:'G', top:50,  left:80}
];
var topsy = {};
for(var i = 0, max = divs.length; i < max; i++){
    var a = divs[i];
    topsy[a.top] = (topsy[a.top] + 1) || 1;
}

At this point, you will have a topsy that has all of the tops in there, with the key being the top, and the value being the number of times it was in there. To get a list of the keys, you say:

Object.keys(topsy);

Object.keys doesn't work in IE. You will end up with topsy =

Then you can say

Object.keys(topsy);//[3,30,50,80,100]

You got your analysis and array done at one time.

edited Sep 26, 2011 at 21:28

answered Sep 26, 2011 at 21:20

frosty

21.8k8 gold badges58 silver badges77 bronze badges

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

2 Comments

JsusSalv Over a year ago

Object.keys(topsy); only returned '7' and not [3,30,50,80,100] as indicated. Good solution, however! I like that it can potentially be combined.

frosty Over a year ago

Worked great for me... check it out picasaweb.google.com/lh/photo/…

Rob W · Accepted Answer · 2011-09-26 21:13:54Z

1

You have to iterate through the array, and store the top values in a temporary variable. Choosing the variable to be an Array is wise, because an array can easily be looped through.

var test = [];
for(var i=0; i<divs.length; i++){
    test.push(divs[i].top);
}
//test is an array which holds all value of "top"

answered Sep 26, 2011 at 21:13

Rob W

350k87 gold badges811 silver badges683 bronze badges

1 Comment

JsusSalv Over a year ago

This worked great also. However, I would have set divs.length to its own variable so as to minimize property lookups. Other than that, it looks great! Thank you for the help!

Marshall · Accepted Answer · 2011-09-26 21:15:25Z

1

var divs = [
    {class:'A', top:0,   left:0},
    {class:'B', top:50,  left:60},
    {class:'C', top:30,  left:10},
    {class:'D', top:100, left:180},
    {class:'E', top:80,  left:50},
    {class:'F', top:100,  left:200},
    {class:'G', top:50,  left:80}
];

var tops = [];
for(var i = 0, l = divs.length; i < l; i++) {
    tops.push(divs[i].top);
};

tops; // [ 0, 50, 30, 100, 80, 100, 50 ]

answered Sep 26, 2011 at 21:15

Marshall

4,7961 gold badge21 silver badges15 bronze badges

Comments

Joseph Marikle · Accepted Answer · 2011-09-26 21:15:30Z

1

var divs = [
                {class:'A', top:0,   left:0},
                {class:'B', top:50,  left:60},
                {class:'C', top:30,  left:10},
                {class:'D', top:100, left:180},
                {class:'E', top:80,  left:50},
                {class:'F', top:100,  left:200},
                {class:'G', top:50,  left:80}
    ];

var divsTop = [];

for(var i in divs)
    divsTop.push({"class":divs[i].class,"top":divs[i].top});

You can iterate through and push each (modified) object to another array.

answered Sep 26, 2011 at 21:15

Joseph Marikle

78.8k18 gold badges114 silver badges130 bronze badges

1 Comment

JsusSalv Over a year ago

Wow, interesting method. Will try this out as well. Thanks!

pimvdb · Accepted Answer · 2011-09-26 21:19:46Z

1

You can use .map to filter, and .forEach to iterate, although both are not available on older browsers.

var freqs = {},
    tops = divs.map(function(value) {
               return value.top; // map the array by only returning each 'top'
           });

tops.forEach(function(value) {
    // iterate over array, increment freqs of this top
    // or set to 1 if it's not in the object yet
    freqs[value] = freqs[value] + 1 || 1;
});

// tops:  [0, 50, 30, 100, 80, 100, 50]
// freqs: {0: 1, 30: 1, 50: 2, 80: 1, 100: 2}

edited Sep 26, 2011 at 21:19

answered Sep 26, 2011 at 21:13

pimvdb

155k80 gold badges313 silver badges357 bronze badges

2 Comments

JsusSalv Over a year ago

Awesome! But the code needs to work with legacy browsers as well.

pimvdb Over a year ago

@JsusSalv: Well, the links I provided also provide implementations for older browsers.

Collectives™ on Stack Overflow

Split JavaScript array into smaller ones and get frequency of each value

5 Answers 5

2 Comments

1 Comment

Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

1 Comment

Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related