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>
MefAldemisov
  • 867
  • 10
  • 21
MUTANGA AL SNAFU
  • 3
  • 3

3 Answers3

0

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>
deepak
  • 1,390
  • 1
  • 8
  • 12
MefAldemisov
  • 867
  • 10
  • 21
0

// 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) {
   console.log(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>
deepak
  • 1,390
  • 1
  • 8
  • 12
0

let AlfaRomeoNumber,BMWNumber,FiatNumber,ZastavaNumber;
BMWNumber = AlfaRomeoNumber = FiatNumber = ZastavaNumber = 0;


document.querySelectorAll('[data-split-title]').forEach(item => {
   
    if(item.dataset.splitTitle == 'AlfaRomeo') {
        AlfaRomeoNumber++;
    } else if(item.dataset.splitTitle == 'BMW') {
        BMWNumber++;
    } else if(item.dataset.splitTitle == 'Fiat') {
        FiatNumber++;
    } else if(item.dataset.splitTitle == 'Zastava') {
        ZastavaNumber++;
    }
    
}) 

document.querySelectorAll('[data-split-title = BMW]').forEach(item => {
    let newSpan = document.createElement('span');
    newSpan.classList.add('occurence')
    newSpan.innerHTML = `has ${BMWNumber} color`;
    item.innerHTML = `BMW - `;
    item.append(newSpan);
})

document.querySelectorAll('[data-split-title = AlfaRomeo]').forEach(item => {
    let newSpan = document.createElement('span');
    newSpan.classList.add('occurence')
    newSpan.innerHTML = `has ${AlfaRomeoNumber} color`;
    item.innerHTML = `AlfaRomeo - `;
    item.append(newSpan);
})

document.querySelectorAll('[data-split-title = Fiat]').forEach(item => {
    let newSpan = document.createElement('span');
    newSpan.classList.add('occurence')
    newSpan.innerHTML = `has ${FiatNumber} color`;
    item.innerHTML = `Fiat - `;
    item.append(newSpan);
})

document.querySelectorAll('[data-split-title = Zastava]').forEach(item => {
    let newSpan = document.createElement('span');
    newSpan.classList.add('occurence')
    newSpan.innerHTML = `has ${ZastavaNumber} color`;
    item.innerHTML = `Zastava - `;
    item.append(newSpan);
})
console.log(AlfaRomeoNumber,BMWNumber,FiatNumber,ZastavaNumber)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="the-elements">
        <div class="elem" data-split-title="AlfaRomeo" data-splitcolor="Red">Alfa Romeo - Red</div>
        <div class="elem" data-split-title="BMW" data-splitcolor="Red">BMW - Red</div>
        <div class="elem" data-split-title="Fiat" data-splitcolor="Blue">Fiat - Blue</div>
        <div class="elem" data-split-title="AlfaRomeo" data-splitcolor="Black">Alfa Romeo - Black</div>
        <div class="elem" data-split-title="AlfaRomeo" data-splitcolor="Silver">Alfa Romeo - Silver</div>
        <div class="elem" data-split-title="AlfaRomeo" data-splitcolor="Some Color">Alfa Romeo - Some Color</div>
        <div class="elem" data-split-title="AlfaRomeo" data-splitcolor="Some other Color">Alfa Romeo - Some other Color</div>
        <div class="elem" data-split-title="BMW" data-splitcolor="Green">BMW - Green</div>
        <div class="elem" data-split-title="Zastava" data-splitcolor="Black">Zastava - Black</div>
        <div class="elem" data-split-title="BMW" data-splitcolor="Silver">BMW - Silver</div>
        <div class="elem" data-split-title="Fiat" data-splitcolor="Silver">Fiat - Silver</div>
        <div class="elem" data-split-title="Fiat" data-splitcolor="Red">Fiat - Red</div>
        <div class="elem" data-split-title="BMW" data-splitcolor="Orangered">BMW - Orangered</div>
     </div>
    <script src="./addNumber.js"></script>
</body>
</html>
Misha Gyozalyan
  • 1