title: Vue method to count duplicates in array
body: <p>I'm able to successful produce a new array containing only the unique values, but I can't get my count function to work. I want the result to show how many items in the array have each color.</p>
  
  <p>My desired result would be:</p>
  
  <pre><code>4 red
  10 blue
  1 green
  </code></pre>
  
  <p>Currently the result is a count of 0 for each color. <strong>I'm assuming this might have something to do with me adding the count property when I map the array to a new variable.</strong></p>
  
  <p>The reason I wrapped it in the <code>if (loopComplete == false)</code> condition is because I was getting undefined errors and was trying to make sure that the second <code>for</code> loop was running after the first was complete.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var vm = new Vue({
    el: '#app',
    data: {
      myArray: [
        { color: 'red',
          number: '1'
        },
        {
          color: 'red',
          number: '2'
        },
        {
          color: 'red',
          number: '3'
        },
        {
          color: 'red',
          number: '4'
        },
        {
          color: 'blue',
          number: '5'
        },
        {
          color: 'blue',
          number: '6'
        },
        {
          color: 'blue',
          number: '7'
        },
        {
          color: 'blue',
          number: '8'
        },
        {
          color: 'blue',
          number: '9'
        },
        {
          color: 'blue',
          number: '10'
        },
        {
          color: 'blue',
          number: '11'
        },
        {
          color: 'blue',
          number: '12'
        },
        {
          color: 'blue',
          number: '13'
        },
        {
          color: 'blue',
          number: '14'
        },
        {
          color: 'green',
          number: '15'
        },
      ],
    },
    computed: {
      filteredArray() {
        return this.count(this.myArray);
      }
    },
    methods: {
      count(array) {
        let newArray = array.map(function(item) {
          return {
            'color': item.color,
            'count': 0,
          };
        });
        let arrayUnique = [];
        let arrayAdded = [];
        let loopComplete = false;
  
        if (loopComplete == false) {
          for (let i = 0; i &lt; newArray.length; i++) {
            if (!arrayAdded.includes(newArray[i].color)) {
              arrayAdded.push(newArray[i].color);
              arrayUnique.push(newArray[i]);
            }
          }
          loopComplete = true;
          return arrayUnique;
        } else {
          for (let i = 0; i &lt; newArray.length; i++) {
            if (arrayUnique.includes(newArray[i].color)) {
              arrayUnique[i].count++;
            }
            return arrayUnique;
          }
        }
      }
    }
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"&gt;&lt;/script&gt;
  &lt;div id="app"&gt;
    &lt;div v-for="result in filteredArray"&gt;
      {{ result.count }} {{ result.color }}
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>