Can't get object out of array for display

Question

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?

You should use .`.ref` since you store your value in `ref` try `document.getElementById("demo").innerHTML = results[0].ref` — Hakan Kose, Jul 23 '19 at 10:56
appreciate your help! that doesn't work for me though. when I add results[0].ref, it gives an error code. — oymonk, Jul 23 '19 at 13:35
On second thought you were right Hakan - I upvoted the answer that had your solution. Apologies for the early morning brain malfunction. — oymonk, Jul 23 '19 at 13:43

score 1 · Accepted Answer · answered Jul 23 '19 at 12:35

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>

thanks for your offer of help! I tried adding `document.getElementById("demo").innerHTML = results[0].ref;` but as you can see from your code snippet, it returns an error — oymonk, Jul 23 '19 at 13:33
if the value is between 0 to 2 then there is no error as you have 3 values in your list — tuhin47, Jul 23 '19 at 13:36
You are right! apologies, I hadn't opened the code snippet in the full window. Many, many thanks. — oymonk, Jul 23 '19 at 13:40
I also figured out that my debugger was "pausing on exceptions" - so it wouldn't let me complete the typing. thanks again for your help. — oymonk, Jul 23 '19 at 17:21

Can't get object out of array for display

1 Answers1