'How to solve "Unexpected token < in JSON at position 0"? [duplicate]

I'm trying to build an exchange website and it's my first time working with APIs, I call a an asynchrounous function the moment a user types in an amount so that JS can get the selected currency and request it's equivalent in all the other currencies, but it gives me an error "Unexpected token < in JSON at position 0". Here is the html -

const select = document.querySelectorAll('option');

const form = document.querySelector('form');
const output = document.querySelector('.output');
const input = document.querySelector('.input');

const getExchangeRates = async(currency) => {
    const base = ' https://freecurrencyapi.net/api/v2/latest';
    const query = `?apikey=${key}&base_currency=${currency}`;
    const response = await fetch(base + query);
    const data = await response.json();
    return data.data;
}

const currencyOptions = (data) => {
    const currencies = Object.keys(data);
    for (let i = 0; i < currencies.length; i++) {
        select.forEach(option => {
            option.insertAdjacentHTML("afterend", `<option value="Select currency">${currencies[i]}</option>`)
        })
    }
}





getExchangeRates('EUR')
    .then(data => currencyOptions(data))
const selected = document.querySelector('select');




input.addEventListener('keyup', () => {
    getExchangeRates(selected.value);
})
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <link rel="stylesheet" href="/Curs.md/style.css">
    <style>
        body {
            color: #444;
        }
    </style>
</head>

<body>
    <form class="form-currency container mt-4 mb-4 text-align-center">
        <select name="selectCurrency" id="selectCurrency" class="form-select select-currency">
            <option value="Select currency" selected>Select currency</option>
        </select>
        <input type="text" name="input" class="input">
        <select name="selectCurrency" id="selectCurrency" class="form-select select-currency">
            <option value="Select currency" selected>Select currency</option>
        </select>
        <input type="text" name="output" class="output">
    </form>





    <script src="/Curs.md/Scripts/exchangeData.js"></script>
    <script src="/Curs.md/Scripts/app.js"></script>

</body>

</html>
javascripthtmljson


Solution 1:[1]

It should be an issue of 404 Not being found or a server error from the API that you are calling.

Please try and reconfigure the API to solve this issue and make sure the API is returning JSON data.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Polus Fansare

Related Questions