Create HTML table from JavaScript object

Question

I am a beginner of JavaScript and want to display an array of objects in HTML.

The format of the data is like this:

[
  {\"key\":\"apple\",\"value\":         


        

Answer 1

Array.map() combined with template literals comes in really handy for rendering HTML markup within Javascript for large objects in a scalable manner:

function tableMarkupFromObjectArray(obj) {

  let headers = `
  Index
  ${Object.keys(obj[0]).map((col) =>`
  ${col}`
  ).join('')}`

  let content = obj.map((row, idx) => `

      ${idx}
      ${Object.values(row).map((datum) => `
      ${datum}`
    ).join('')}
    
`).join('')

  let tablemarkup = `
  
    ${headers}
    ${content}
  
  `
  return tablemarkup
}


let myobj =[
  { "name": "apple", "rel": 1.90 },
  { "name": "berry", "rel": 1.7 },
  { "name": "banana", "rel": 1.5 },
  { "name": "cherry", "rel": 1.2 }
]

document.querySelector("#mydiv").innerHTML = tableMarkupFromObjectArray(myobj)

http://jsfiddle.net/4L7c5vad/