2017-09-14 2 views
0

voici mon codepen https://codepen.io/syedsadiqali/full/BwaMEW. J'essaie de faire un projet de visionneuse Wikipédia par freecodecamp. Tout fonctionne bien sauf les extraits de l'API Wikipédia, les entités html ne peuvent pas être décodées et les balises span ne peuvent pas être remplacées. J'ai essayé beaucoup de choses. aide nécessaire, s'il vous plaît.Comment décoder des entités html, je suis incapable de le faire?

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}}<a href="https://en.wikipedia.org/?curid={{pageid}}" target="_blank" class="list-group-item"><h4 class="list-group-item-heading">{{title}}</h4><p class="list-group-item-text">{{{snippet}}}</p></a>{{/search}} 
</script> 
     </div> 
    </div> 
     <div class="row"> 

     </div> 
     <footer> 
    <h3 class='text-center'>Made with love by <a href="https://www.facebook.com/2k16syed" target="_blank"> Syed </a> Source Code would be soon available to you on my <a href="https://www.github.com/syedsadiqali" target="_blank">Github</a></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; 


}); 
}); 

Résultat

https://codepen.io/syedsadiqali/full/BwaMEW

+0

Vous avez besoin de '{{{snippet}}}' https://stackoverflow.com/questions/12834419/text-as-html-in-mustache-js –

+0

travaillé. frère. Merci beaucoup. répondez-moi, je vais accepter cela. –

Répondre

0

comme Abbott a commenté @ Paul que je devais utiliser {{{}}} extrait moustache triple pour rendre les données de l'objet au format HTML. merci pour la réponse, cette réponse que je suis en train d'écrire pour clore cette question Right Answer a été donnée par @PaulAbbott. Merci encore.