Can't get object out of array for display

I'm trying to build a simple search interface for a dataset that I have created.

I have followed the Lunr guides to create an index. I put an input box on my webpage that gets the search value typed by the user, then runs that value against the index.

When I run console.log(results[0]) - I happily get the right result in my console:

The problem comes when I try to get "legal and legislation compliance" to show up on my webpage. Two things happen:

When I try to output console.log(results[0].ref) to the console, the program freezes and I can't type anymore.

When I try to output document.getElementById("demo").innerHTML= results[0] to the webpage I get [object object] - which is surprising because the console line gives the actual data associated to the object.

var documents = [{
    "TooltipInfo": "administration - administration general: 2 years 5 years de: ",
    "Category": "None1",
  },
  {
    "TooltipInfo": "administration - appointment books, diaries, desk calendars: 1 years 0 years de: ",
    "Category": "None2",
  },
  {
    "TooltipInfo": "administration - correspondance day files: 1 years 0 years de: ",
    "Category": "None3",
  },
  {
    "TooltipInfo": "legislation and directives - general: 2 years 0 years de: ",
    "Category": "Legal & Legislative Compliance",
  }
]

var idx = lunr(function() {
  this.ref('Category')
  this.field('TooltipInfo')

  documents.forEach(function(doc) {
    this.add(doc)
  }, this)
})



var searchInput = document.querySelector('#search-input')
searchInput.addEventListener('keyup', function() {
  var results = idx.search(searchInput.value)
  // console.log(results[0].ref)

  // var results2 = results.forEach(function(item){return item})
  document.getElementById("demo").innerHTML = results[0]
})

<script src="https://unpkg.com/lunr/lunr.js"></script>
<input type="search" id="search-input" placeholder="Search">

<p id="demo"></p>

How do I get the search result to show up on my webpage?

Solution

You should use a value for innerHTML. Here results[0] is a object. So this should be document.getElementById("demo").innerHTML = results[0].ref

var documents = [{
    "TooltipInfo": "administration - administration general: 2 years 5 years de: ",
    "Category": "None1",
  },
  {
    "TooltipInfo": "administration - appointment books, diaries, desk calendars: 1 years 0 years de: ",
    "Category": "None2",
  },
  {
    "TooltipInfo": "administration - correspondance day files: 1 years 0 years de: ",
    "Category": "None3",
  },
  {
    "TooltipInfo": "legislation and directives - general: 2 years 0 years de: ",
    "Category": "Legal & Legislative Compliance",
  }
]

var idx = lunr(function() {
  this.ref('Category')
  this.field('TooltipInfo')

  documents.forEach(function(doc) {
    this.add(doc)
  }, this)
})



var searchInput = document.querySelector('#search-input')
searchInput.addEventListener('keyup', function() {
  var results = idx.search(searchInput.value)
  //console.log(results[0])

  // var results2 = results.forEach(function(item){return item})
  document.getElementById("demo").innerHTML = results[0].ref;
})

<script src="https://unpkg.com/lunr/lunr.js"></script>
<input type="search" id="search-input" placeholder="Search">

<p id="demo"></p>