[Vuejs]-Highlighting search string in returned results

by

0👍

Try to convert the json array to string then replace the search value by that highlighted one :

computed: {
      filteredEntries() {
     return this.json.map(entry=>JSON.stringify(entry)).join('##').replace(this.search, `<span style='background: #f0adf0;'>${this.search}</span>`).split("##").map(entry=>JSON.parse(entry))
     }

}

json = [{
    "id": 10,
    "owner": "Debbie",
    "items": "GTX-200, IOI-209, UTF-120"
  },
  {
    "id": 14,
    "owner": "Greg",
    "items": "FVV-300, UPI-229, UDO-175"
  },
]

let search = "UPI"

let highlighted = json.map(entry => JSON.stringify(entry)).join('##').replace(search, `<span style='background: #f0adf0;'>${search}</span>`).split("##").map(entry => JSON.parse(entry))

console.log(highlighted)

Leave a comment