Converting object attributes to array to HTML using .map()

Question

I'm creating an object, putting the attributes of that object into an array and then mapping the array to HTML output and I end up with line after line of commas? Where are these commas coming from?

let results = []

class Polygon {
  constructor() {
    this.name = "Hexagon"
    this.edges = 6
    this.size = 1
  }
  setName(value) {
    this.name = value
  }
  setEdges(value) {
    this.edges = value
  }
  setSize(value) {
    this.size = value
  }
  getArea() {
    return this.size * this.size
  }
}

let shape = new Polygon()
shape.setName("Square")
shape.setEdges(4)
shape.setSize(6)

results.push(shape.name)
results.push(shape.edges)
results.push(shape.size)
results.push(shape.getArea())

console.log(results)

resultsDiv = document.querySelector('#results')
resultsDiv.innerHTML = results.map(r => '<p>' + r + '</p>')

Here's the fiddle with the HTML: https://jsfiddle.net/ruzel/qyrczkup/3/

sjahan · Accepted Answer · 2018-08-15 17:20:48Z

5

map returns another array and when you pass it to innerHTML, it becomes a string version of it.

Just try it: console.log(results.map(r => '' + r + '').toString()) returns: Square,4,6,36

To solve this, just transform that array to a string properly before setting it as HTML:

resultsDiv.innerHTML = results.map(r => '<p>' + r + '</p>').join('')

answered Aug 15, 2018 at 17:20

sjahan

5,9804 gold badges24 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Akrion · Accepted Answer · 2018-08-15 17:28:20Z

1

You can also resolve this with reduce and template string since map returns an array and InnerHTML does toString on the array:

resultsDiv.innerHTML = results.reduce((r,c) => r.concat(`<p>${c}</p>`), '')

answered Aug 15, 2018 at 17:28

Akrion

18.6k1 gold badge38 silver badges58 bronze badges

Collectives™ on Stack Overflow

Converting object attributes to array to HTML using .map()

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related