How to decode html entities, I am unable to do so? - html

Question

here is my codepen https://codepen.io/syedsadiqali/full/BwaMEW.
I'm trying to make a Wikipedia viewer project by freecodecamp. everything is working good except I the snippets from the Wikipedia API, the html entities can't be decoded and span tags can't be replaced. I tried many things. help needed, please.
HTML
<div class="container">
<div class="row row1">
<div class="col-md-6 text-center">
<div class="text-center">
<h2 class="text-center">Welcome to <h2><h1><br> Wikipedia Viewer Project <br> </h1><h2>Search Something Random<br>or<br> Enter Value below.</h2>
</div>
<input type="text" id="querybox">
<div>
<button class="btn btn-primary" id="querybutton">Search</button>
<div>
<a class="btn btn-primary" href="https://en.wikipedia.org/wiki/Special:Random" target="_blank">Open Random Page</a>
</div>
<div class="data" id="put"></div>
</div>
</div>
<div class="col-md-6">
<div id="target" class="list-group"></div>
<script type="x-tmpl-mustache" id="template">
{{#search}}<h4 class="list-group-item-heading">{{title}}</h4><p class="list-group-item-text">{{{snippet}}}</p>{{/search}}
</script>
</div>
</div>
<div class="row">
</div>
<footer>
<h3 class='text-center'>Made with love by Syed Source Code would be soon available to you on my Github</h3>
</footer>
</div>
CSS
#import url('https://fonts.googleapis.com/css?family=Pacifico');
.row1{
font-family:"Pacifico",sans-serif;
}
.btn{
margin-top:10px;
padding:20px;
font-size:30px;
}
.row{
margin-top:20px;
}
input{
font-family:sans-serif!important;
}
JavaScript
$("#querybutton").on("click",function(){
data=document.getElementById("put"); query=document.getElementById("querybox").value;
url="https://wikipedia.org/w/api.php?action=query&format=json&prop=&list=search&srsearch=" + query + "&callback=?";
$.getJSON(url,function(json){
var view=json.query;
var template = document.getElementById('template').innerHTML;
Mustache.parse(template);
// render the data into the template
var rendered = Mustache.render(template,view);
//Overwrite the contents of #target with the rendered HTML
document.getElementById('target').innerHTML = rendered;
});
});
Result
https://codepen.io/syedsadiqali/full/BwaMEW

Answer 1

as #Paul Abbott commented I needed to use {{{snippet}}} triple mustache to render the data from Object as HTML. thanks for the answer, this answer I'm just writing to close this Question Right Answer was given by #PaulAbbott. thanks again.