Search code examples
javascripthtmlfind-occurrences

javascript: Find occurrence of element string against array of elements. Occurrence returns 0

I have a list of n items. Each item has a title with the format [first part] - [color]. Items have unique colors.

    <div class="the-elements">
    
       <div class="elem" data-splittitle="Alfa Romeo" data-splitcolor="Red">Alfa Romeo - Red</div>
       <div class="elem" data-splittitle="BMW" data-splitcolor="Red">BMW - Red</div>
       <div class="elem" data-splittitle="Fiat " data-splitcolor="Blue">Fiat - Blue</div>
       <div class="elem" data-splittitle="Alfa Romeo" data-splitcolor="Black">Alfa Romeo - Black</div>
       <div class="elem" data-splittitle="Alfa Romeo" data-splitcolor="Silver">Alfa Romeo - Silver</div>
       <div class="elem" data-splittitle="Alfa Romeo" data-splitcolor="Some Color">Alfa Romeo - Some Color</div>
       <div class="elem" data-splittitle="Alfa Romeo" data-splitcolor="Some other Color">Alfa Romeo - Some other Color</div>
       <div class="elem" data-splittitle="BMW" data-splitcolor="Green">BMW - Green</div>
       <div class="elem" data-splittitle="Zastava" data-splitcolor="Black">Zastava - Black</div>
       <div class="elem" data-splittitle="BMW" data-splitcolor="Silver">BMW - Silver</div>
       <div class="elem" data-splittitle="Fiat" data-splitcolor="Silver">Fiat - Silver</div>
       <div class="elem" data-splittitle="Fiat" data-splitcolor="Red">Fiat - Red</div>
       <div class="elem" data-splittitle="BMW" data-splitcolor="Orangered">BMW - Orangered</div>
       ... ...
       ...

    </div>

I want to achieve the following:

    <div class="the-elements">
    
       <div class="elem" data-splittitle="Alfa Romeo" data-splitcolor="Red">Alfa Romeo - <span class="occurence">has 5 colors</span></div>
       <div class="elem" data-splittitle="BMW" data-splitcolor="Red">BMW - <span class="occurence">has 4 color</span></div>
       <div class="elem" data-splittitle="Fiat " data-splitcolor="Blue">Fiat - <span class="occurence">has 3 color</span></div>
       <div class="elem" data-splittitle="Alfa Romeo" data-splitcolor="Black">Alfa Romeo - <span class="occurence">has 5 color</span></div>
       <div class="elem" data-splittitle="Alfa Romeo" data-splitcolor="Silver">Alfa Romeo - <span class="occurence">has 5 color</span></div>
       <div class="elem" data-splittitle="Alfa Romeo" data-splitcolor="Some Color">Alfa Romeo - <span class="occurence">has 5 color</span></div>
       <div class="elem" data-splittitle="Alfa Romeo" data-splitcolor="Some other Color">Alfa Romeo - <span class="occurence">has 5 color</span></div>
       <div class="elem" data-splittitle="BMW" data-splitcolor="Green">BMW - <span class="occurence">has 4 color</span></div>
       <div class="elem" data-splittitle="Zastava" data-splitcolor="Black">Zastava - <span class="occurence">has 1 color</span></div>
       <div class="elem" data-splittitle="BMW" data-splitcolor="Silver">BMW - <span class="occurence">has 4 color</span></div>
       <div class="elem" data-splittitle="Fiat" data-splitcolor="Silver">Fiat - <span class="occurence">has 3 color</span></div>
       <div class="elem" data-splittitle="Fiat" data-splitcolor="Red">Fiat - <span class="occurence">has 3 color</span></div>
       <div class="elem" data-splittitle="BMW" data-splitcolor="Orangered">BMW - <span class="occurence">has 4 color</span></div>
       ... ...
       ...

    </div>

The method i want to achieve the above is by counting how many times the first part appears. For example, i count n times [first part] which also means there are equal number of n colors for that item, since colors are unique for each [first part].

So what i am looking for is to count the occurrence of [first part]. I have searched Stack Overflow for similar q/a like: this, this, this or this

So i think of doing something like this:

    // 1-make a nodelist of the elements i want
    let elementNodeList = document.querySelectorAll('.elem'); 
 
    // 2-turn the nodelist to array so i can use array functions like reduce, filter, etc
    let elementArray = Array.from(elementNodeList); 

    // 3-loop my elements
    elementArray.forEach((elem) => {

        // 4-get the splittitle of the element
        let elemSplitTitle = elem.dataset.splittitle;

        // 5-compare and store this element splittitle against the entire array of elements for occurrence
        let numOfOccurance = getOccurrence(productsArray, elemSplitTitle );
        console.log(numOfOccurance); 
        // 6-display the result
        elem.querySelector('.occurence').textContent = `IN ${numOfOccurance} COLORS`;
    });

    function getOccurrence(array, value) {
      return array.filter((v) => (v === value)).length;
    }

But the result is always 0. Obviously there is something i do not understand and i need some help to make it clear. I tried this also with

    function getOccurrence(array, value) {
       var count = 0;
       array.forEach((v) => (v === value && count++));
       return count;
    }


// 1-make a nodelist of the elements i want
let elementNodeList = document.querySelectorAll('.elem'); 

// 2-turn the nodelist to array so i can use array functions like reduce, filter, etc
let elementArray = Array.from(elementNodeList); 

