As a beginner in programming, I'm currently working on fetching API data using Axios and Vue.js. However, I'm facing difficulties in passing the data through Axios. Below is the Nodejs code snippet for requesting the API:
const rp = require('request-promise');
const requestOptions = {
method: 'GET',
uri: 'https://pro-api.coinmarketcap.com/v1/cryptocurrency/listings/latest',
qs: {
'start': '1',
'limit': '5000',
'convert': 'USD'
},
headers: {
'X-CMC_PRO_API_KEY': 'b54bcf4d-1bca-4e8e-9a24-22ff2c3d462c'
},
json: true,
gzip: true
};
rp(requestOptions).then(response => {
console.log('API call response:', response);
}).catch((err) => {
console.log('API call error:', err.message);
});
This is my vue js file code, I have sent the start and limits because I don't know how
After several attempts that didn't work, here is my first approach:
<div id="app">
{{ info }}
</div>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/vue"></script>
<script>
let app = new Vue({
el: '#app',
data () {
return {
info: null
}
},
mounted () {
let config = {'X-CMC_PRO_API_KEY': 'aaaaaa-bbbbbb-ccccc----ddjjk'};
axios.get('https://pro-api.coinmarketcap.com/v1/cryptocurrency/listings/latest', {headers: config})
.then(response => (this.info = response))
}
});
</script>
Subsequent attempts also did not yield the desired results:
<div id="app">
{{ info }}
</div>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/vue"></script>
<script>
let app = new Vue({
el: '#app',
data () {
return {
info: null
}
},
mounted () {
axios
let config = {'X-CMC_PRO_API_KEY': 'ccccccc'};
.get('https://pro-api.coinmarketcap.com/v1/cryptocurrency/listings/latest?start=1&limit=5000&convert=USD', {headers: config})
.then(response => (this.info = response))
}
});
</script>
Despite trying different approaches, I still can't figure out what's wrong. Any help or guidance would be greatly appreciated. Thank you in advance.