Angular: Finding the total number of Objects containing a particular value

Question

Angular: Finding the total number of Objects containing a particular value

In my JSON database, I have a collection of objects where each one is assigned a specific value: either a, b, or c.

[
  {
    "id": 1,
    "category": "a"
  },
  {
    "id": 2,
    "category": "b"
  },
  {
    "id": 3,
    "category": "c"
  },
  {
    "id": 4,
    "category": "a"
  },
  {
    "id": 5,
    "category": "a"
  },
  {
    "id": 5,
    "category": "b"
  }
]

I want to show the following information:

There are a total of 6 items: a x 3, b x 2, and c x 1.

To calculate the total number of items, I know I can use objectsinmyjsondatabase.length.

My question is, how can I determine the number of objects that have a specific value?

javascript

Answer 1

Answer №1

To create a function, follow these steps:

calculateTotal(character) {
  return this.items.filter(item => item.type === character).length;
}

Now, you can use the function by calling: this.calculateTotal('b');

Answer 2

To create a function, follow these steps:

calculateTotal(character) {
  return this.items.filter(item => item.type === character).length;
}

Now, you can use the function by calling: this.calculateTotal('b');

Answer 3

Answer №2

If you're looking for a solution, consider implementing the map-reduce technique. Below is a quick and effective solution that may just address your issue.

var data = [
  {
    "id": 1,
    "category": "a"
  },
  {
    "id": 2,
    "category": "b"
  },
  {
    "id": 3,
    "category": "c"
  },
  {
    "id": 4,
    "category": "a"
  },
  {
    "id": 5,
    "category": "a"
  },
  {
    "id": 5,
    "category": "b"
  }
];

// Extract all categories from the data
var categories = data.map(function(x) { return x["category"]; });

// Calculate the count of items in each category
var countByCategories = categories.reduce(function(x, y) {
    if (typeof x !== "object") {
       var reduced = {};
       reduced[x] = 1;
       reduced[y] = 1;
       return reduced;
    }
    
    x[y] = (x[y] || 0) + 1;
    return x;
});

// Build the final string as desired
var categoryStrings = [];
for (var category in countByCategories) {
   categoryStrings.push(category + ' x ' + countByCategories[category]); 
}

var msg = 'Total items: ' + categories.length + '. ';
if (categoryStrings.length > 2) {
   msg = categoryStrings.slice(0, -1).join(', '); 
   msg += ' and ' + categoryStrings.slice(-1);
} else {
   msg = categoryStrings.join(', '); 
}

// Display the results
console.log(msg);

Answer 4

If you're looking for a solution, consider implementing the map-reduce technique. Below is a quick and effective solution that may just address your issue.

var data = [
  {
    "id": 1,
    "category": "a"
  },
  {
    "id": 2,
    "category": "b"
  },
  {
    "id": 3,
    "category": "c"
  },
  {
    "id": 4,
    "category": "a"
  },
  {
    "id": 5,
    "category": "a"
  },
  {
    "id": 5,
    "category": "b"
  }
];

// Extract all categories from the data
var categories = data.map(function(x) { return x["category"]; });

// Calculate the count of items in each category
var countByCategories = categories.reduce(function(x, y) {
    if (typeof x !== "object") {
       var reduced = {};
       reduced[x] = 1;
       reduced[y] = 1;
       return reduced;
    }
    
    x[y] = (x[y] || 0) + 1;
    return x;
});

// Build the final string as desired
var categoryStrings = [];
for (var category in countByCategories) {
   categoryStrings.push(category + ' x ' + countByCategories[category]); 
}

var msg = 'Total items: ' + categories.length + '. ';
if (categoryStrings.length > 2) {
   msg = categoryStrings.slice(0, -1).join(', '); 
   msg += ' and ' + categoryStrings.slice(-1);
} else {
   msg = categoryStrings.join(', '); 
}

// Display the results
console.log(msg);

Answer 5

Answer №3

If you need to tally up items with specific values, you can achieve this with the following method:

let items = [
    {
        "id": 1,
        "category": "a"
    },
    {
        "id": 2,
        "category": "b"
    },
    {
        "id": 3,
        "category": "c"
    },
    {
        "id": 4,
        "category": "a"
    },
    {
        "id": 5,
        "category": "a"
    },
    {
        "id": 5,
        "category": "b"
    }
];
var countedItems = new Array();
items.filter(function (item) {
    var found = countedItems.some(function (el, index) {
        if (false == (item.category === el.category)) {
            return false;
        }
        countedItems[index].count = countedItems[index].count + 1;
        return true;

    }, countedItems);
    if (false === found) {
        countedItems.push({category: item.category, count: 1});
    }
}, countedItems);
console.log('There is a total of ' + items.length + ' items: '
    + countedItems.map(function (item) {
        return item.category + ' x ' + item.count;
    })
);

Answer 6

If you need to tally up items with specific values, you can achieve this with the following method:

let items = [
    {
        "id": 1,
        "category": "a"
    },
    {
        "id": 2,
        "category": "b"
    },
    {
        "id": 3,
        "category": "c"
    },
    {
        "id": 4,
        "category": "a"
    },
    {
        "id": 5,
        "category": "a"
    },
    {
        "id": 5,
        "category": "b"
    }
];
var countedItems = new Array();
items.filter(function (item) {
    var found = countedItems.some(function (el, index) {
        if (false == (item.category === el.category)) {
            return false;
        }
        countedItems[index].count = countedItems[index].count + 1;
        return true;

    }, countedItems);
    if (false === found) {
        countedItems.push({category: item.category, count: 1});
    }
}, countedItems);
console.log('There is a total of ' + items.length + ' items: '
    + countedItems.map(function (item) {
        return item.category + ' x ' + item.count;
    })
);

Angular: Finding the total number of Objects containing a particular value

Answer №1

Answer №2

Answer №3

Similar questions

What is the reason Angular is unable to locate a controller for a directive in an external file?

The array filtering functionality is not functioning as intended

Disabling the visibility of elements through a transparent sticky-top menu

Error: The listen function in React + Redux Simple Router is undefined and cannot be found

Tutorial on Removing and Re-Adding HTML Elements

What is the best way to display circles (generated from JSON data) in reverse order by incorporating a delay function?

When the onclick function is triggered, two or more characters will be displayed

Using JavaScript to reduce, group, and sum nested objects

Unleash the power of jQuery by incorporating the Ajax functionality with a hover option to enhance user interactivity. Utilize the .ajax

What is the best way to decrease the border width of a chartjs doughnut chart?

Surprising non-synchronous operation within the computed property "vue/no-async-in-computed-properties" in Vue3

Having difficulty with pagination within a callback function

What is the best way to combine a hyperlink with a string in an Angular form?

The functionality for tabbed content seems to be malfunctioning on Chrome and Firefox, however it works perfectly

Avoiding accidental clicks on a raycasted object while moving the mouse

Updating and showing a variable in a PHP file using JavaScript within an HTML webpage

Animating nested ng-repeat loops

Looking to display parent and child elements from a JSON object using search functionality in JavaScript or Angular

Get a document from a NodeJS Server with the help of Express

Determine the total value of a specific key within a collection of objects