My API works well to display the top 100 cryptos but I’m trying to set up a custom search so I can search through those 100 cryptos as I type. Problem is, the code is not sticking to the params and the code barely returns searches. If it does return anything it’s just one crypto and that’s if I search with a single character.
<script>
import Header from './components/Header';
import CryptoList from './components/CryptoList';
import Spinner from './components/Spinner';
import Search from './components/Search.vue';
import axios from 'axios';
const API_KEY = 'd9b61769f787361d94b1baf0cad18a7d6c4f08ca';
export default {
data: () => ({
cryptoData: []
}),
computed: {
hasData() {
return !!this.cryptoData.length; //Boolean to test if crypto info is loaded
}
},
name: 'App',
components: {
Header,
CryptoList,
Spinner,
Search
},
mounted() {
axios
.get(`https://api.nomics.com/v1/currencies/ticker?key=${API_KEY}`, {
params: {
'per-page': '100',
'page': 1,
'rank': 1
}
})
.then((response) => {
this.cryptoData = response.data;
console.log(response.data);
})
.catch(function(error) {
console.log(error);
});
},
methods: {
onWordChange(searchTerm) {
this.search(searchTerm);
},
search(searchTerm) {
axios
.get(
`https://api.nomics.com/v1/currencies/ticker?key=${API_KEY}&ids=${searchTerm}`,
{
params: {
'per-page': '100',
'page': 1,
'rank': 1
}
}
)
.then((response) => {
this.cryptoData = response.data;
})
.catch(function(error) {
console.log(error);
});
}
}
};