trying to create an array that prints out: how many there is of each value in an ARRAY

Question

info before: i have halfway succeded, as i managed to print out it and it didnt loop crazy, however i did not manage to find the reason why it still prints out a undefinded

HTML: <button id="btn">button</button>
<label id="textarea"></label>

       var tall = [4, 5, 2, 3, 4, 6, 1, 2, 0, 9, 7, 6, 8, 5, 6, 4, 2, 3, 5]
    var btn = document.getElementById("btn");
    tall.sort(function(a, b){return a-b})
    btn.onclick =  function(){
        
            for( var i = 0; i < tall.length; i++){
                a = 0;
            for(var j = 0; j<i ; j++){
                a++;
                tall.splice(i, 2)
                document.write("number "+tall[i]+" is "+ a+" times<br>")
                
            }

        }
    }

How exactly does the current output of `number 2 is 1 times / number 3 is 1 times / number 4 is 2 times` fall under "halfway succeeding" here, when those numbers make no sense already? — CBroe, Mar 22 '22 at 09:31
Does this answer your question? [Counting the occurrences / frequency of array elements](https://stackoverflow.com/questions/5667888/counting-the-occurrences-frequency-of-array-elements) — Lars Flieger, Mar 22 '22 at 09:32

Lars Flieger · Answer 1 · 2022-03-22T10:17:41.457

0

Here you go:

const list = document.querySelector('ul')
const button = document.querySelector('button')

const tall = [4, 5, 2, 3, 4, 6, 1, 2, 0, 9, 7, 6, 8, 5, 6, 4, 2, 3, 5]

// Cals result
const result = tall.reduce((res, value) => {
  if (value in res)
    res[value]++
    else
      res[value] = 1

  return res
}, {})

button.addEventListener('click', () => {
  list.innerHTML = ''
  // Add li element for each result
  Object.keys(result).forEach(res => {
    const li = document.createElement('li')
    li.textContent = `${res} occures ${result[res]} times`
    list.append(li)
  })
})

<button>Write data to list</button>
<ul>
  <ul>

This will give you the occurrences of each number in an object.

edited Mar 22 '22 at 10:17

answered Mar 22 '22 at 09:35

Lars Flieger

2,421
1
12
34

If you need help wrapping this into your UI. Let me know :) – Lars Flieger Mar 22 '22 at 09:35
i tried to use it in a doc.write() or a innerHTML but it returned out [object, object] i guess it only works in console? – edwin hennum Mar 22 '22 at 09:50
@edwinhennum No you can use it as well. Do you want me to update the answer? What kind of output do you want? – Lars Flieger Mar 22 '22 at 10:02
1

thanks for the response btw :), so i am creating an array that have values with same values, and i want to write it out in my html doc. so an example: 1 occures 2 times etc... – edwin hennum Mar 22 '22 at 10:07
@edwinhennum Added :) – Lars Flieger Mar 22 '22 at 10:17

score 0 · Accepted Answer · answered Mar 22 '22 at 09:38

we can use reduce to calculate how many times number is shown
then we can use Object.entries with forEach - to show data to UI

    var tall = [4, 5, 2, 3, 4, 6, 1, 2, 0, 9, 7, 6, 8, 5, 6, 4, 2, 3, 5]
    var btn = document.getElementById("btn");

    btn.onclick =  function(){
        const objectResult = tall.reduce((a,c) => (a.hasOwnProperty(c) ? {...a, [c]: a[c] + 1} : {...a, [c]: 1}), {});

        Object.entries(objectResult).forEach(([number, times]) => document.write(`number: ${number} is ${times} times<br>`))


    }

<button id="btn">button</button>
<label id="textarea"></label>

score 0 · Answer 3 · answered Mar 22 '22 at 09:44

Using the reduce function, you can iterate over your array and generate an output based on action you perform on each next Value in the Array. We start with an empty object, if we find that the nextValue is not yet stored we store it in that object with value 1, if we see that the nextValue already exists, we increment the count in the result.

const data = [4, 5, 2, 3, 4, 6, 1, 2, 0, 9, 7, 6, 8, 5, 6, 4, 2, 3, 5]

const result = data.reduce((result, nextValue) => {
  if (nextValue in result)
    result[nextValue]++
  else
    result[nextValue] = 1

  return result
}, {}) // initial result is an empty object set with ', {}'

console.log(result)

score 0 · Answer 4 · answered Mar 22 '22 at 09:51

0

var tall = [4, 5, 2, 3, 4, 6, 1, 2, 0, 9, 7, 6, 8, 5, 6, 4, 2, 3, 5];
    var map = tall.reduce(function(prev, cur) {
      prev[cur] = (prev[cur] || 0) + 1;
      return prev;
    }, {});
    console.log(map)

answered Mar 22 '22 at 09:51

AzukaRawr

1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Mar 22 '22 at 09:51

trying to create an array that prints out: how many there is of each value in an ARRAY

4 Answers4