Develop an array of objects containing the respective sums of values from an array already present in JavaScript

Question

Develop an array of objects containing the respective sums of values from an array already present in JavaScript

Consider the array below:

["cat", "dog", "cat", "rabbit", "cat", "lion"]

I am looking to transform this array into an object array that shows the frequency of each element, for example:

[
 { name: cat, count: 3 },
 { name: dog, count: 1 },
 { name: rabbit, count: 1 },
 { name: lion, count: 1 },
]

How would I go about accomplishing this task in Javascript? I typically use the Lodash library, so if there is a straightforward solution using it, feel free to suggest it.

javascript arrays loops

Answer 1

Answer №1

To achieve a frequency map, start by building a map of frequencies based on the array values. Use each value as a key and increment the count in the map accordingly.

The formula for adding a new key is: ((freq[val] || 0) + 1). This means taking the existing count or starting at 0, then adding 1.

Once the map is created, convert it into an array with name/count pairs.

let arr = ["red", "red", "green", "red", "green", "blue"];

let frequencyMap = arr.reduce((freq, val) => {
  return { ...freq, [val]: ((freq[val] || 0) + 1) }
}, {});

let results = Object.keys(frequencyMap).map(key => {
  return { name : key, count : frequencyMap[key] }
});

console.log(results);

.as-console-wrapper { top: 0; max-height: 100% !important; }

Mini Golf Challenge

Here's a concise one-liner using a mapping function:

const freqArray = (a, fn) => (
  (f) => Object.keys(f).map(k => fn(k, f[k]))
)(a.reduce((m, v) => ({ ...m, [v]: ((m[v] || 0) + 1) }), {}));

let arr = [ "red", "red", "green", "red", "green", "blue" ];
let freq = freqArray(arr, (k, v) => ({ name : k, count : v }));

console.log(freq);

,as-console-wrapper { top: 0; max-height: 100% !important; }

Sorting Magic

You can also sort the results alphabetically by name since the keys are unique, removing the need to sort by count:

const freqArray = (arr, opts) => (
  (freq) => Object.keys(freq).map(key => opts.mapFn(key, freq[key]))
)(
  arr.reduce((m, v) => ({ ...m, [v]: ((m[v] || 0) + 1) }), {})
).sort(opts.cmpFn);

let arr = [ "red", "red", "green", "red", "green", "blue" ];
let freq = freqArray(arr, {
  mapFn: (key, val) => ({ name : key, count : val }),
  cmpFn: (a, b) => a.name.localeCompare(b.name)
});

console.log(freq);

.as-console-wrapper { top: 0; max-height: 100% !important; }

To sort by count in descending order followed by name:

const freqArray = (arr, opts) => (
  (freq) => Object.keys(freq).map(key => opts.mapFn(key, freq[key]))
)(
  arr.reduce((m, v) => ({ ...m, [v]: ((m[v] || 0) + 1) }), {})
).sort(opts.cmpFn);

let arr = [ "red", "red", "green", "red", "green", "blue", "green", "blue", "blue" ];
let freq = freqArray(arr, {
  mapFn: (key, val) => ({ name : key, count : val }),
  cmpFn: (a, b) => (b.count - a.count) || a.name.localeCompare(b.name)
});

console.log(freq);

.as-console-wrapper { top: 0; max-height: 100% !important; }

Answer 2

To achieve a frequency map, start by building a map of frequencies based on the array values. Use each value as a key and increment the count in the map accordingly.

The formula for adding a new key is: ((freq[val] || 0) + 1). This means taking the existing count or starting at 0, then adding 1.

Once the map is created, convert it into an array with name/count pairs.

let arr = ["red", "red", "green", "red", "green", "blue"];

let frequencyMap = arr.reduce((freq, val) => {
  return { ...freq, [val]: ((freq[val] || 0) + 1) }
}, {});

let results = Object.keys(frequencyMap).map(key => {
  return { name : key, count : frequencyMap[key] }
});

console.log(results);

.as-console-wrapper { top: 0; max-height: 100% !important; }

Mini Golf Challenge

Here's a concise one-liner using a mapping function:

const freqArray = (a, fn) => (
  (f) => Object.keys(f).map(k => fn(k, f[k]))
)(a.reduce((m, v) => ({ ...m, [v]: ((m[v] || 0) + 1) }), {}));

let arr = [ "red", "red", "green", "red", "green", "blue" ];
let freq = freqArray(arr, (k, v) => ({ name : k, count : v }));

console.log(freq);

,as-console-wrapper { top: 0; max-height: 100% !important; }

Sorting Magic

You can also sort the results alphabetically by name since the keys are unique, removing the need to sort by count:

const freqArray = (arr, opts) => (
  (freq) => Object.keys(freq).map(key => opts.mapFn(key, freq[key]))
)(
  arr.reduce((m, v) => ({ ...m, [v]: ((m[v] || 0) + 1) }), {})
).sort(opts.cmpFn);

let arr = [ "red", "red", "green", "red", "green", "blue" ];
let freq = freqArray(arr, {
  mapFn: (key, val) => ({ name : key, count : val }),
  cmpFn: (a, b) => a.name.localeCompare(b.name)
});

console.log(freq);

.as-console-wrapper { top: 0; max-height: 100% !important; }

To sort by count in descending order followed by name:

const freqArray = (arr, opts) => (
  (freq) => Object.keys(freq).map(key => opts.mapFn(key, freq[key]))
)(
  arr.reduce((m, v) => ({ ...m, [v]: ((m[v] || 0) + 1) }), {})
).sort(opts.cmpFn);

let arr = [ "red", "red", "green", "red", "green", "blue", "green", "blue", "blue" ];
let freq = freqArray(arr, {
  mapFn: (key, val) => ({ name : key, count : val }),
  cmpFn: (a, b) => (b.count - a.count) || a.name.localeCompare(b.name)
});

console.log(freq);

.as-console-wrapper { top: 0; max-height: 100% !important; }

Answer 3

Answer №2

If you're utilizing the lodash library, you have the option to use _.countBy() in order to tally the occurrences of a specific word, providing you with an object like this as the outcome:

{
  "red": 3,
  "green": 2,
  "blue": 1
}

Once you acquire this object, you can proceed to apply _.map() to restructure it so that the key becomes the value for the name property, and the value becomes the value for the count property:

const arr = ["red", "red", "green", "red", "green", "blue"];

const getFreq = _.flow(
  _.countBy,
  gr => _.map(gr, (count, name) => ({name, count}))
);

console.log(getFreq(arr));

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.min.js"></script>

In this scenario, _.flow() is utilized to generate a function which can be employed to group additional arrays if necessary. However, if you just require the final result, the code can be simplified as follows:

const res = _(arr).countBy().map((count, name) => ({name, count})).value();

Answer 4

If you're utilizing the lodash library, you have the option to use _.countBy() in order to tally the occurrences of a specific word, providing you with an object like this as the outcome:

{
  "red": 3,
  "green": 2,
  "blue": 1
}

Once you acquire this object, you can proceed to apply _.map() to restructure it so that the key becomes the value for the name property, and the value becomes the value for the count property:

const arr = ["red", "red", "green", "red", "green", "blue"];

const getFreq = _.flow(
  _.countBy,
  gr => _.map(gr, (count, name) => ({name, count}))
);

console.log(getFreq(arr));

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.min.js"></script>

In this scenario, _.flow() is utilized to generate a function which can be employed to group additional arrays if necessary. However, if you just require the final result, the code can be simplified as follows:

const res = _(arr).countBy().map((count, name) => ({name, count})).value();

Answer 5

Answer №3

Utilize Array.reduce method by starting with an empty array. During each iteration, check if an object exists with the current value as the "name", if so, increment the count; otherwise, add a new object:

const arr = ["red", "red", "green", "red", "green", "blue"];

const result = arr.reduce((acc, curr) => {
  const ndx = acc.findIndex(e => e.name === curr);

  if (ndx > -1) {
    acc[ndx].count++;
  } else {
    acc.push({
      name: curr,
      count: 1
    });
  }
  
  return acc;
}, []);

console.log(result);

Answer 6

Utilize Array.reduce method by starting with an empty array. During each iteration, check if an object exists with the current value as the "name", if so, increment the count; otherwise, add a new object:

const arr = ["red", "red", "green", "red", "green", "blue"];

const result = arr.reduce((acc, curr) => {
  const ndx = acc.findIndex(e => e.name === curr);

  if (ndx > -1) {
    acc[ndx].count++;
  } else {
    acc.push({
      name: curr,
      count: 1
    });
  }
  
  return acc;
}, []);

console.log(result);

Answer 7

Answer №4

Utilizing the countBy() function from lodash for a clear and straightforward approach.

const colors = ["red", "red", "green", "red", "green", "blue"];
const result = [];

for ( [key, value] of Object.entries(_.countBy(colors)) ){
  result.push( { 
    name : key,
    count: value
  })
}

console.log(result);

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.min.js"></script>

Answer 8

Utilizing the countBy() function from lodash for a clear and straightforward approach.

const colors = ["red", "red", "green", "red", "green", "blue"];
const result = [];

for ( [key, value] of Object.entries(_.countBy(colors)) ){
  result.push( { 
    name : key,
    count: value
  })
}

console.log(result);

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.min.js"></script>

Develop an array of objects containing the respective sums of values from an array already present in JavaScript

Answer №1

Mini Golf Challenge

Sorting Magic

Answer №2

Answer №3

Answer №4

Similar questions

Executing onClick event in RiotJS upon page load

Creating an array from a string within an array

What is the process for using Discriminators, the Mongo DB API, and Mongoose to insert data into Cosmos DB?

Troubleshooting Hover Problem with D3 Chord Example on Internet Explorer 11

Alter the jQuery in an Iframe to make changes to the parent document

Is there a way to split a string into equal chunks of characters in JavaScript?

Ensuring Secure API Request Distribution

What is the best way to automatically reference a growing collection of data entries?

Invoking AJAX function post readystatechange

Modify the JavaScript window.navigator

retrieve an array inside the doInBackground function

Transferring SQL-generated JSON object from PHP to JavaScript

There are certain CSS3 properties that are not being accounted for in the CSS min

Navigate to a new page seamlessly without the need for refreshing the current page in Django

Using Regex with JavaScript while ignoring letter case

Guide to displaying the output of a JS calculation in a Bootstrap modal dialog box

Ensuring the safe transmission of NodeJS applications

AngularJS - Calculate multiple currencies

How can I use Jquery to animate an element to the right edge of the window?

Tips for incorporating CSS styling into imported joint js bpmn elements