Angular: How to get the count of the Object with specific value?

Question

I have a JSON database with objects. Each one has properties with a specific assigned value: 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 display something like:

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

I know I have to use objectsinmyjsondatabase.length to get the total.

I'm wondering how is it possible to get the length (number) of objects that have a specific value?

If you are looking to do the count in the view, this [answer](https://stackoverflow.com/a/37250267/5556177) will help you. — Nehal, Jul 27 '17 at 21:14

score 5 · Answer 1 · answered Jul 28 '17 at 06:37

5

Define a function:

getCount(character) {
  return this.objects.filter(obj => obj.category === character).length;
}

and the call it as: this.getCount('a');

answered Jul 28 '17 at 06:37

Malik Shahzad

6,703
3
37
49

Where do I need to declare this function? In my component or my service? – Jonathan Jul 28 '17 at 06:38
@jonathan I think this should be written in component. Service should pass the data as it is to component. But yes, you can filter in service as well. – Malik Shahzad Jul 28 '17 at 06:41

score 1 · Answer 2 · answered Aug 01 '17 at 14:38

One way to solve your problem is to use map-reduce. Here is a quick solution. Hope that will solve your problem.

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"
  }
];

// First get list of all categories
var categories = data.map(function(x) { return x["category"]; });

// Count no 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;
});

// Final build string that you want
var categoryStrings = [];
for (var category in countByCategories) {
   categoryStrings.push(category + ' x ' + countByCategories[category]); 
}

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

// print results
console.log(msg);

Vladimir Olejnikov · Answer 3 · 2017-07-29T11:10:07.243

You easily can count objects which have specific value like this

let objects = [
    {
        "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 filtered = new Array();
objects.filter(function (t) {
    var found = filtered.some(function (el, index) {
        if (false == (t.category === el.category)) {
            return false;
        }
        filtered[index].count = filtered[index].count + 1;
        return true;

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

Angular: How to get the count of the Object with specific value?

3 Answers3