Skip to content

Instantly share code, notes, and snippets.

@D2theR

D2theR/pubchem_vue.html

Created February 8, 2022 20:44
Show Gist options
  • Save D2theR/f7e724a90235d2a3bfc2487c709a6400 to your computer and use it in GitHub Desktop.
Save D2theR/f7e724a90235d2a3bfc2487c709a6400 to your computer and use it in GitHub Desktop.
Download ZIP
Generic VueJS and PubChem REST API Example using Axios
Raw
pubchem_vue.html
<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.14/vue.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js" crossorigin="anonymous"></script>
<style type="text/css">
body {
margin:15px;
}
#app {
border: 1px solid #ccc;
}
.text-center {
text-align:center;
}
.search-results {
padding:10px;
border:1px solid #ccc;
width: 45%;
} .box {
margin:15px;
text-align:center;
padding: 5px;
}
ul {
list-style:none;
margin-left: 30%;
margin-right: 30%;
}
li {
float:left;
} footer {
position:fixed;
bottom:0;
text-align:center;
align-content:center;
margin-left: 40%;
} footer a {
padding: 5px;
background: #333;
text-align:center;
}
a {
text-decoration:none;
color: #fff;
box-shadow: 4px 4px 8px 4px #ccc;
}
a:hover {
background:#fff;
color:#333;
}
</style>
<title>PubChem API Demo</title>
<body>
<div id="app">
<h1 class="text-center">Search PubChem API Using Vue & Axios</h1>
<div class="text-center">
<input type="text" placeholder="Search... Type your query and hit Enter." class="search-results" v-model="query" v-on:change="getSearchResults">
</div>
</div v-bind="infoWidget" v-on:change="getSearchResults">
<iframe id="pubchem-widget-id" class="pubchem-widget" v-on:change="getSearchResults" src="" frameBorder="0" style="width: 100%; height: 800px;"></iframe>
</div>
</body>
<script type="text/javascript">
const API_URL = "https://pubchem.ncbi.nlm.nih.gov/rest/autocomplete/compound/"
const WIDGET_URL = "https://pubchem.ncbi.nlm.nih.gov/compound/"
var pub_iframe = document.getElementById("pubchem-widget-id")
new Vue({
el:"#app",
data() {
return {
query:"",
infoWidget:"",
searchResults:[
]}
},
methods:{
getSearchResults: function(){
var app = this
var qry = this.query
console.log(qry)
axios.get(API_URL+this.query).then(function(res){
console.log(qry)
app.searchResults = res.data
pub_iframe.src = WIDGET_URL+qry+"#section=Names-and-Identifiers&embed=True"
console.log(app.infoWidget)
}).catch(function(e){
console.log("Error" + e)
})
}
}
})
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment