Implementing JavaScript's reduce method to calculate the percentage of an element's presence within an array

Question

Implementing JavaScript's reduce method to calculate the percentage of an element's presence within an array

I am attempting to utilize the reduce method to generate an object that displays the percentage of occurrence of different countries in a given list.

Input:

countriesList = ["US","US","US","UK","IT","IT"]

Desired Output:

percCountriesList = [{"country": "US", "weight": 0.5}, {"country": "UK", "weight": 0.1666}, {"country": "IT", "weight": 0.3333}]

Method for calculating percentages:

const countriesList = ["US","US","US","UK","IT","IT"]
const weightPercCountries = countriesList.reduce((pcts, x) => {
    pcts[x] = (pcts, (pcts[x] ? pcts[x] : 0) + 100 / countriesList.length);
    return pcts;
}, []);
console.log(weightPercCountries)

Having obtained the list of percentages:

[50, 16.666666666666668, 33.33333333...]

Now, how can I format the desired output (country + weight) in JSON format? Appreciate any help!

javascript json object reduce

Answer 1

Answer №1

Initially, the code generates an empty array with only a few additional properties. This occurs because the variable x is used as a country abbreviation rather than an index. Therefore, assigning values like pcts[x] = .. equates to something along the lines of pcts['us'] = ..., which may not be logical for an array in most scenarios.

If you desire to include a complex object within the array, it must be created separately. Consider the example below:

I have set the reduce function to return an object, facilitating easy verification if the current country (denoted by x) already exists within the data structure.
If the country is absent, I introduce a new property to the object containing all necessary attributes in the outcome (e.g., { country: x, percentage: 0}).
After ensuring the existence of an object for the specific country, I can modify the percentage value by referencing its name. You can choose between 50 or 0.5 depending on your preference, achieved through calculations like 100/countriesList.length or 1/countriesList.length.
The revised reduce function now produces an object structured similar to:
```
 {
   "us": { country: "us", percentage: 0.5},
   "it": { country: "it", percentage: 0.33} 
   ...
 }
```
To retrieve an array of these values, utilize Object.values(...) which converts enumerable object properties into an array format.

const 
  countriesList = ["US","US","US","UK","IT","IT"];
  

const 
  weightPercCountries = Object.values(countriesList.reduce((pcts, x) => {
    if (!(x in pcts))
      pcts[x] = { country: x, percentage: 0}
    
    pcts[x].percentage += (1 / countriesList.length);
    return pcts;
}, {}));

console.log(weightPercCountries)

