Help with function

`const txt = “But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and…”;
const counts = {};
const keys = [];

const setup=()=>{
const allwords = txt.split(/\W+/);
allwords.map(x=>{
if(counts[x] === undefined){
counts[x] = 1;
keys.push(counts);
}else {
counts[x]++;
}
});
}
setup();
console.log(keys);

Please don’t criticize my function so much, I’m just a beginner :wink:
So what this funct does? In a nutshell it counts words from const txt.
I get stuck. I need to display result(keys) in sreen, I mean like in html <div p … /p </div
I have read many information of createElement stuff etc. and I finally confused.
Thank you for answer.

I must have misunderstood what you want to achieve with your function. Do you need a function counting the number of words in a string?

function get_length(str) {
return str.split(' ').length;
}

Do you have your entire code (including html and javascript) such as on codepen? If so, provide link, so we give you a better answer. Currently, I think I understand what you want, but do not have any context to work with.

You may already know this, but by the end of your code, keys is an array of 20 duplicate objects. Each object looks like the following:

{ But: 1,
I: 1,
must: 1,
explain: 1,
to: 1,
you: 1,
how: 1,
all: 1,
this: 1,
mistaken: 1,
idea: 1,
of: 1,
denouncing: 1,
pleasure: 1,
and: 2,
praising: 1,
pain: 1,
was: 1,
born: 1,
’’: 1 }

Objects far more. I just cut the const txt so as not to flood

No. I want to display them like text in screen.

<p some: 5, the :2 </p
const txt = "But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and...";

const countWords = (text) => text
  .split(/\W+/)
  .reduce((count, word) => count[word]
  	? {...count, [word]: count[word] + 1}
    : {...count, [word]: 1},
  {})
  
const toHtml = (words) => Object.keys(words)
  .map(word => `<p>${word}: ${words[word]}</p>`)
  .join('\n')
 
const countedWords = countWords(txt)
const html = toHtml(countedWords)
document.body.innerHTML = html

https://jsfiddle.net/mgq3ws12/

Could you please explain in detail what did you write. Especially what $ mean. Thank you. There is typeError in document.body.innerHTML = html;

this expression `<p>${word}: ${words[word]}</p>` uses template literals and is equivalent to '<p>' + word + ': ' + words[word] + '</p>'

updated jsfiddle

Code description

data structures used:

for occurrences: dictionary
signature: { <word>: <number of occurrences> }

example:

{
    and: 2,
    or: 3,
    explain: 1
}

Logic Part

addWord()

adds word to list of occurrences
tools used: ternary operator
visualization

const addWord = (count, word) => {
  count[word]
  ? count[word] += 1
  : count[word] = 1
	return count
}

countWords()

takes in a piece of text and returns a list of all occurrences
visualization

const countWords = (text) => text
  .toLowerCase()
  .split(/\W+/)
  .filter( (word) => word )
  .reduce(addWord, {})

View Part

toRow()

takes in a list with words occurrences and a given word
and returns a table row
visualization

const toRow = (occurrences) => (word) =>
   '<tr>' +
  	   '<td>' + word + '</td>' +
       '<td>' + occurrences[word] + '</td>' +
   '</tr>'

toHtmlTable()

takes in a list of word occurrences and
returns a corresponding html table
tools used: Object.keys()
visualization

const toHtmlTable = (occurrences) => 
	'<table class="table table-striped">' +
  	    '<thead><tr><th>word</th><th>occurrences</th></tr></thead>' +
         Object.keys(occurrences)
           .map(toRow(occurrences))
           .join('\n') +
    '</table>'

render()

renders a given html string into a specified element
tools used: innerHTML

const render = (htmlString, mountPoint) => mountPoint.innerHTML = htmlString
2 Likes