Array with repeating structure

Question

I am creating a script that would show the keys of my array, in the first attempt worked perfectly, but when I added but a while block, he did not execute and returned this error:

classificacao-v2.js:128 Uncaught TypeError: Cannot read property 'Period' of undefined at classificacao-v2.js:128

Realizing that my problem was in the variable 'n' that appeared as undefined, so I created other variables with different names for each structure. I wonder if it is possible to rewrite it more efficiently without having to repeat each block.

let GoldemStates = [{Period: ' 1°',Points:'300'}, {Period: ' 2°',Points:'250'}, {Period: ' 3°', Points:'155'}] let Chicago = [{Period: ' 1°',Points:'100'}, {Period: ' 2°',Points:'420'}, {Period: ' 3°', Points:'350'}] let Broklyn = [{Period: ' 1°',Points:'300'}, {Period: ' 2°',Points:'250'}, {Period: ' 3°', Points:'155'}] // Show the Teams icons('','Match Results ','div_titulo') let n = 0 icons('golden','Golden States', 'destaque_golden') //Team Title (Symbol, Team Name, CSS) //Goldem States Statistics do { icons('clock',GoldemStates[n].Period + ' Period | ' + 'Points ' + GoldemStates[n].Points ,'texto') // // Show period and points n ++ } while (n < GoldemStates.length); let d = 0 // <-------- CHANGE WHICH WOULD NEED //Chicago Bulls Statistics icones('bulls','Chicago Bulls', 'destaque_bulls')//Team Title (Symbol, Team Name, CSS) do { icons('clock',Chicago[d].Period + ' Period | ' + 'Points ' + Chicago[d].Points ,'texto')// Show period and points d ++ } while (d < Chicago.length);

Console Output

Hello, luis matheus! Welcome to SO! What is a goal of your code? could you write desired output as text? — StepUp
– StepUp, Commented Jan 3, 2020 at 20:09
@StepUp Hello, the desired output would be the image (which was successful), I would like to write my code in a way that does not need to repeat the while blocks. If I can have this same result with a different structure — luis matheus
– luis matheus, Commented Jan 3, 2020 at 20:15

Danielo515 · Accepted Answer · 2020-01-03 20:23:35Z

I think your code could be simpler, shorter and easier to read if you leave the iteration to array built in methods. That way you will remove the need to use an iteration variable and access each item:

GoldemStates.forEach( item => icons('clock',item.Period + ' Period | ' + 'Points ' + item.Points ,'texto') )

But we can do it eve better. Since all the teams render exactly the same, we can build a function that renders one single item and then let the methods specialized on iteration do their work. That way your code only takes care of rendering and the built-in methods takes care of iterating, separation of conerns:

const renderTeam = team => icons('clock',team.Period + ' Period | ' + 'Points ' + team.Points ,'texto') // Render part icons('golden','Golden States', 'destaque_golden') //Team Title (Symbol, Team Name, CSS) GoldemStates.forEach(renderTeam) icons('bulls','Chicago Bulls', 'destaque_bulls')//Team Title (Symbol, Team Name, CSS) Chicago.forEach(renderTeam)

Excellent was just what I wanted.Let me get this straight, you first declared a 'team' function and stored it in 'RenderTeam', declared the array so that each item received 'RenderTeam' formatting ? I was wondering why you chose to declare the renderTeam variable as 'const', why not 'var' or 'let'
Since let and const became available I never used var again. They create a much more predictable binding without unexpected hoisting and such.
The function uses the arrow function syntax. It is called renderTeam, and team is it's first and only argument. The traditional syntax would be function renderTeam(team){ forEach is what is called a high horder function, a function that takes a function as argument or returns another function. What forEach does is take a function and executes it passing to it each array element. This is composition. Let me know if you need some reference links

Collectives™ on Stack Overflow

Array with repeating structure

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related