Calculating distinct values within a single key in an object

Question

Calculating distinct values within a single key in an object

My goal is to track the occurrences of four specific string values within the same key.

The issue lies in my struggle with adding multiple counters. While the first counter successfully tracks the initial condition, subsequent conditions within the if/else statement impede the proper counting of all conditions. This data is sourced from a Promise.all that includes various URLs.

Below is my code snippet:

 const urls = [
  'https://api.github.com/users/TylerP33/repos?page=1',
  'https://api.github.com/users/TylerP33/repos?page=2',
  // more URLS here...
];

function getLanguages() {
  return Promise.all(urls.map(url =>
    fetch(`${url}`)
    .then(response => response.json())
    .then(obj => obj.forEach(function(val) {
      let rubyCounter = 0;
      let cssCounter = 0;
      let htmlCounter = 0;
      let jsCounter = 0;
      
      if (val.language === "Ruby") {
        rubyCounter++;
        console.log(rubyCounter);
      }

    })))
  )
}

getLanguages();

rubyCounter correctly displays 235, but introducing additional conditions seems to disrupt the counting process due to the true/false conditions affecting the same key. I may be overlooking something obvious and would appreciate your input on this matter.

Thank you in advance.

javascript ajax fetch

Answer 1

Answer №1

When looking at this code snippet, it becomes apparent that the variable rubyCounter will consistently have the value of 1 once logged because the counter is always initialized within the callback function.

To resolve this issue, it is necessary to relocate the definition of the counters to the root of the getLanguages function.

Instead of using multiple variables for each counter, a better approach would be to utilize an Object where each language to count corresponds to a property.

const urls = [
  'https://api.github.com/users/TylerP33/repos?page=1',
  // Additional URLs omitted for brevity
]

function getLanguages() {
  let counter = {
    ruby: 0,
    html: 0
  }

  return Promise.all(urls.map(url =>
      fetch(`${url}`)
      .then(response => response.json())
      .then(obj => obj.forEach(function(val) {
        if (val.language === "Ruby") {
          counter.ruby++;
        } else if (val.language === "HTML") {
          counter.html++;
        }
      }))
    ))
    .then(() => {
      console.dir(counter)
    })
}

getLanguages();

If counting all languages is the goal, there is an even simpler solution:

const urls = [
  'https://api.github.com/users/TylerP33/repos?page=1',
  // Additional URLs omitted for brevity
]

function getLanguages() {
  let counter = {}

  return Promise.all(urls.map(url =>
      fetch(`${url}`)
      .then(response => response.json())
      .then(obj => obj.forEach(function(val) {
        if( val.language ) {
          counter[val.language] = counter[val.language] || 0
          counter[val.language]++
        }
      }))
    ))
    .then(() => {
      console.dir(counter)
    })
}

getLanguages();

Answer 2

When looking at this code snippet, it becomes apparent that the variable rubyCounter will consistently have the value of 1 once logged because the counter is always initialized within the callback function.

To resolve this issue, it is necessary to relocate the definition of the counters to the root of the getLanguages function.

Instead of using multiple variables for each counter, a better approach would be to utilize an Object where each language to count corresponds to a property.

const urls = [
  'https://api.github.com/users/TylerP33/repos?page=1',
  // Additional URLs omitted for brevity
]

function getLanguages() {
  let counter = {
    ruby: 0,
    html: 0
  }

  return Promise.all(urls.map(url =>
      fetch(`${url}`)
      .then(response => response.json())
      .then(obj => obj.forEach(function(val) {
        if (val.language === "Ruby") {
          counter.ruby++;
        } else if (val.language === "HTML") {
          counter.html++;
        }
      }))
    ))
    .then(() => {
      console.dir(counter)
    })
}

getLanguages();

If counting all languages is the goal, there is an even simpler solution:

const urls = [
  'https://api.github.com/users/TylerP33/repos?page=1',
  // Additional URLs omitted for brevity
]

function getLanguages() {
  let counter = {}

  return Promise.all(urls.map(url =>
      fetch(`${url}`)
      .then(response => response.json())
      .then(obj => obj.forEach(function(val) {
        if( val.language ) {
          counter[val.language] = counter[val.language] || 0
          counter[val.language]++
        }
      }))
    ))
    .then(() => {
      console.dir(counter)
    })
}

getLanguages();

Answer 3

Answer №2

If you want to test this out, give it a try:

const urls = [
            'https://api.github.com/users/KatieSullivan/repos?page=1',
            'https://api.github.com/users/KatieSullivan/repos?page=2'
        ]

        var languageCounters = {};
        function retrieveLanguages() {
            return Promise.all(urls.map(url => {
                fetch(`${url}`)
                    .then(response => response.json())
                    .then(json => json.forEach(function (val) {
                        if (!languageCounters[val.language])
                            languageCounters[val.language] = 0;

                        languageCounters[val.language]++;
                    }))
                    .then(() => {
                        console.log(languageCounters);
                    });
            }));
        }

        retrieveLanguages();

Answer 4

If you want to test this out, give it a try:

const urls = [
            'https://api.github.com/users/KatieSullivan/repos?page=1',
            'https://api.github.com/users/KatieSullivan/repos?page=2'
        ]

        var languageCounters = {};
        function retrieveLanguages() {
            return Promise.all(urls.map(url => {
                fetch(`${url}`)
                    .then(response => response.json())
                    .then(json => json.forEach(function (val) {
                        if (!languageCounters[val.language])
                            languageCounters[val.language] = 0;

                        languageCounters[val.language]++;
                    }))
                    .then(() => {
                        console.log(languageCounters);
                    });
            }));
        }

        retrieveLanguages();

Calculating distinct values within a single key in an object

Answer №1

Answer №2

Similar questions

Space between flex content and border increases on hover and focus effects

Changing the CSS class of the Bootstrap datetime picker when selecting the year

Why is adding a div to Facebook posts using JQuery failing due to dynamic loading?

Tips on leveraging state values within the makeStyles function in Material UI React

Identifying tick markers in the event loop of JavaScript and Node.js

Exploring the firestore section with vuefire for seamless access to methods

Troubleshooting: Issues with AngularJS $route.reload() functionality

Inserting a line break in real-time within a JSX statement

Leveraging Node.js to establish a connection between two pug files

Using AngularJS to Nest ng-view within ng-repeat

Exploring the Depths of NodeJS X-Ray Web-Scraper: Uncovering Hidden Gems within Sub Pages

Is it feasible to activate an action on a click of a Vimeo video?

JavaScript Function to Convert JSON Data into an Excel File Download

Rails implementation of AJAX pagination

Encountering a React JS error with Admin on Rest while making an API request

In order to display the new component upon the first click in React, my button requires a double click

Turn the image inside the div with the nth-child selector into a clickable link

Unable to access static library Java Script file path using NSBundle

How should we structure our JavaScript code: MVC or self-rendering components?

Reverting Vue Draggable Components to Their Original Position Upon Dropping Them