It is possible to condense the callback of the reduce function (as seen in Andrew Park's response). However, to enhance readability—especially for beginners—I opted for a more descriptive approach in the code...

Answer 2

Initially, the code generates an empty array with only a few additional properties. This occurs because the variable x is used as a country abbreviation rather than an index. Therefore, assigning values like pcts[x] = .. equates to something along the lines of pcts['us'] = ..., which may not be logical for an array in most scenarios.

If you desire to include a complex object within the array, it must be created separately. Consider the example below:

I have set the reduce function to return an object, facilitating easy verification if the current country (denoted by x) already exists within the data structure.
If the country is absent, I introduce a new property to the object containing all necessary attributes in the outcome (e.g., { country: x, percentage: 0}).
After ensuring the existence of an object for the specific country, I can modify the percentage value by referencing its name. You can choose between 50 or 0.5 depending on your preference, achieved through calculations like 100/countriesList.length or 1/countriesList.length.
The revised reduce function now produces an object structured similar to:
```
 {
   "us": { country: "us", percentage: 0.5},
   "it": { country: "it", percentage: 0.33} 
   ...
 }
```
To retrieve an array of these values, utilize Object.values(...) which converts enumerable object properties into an array format.

const 
  countriesList = ["US","US","US","UK","IT","IT"];
  

const 
  weightPercCountries = Object.values(countriesList.reduce((pcts, x) => {
    if (!(x in pcts))
      pcts[x] = { country: x, percentage: 0}
    
    pcts[x].percentage += (1 / countriesList.length);
    return pcts;
}, {}));

console.log(weightPercCountries)

It is possible to condense the callback of the reduce function (as seen in Andrew Park's response). However, to enhance readability—especially for beginners—I opted for a more descriptive approach in the code...

Answer 3

Answer №2

let countriesArray = ["US","US","US","UK","IT","IT"]

const result = Object.values(countriesArray.reduce((accumulator, currentValue, index, array) => {
  ((accumulator[currentValue] ??= {'country':currentValue, weight:0}).weight += 1/array.length, accumulator)
}, {}))

console.log(result)

This code snippet demonstrates the use of the ??= operator to assign values when a property is not defined. Additionally, it utilizes comma expressions to streamline the logic without requiring explicit return statements.

An expanded version of the code can be written as:

let countriesArray = ["US","US","US","UK","IT","IT"]

const mappedResult = countriesArray.reduce((accumulator, currentValue, index, array) => {
  if (!accumulator[currentValue]) {
    accumulator[currentValue] = {'country': currentValue, weight: 0}
  }
  accumulator[currentValue].weight += 1 / array.length
  return accumulator
}, {})

// Output:
// {
//   US: { country: 'US', weight: 0.5 },
//   UK: { country: 'UK', weight: 0.16666666666666666 },
//   IT: { country: 'IT', weight: 0.3333333333333333 }
// }

// Extract only the object values, excluding keys
const finalResult = Object.values(mappedResult)

console.log(finalResult)

Answer 4

let countriesArray = ["US","US","US","UK","IT","IT"]

const result = Object.values(countriesArray.reduce((accumulator, currentValue, index, array) => {
  ((accumulator[currentValue] ??= {'country':currentValue, weight:0}).weight += 1/array.length, accumulator)
}, {}))

console.log(result)

This code snippet demonstrates the use of the ??= operator to assign values when a property is not defined. Additionally, it utilizes comma expressions to streamline the logic without requiring explicit return statements.

An expanded version of the code can be written as:

let countriesArray = ["US","US","US","UK","IT","IT"]

const mappedResult = countriesArray.reduce((accumulator, currentValue, index, array) => {
  if (!accumulator[currentValue]) {
    accumulator[currentValue] = {'country': currentValue, weight: 0}
  }
  accumulator[currentValue].weight += 1 / array.length
  return accumulator
}, {})

// Output:
// {
//   US: { country: 'US', weight: 0.5 },
//   UK: { country: 'UK', weight: 0.16666666666666666 },
//   IT: { country: 'IT', weight: 0.3333333333333333 }
// }

// Extract only the object values, excluding keys
const finalResult = Object.values(mappedResult)

console.log(finalResult)

Implementing JavaScript's reduce method to calculate the percentage of an element's presence within an array

Answer №1

Answer №2

Similar questions

After successfully receiving my complex JSON data, the application encountered a malfunction when attempting to display the data in my listView layout

`Proliferating values through constantly changing addition`

What would be the best TypeScript target and libs to utilize in a transpiler-free Node.js project?

VueJS failing to pass parent data to child component

The JSON.stringify() method is overwriting the file object with a blank one

ReactJS: Error message indicating that the update depth limit has been exceeded

Running multiple JavaScript servers simultaneously can be achieved by utilizing specific tools and

Setting up TypeScript in an Angular 2 project and integrating Facebook login

Loading a javascript file in an asynchronous manner

"Experience the power of using Selenium with Node.js in an asynchronous function

Traverse each child element sequentially using setTimeout or a delay function

Text in d3.js vanishing while undergoing rotation

Converting a C# two-dimensional array into JavaScript formatting

Issue with Axios fetching data with parameter in Next.js not resolving

Exploring the contents of an array in ReactJS

Get Angular events in the proper order

What is the best approach for managing Promise rejections in Jest test scenarios?

Display varying information depending on the option class, rather than its value

Navigating through JSON data in an Angular application

Positioning an HTML table with the use of a for loop in JavaScript