// 3-loop my elements
elementArray.forEach((elem) => {

    // 4-get the splittitle of the element
let elemSplitTitle = elem.dataset.splittitle;

    // 5-compare and store this element splittitle against the entire array of elements for occurrence
    let numOfOccurance = getOccurrence(elementArray, elemSplitTitle );
console.log(numOfOccurance); 
    // 6-display the result
elem.querySelector('.occurence').textContent = `IN ${numOfOccurance} COLORS`;
});

function getOccurrence(array, value) {
  return array.filter((v) => (v === value)).length;
}
    <div class="the-elements">
    
       <div class="elem" data-splittitle="Alfa Romeo" data-splitcolor="Red">Alfa Romeo - <span class="occurence">has 5 colors</span></div>
       <div class="elem" data-splittitle="BMW" data-splitcolor="Red">BMW - <span class="occurence"></span></div>
       <div class="elem" data-splittitle="Fiat " data-splitcolor="Blue">Fiat - <span class="occurence"></span></div>
       <div class="elem" data-splittitle="Alfa Romeo" data-splitcolor="Black">Alfa Romeo - <span class="occurence"></span></div>
       <div class="elem" data-splittitle="Alfa Romeo" data-splitcolor="Silver">Alfa Romeo - <span class="occurence"></span></div>
       <div class="elem" data-splittitle="Alfa Romeo" data-splitcolor="Some Color">Alfa Romeo - <span class="occurence"></span></div>
       <div class="elem" data-splittitle="Alfa Romeo" data-splitcolor="Some other Color">Alfa Romeo - <span class="occurence"></span></div>
       <div class="elem" data-splittitle="BMW" data-splitcolor="Green">BMW - <span class="occurence"></span></div>
       <div class="elem" data-splittitle="Zastava" data-splitcolor="Black">Zastava - <span class="occurence"></span></div>
       <div class="elem" data-splittitle="BMW" data-splitcolor="Silver">BMW - <span class="occurence"></span></div>
       <div class="elem" data-splittitle="Fiat" data-splitcolor="Silver">Fiat - <span class="occurence"></span></div>
       <div class="elem" data-splittitle="Fiat" data-splitcolor="Red">Fiat - <span class="occurence"></span></div>
       <div class="elem" data-splittitle="BMW" data-splitcolor="Orangered">BMW - <span class="occurence"></span></div>
       ... ...
       ...

    </div>

Solution

  • There is issue in getOccurence method. You are comparing <div></div> element with String like Alfa Romeo.

    Here is improved version of getOccurence:

        function getOccurrence(array, value) {
      return array.filter((v) => (v.dataset.splittitle == value)).length;
    }

    All the code:

    // 1-make a nodelist of the elements i want
let elementNodeList = document.querySelectorAll('.elem'); 

// 2-turn the nodelist to array so i can use array functions like reduce, filter, etc
let elementArray = Array.from(elementNodeList); 

// 3-loop my elements
elementArray.forEach((elem) => {

    // 4-get the splittitle of the element
let elemSplitTitle = elem.dataset.splittitle;
    // 5-compare and store this element splittitle against the entire array of elements for occurrence
    let numOfOccurance = getOccurrence(elementArray, elemSplitTitle );
console.log(numOfOccurance); 
    // 6-display the result
elem.querySelector('.occurence').textContent = `IN ${numOfOccurance} COLORS`;
});

function getOccurrence(array, value) {
  return array.filter((v) => (v.dataset.splittitle == value)).length;
}
    <div class="the-elements">
    
       <div class="elem" data-splittitle="Alfa Romeo" data-splitcolor="Red">Alfa Romeo - <span class="occurence">has 5 colors</span></div>
       <div class="elem" data-splittitle="BMW" data-splitcolor="Red">BMW - <span class="occurence"></span></div>
       <div class="elem" data-splittitle="Fiat " data-splitcolor="Blue">Fiat - <span class="occurence"></span></div>
       <div class="elem" data-splittitle="Alfa Romeo" data-splitcolor="Black">Alfa Romeo - <span class="occurence"></span></div>
       <div class="elem" data-splittitle="Alfa Romeo" data-splitcolor="Silver">Alfa Romeo - <span class="occurence"></span></div>
       <div class="elem" data-splittitle="Alfa Romeo" data-splitcolor="Some Color">Alfa Romeo - <span class="occurence"></span></div>
       <div class="elem" data-splittitle="Alfa Romeo" data-splitcolor="Some other Color">Alfa Romeo - <span class="occurence"></span></div>
       <div class="elem" data-splittitle="BMW" data-splitcolor="Green">BMW - <span class="occurence"></span></div>
       <div class="elem" data-splittitle="Zastava" data-splitcolor="Black">Zastava - <span class="occurence"></span></div>
       <div class="elem" data-splittitle="BMW" data-splitcolor="Silver">BMW - <span class="occurence"></span></div>
       <div class="elem" data-splittitle="Fiat" data-splitcolor="Silver">Fiat - <span class="occurence"></span></div>
       <div class="elem" data-splittitle="Fiat" data-splitcolor="Red">Fiat - <span class="occurence"></span></div>
       <div class="elem" data-splittitle="BMW" data-splitcolor="Orangered">BMW - <span class="occurence"></span></div>
       ... ...
       ...

    </div>