javascript endpoint

pytanie zadane 29 czerwca 2022 w JavaScript przez little_Mario Nowicjusz (140 p.)

Próbuję pobrać endpoint - kursy walut. JavaScript ma zwrócić informację do HTML, ale coś jest nie tak. poniżej html i js:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Kursy walut</title>

    <script src="script.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>

<h2 class="text-center pb-3">
    Kursy walut
</h2>

<h3 class="text-center pb-3">
    Wybierz pierwszą walutę
</h3>

<select id="amount1">
    <option value="USD">Dolar amerykanski</option>
    <option value="EUR">Euro</option>
    <option value="PLN">Polski zloty</option>
</select>

<h3 class="text-center pb-3">
    Wybierz drugą walutę walutę
</h3>

<select id="amount2">
    <option value="USD">Dolar amerykanski</option>
    <option value="EUR">Euro</option>
    <option value="PLN">Polski zloty</option>
</select>

<h3 class="text-center pb-3">
    -----------------------
</h3>

<button onclick="getResult()">Pobierz dane</button>

<h3 class="text-center pb-3">
    Oto kurs:
</h3>

<div id="result"></div>

</body>
</html>

function getResult() {


    const amount1 = document.getElementById("amount1").value;
    const amount2 = document.getElementById("amount2").value;

    axios.get("https://api.exchangerate.host/convert?from=" + amount1 +"&to" + amount2).then(response => {

        const result = response.data.text;
        document.getElementById("result").innerText = result;
    });
}

2 odpowiedzi

odpowiedź 29 czerwca 2022 przez spamator12 Nałogowiec (28,230 p.)

odpowiedź 30 czerwca 2022 przez VBService Ekspert (253,400 p.)
edycja 30 czerwca 2022 przez VBService

Link, który użyłeś w linii 7

axios.get("https://api.exchangerate.host/convert?from=" + amount1 +"&to" + amount2)

zwraca obiekt typu json

https://api.exchangerate.host/convert?from=USD&toUSD

{"motd":{"msg":"If you or your company use this project or like what we doing, please consider backing us so we can continue maintaining and evolving this project.","url":"https://exchangerate.host/#/donate"},"success":true,"query":{"from":"USD","to":"","amount":1},"info":{"rate":null},"historical":false,"date":"2022-06-30","result":null}

no i "zgubiłeś" znak = w linku

https://api.exchangerate.host/convert?from=USD&to=USD

{"motd":{"msg":"If you or your company use this project or like what we doing, please consider backing us so we can continue maintaining and evolving this project.","url":"https://exchangerate.host/#/donate"},"success":true,"query":{"from":"USD","to":"USD","amount":1},"info":{"rate":1},"historical":false,"date":"2022-06-30","result":1}

wygląda na to, że chodzi o pola

response.data.result;

lub

response.data.info.rate;

sprawdź tak:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<h2 class="text-center pb-3">
    Kursy walut
</h2>
 
<h3 class="text-center pb-3">
    Wybierz pierwszą walutę
</h3>
 
<select id="amount1">
    <option value="USD">Dolar amerykanski</option>
    <option value="EUR">Euro</option>
    <option value="PLN">Polski zloty</option>
</select>
 
<h3 class="text-center pb-3">
    Wybierz drugą walutę walutę
</h3>
 
<select id="amount2">
    <option value="USD">Dolar amerykanski</option>
    <option value="EUR">Euro</option>
    <option value="PLN">Polski zloty</option>
</select>
 
<h3 class="text-center pb-3">
    -----------------------
</h3>
 
<button onclick="getResult()">Pobierz dane</button>
 
<h3 class="text-center pb-3">
    Oto kurs:
</h3>
 
<pre id="result"></pre>

<script>
  function getResult() {
    const amount1 = document.getElementById("amount1").value,
          amount2 = document.getElementById("amount2").value;

    axios.get("https://api.exchangerate.host/convert?from=" + amount1 +"&to=" + amount2)
      .then(response => {
      console.log(response.data);
      document.getElementById("result").textContent = (JSON.stringify(response.data)).replaceAll(',', ',\n');

      document.getElementById("result").textContent += '\n\n' + response.data.result;
      document.getElementById("result").textContent += '\n' + response.data.info.rate;
    });
  }
</script>

komentarz 30 czerwca 2022 przez VBService Ekspert (253,400 p.)
edycja 30 czerwca 2022 przez VBService

Możesz też użyć Fetch API

<h2 class="text-center pb-3">
  Kursy walut
</h2>

<h3 class="text-center pb-3">
  Wybierz pierwszą walutę
</h3>

<select id="amount1">
  <option value="USD">Dolar amerykanski</option>
  <option value="EUR">Euro</option>
  <option value="PLN">Polski zloty</option>
</select>

<h3 class="text-center pb-3">
  Wybierz drugą walutę walutę
</h3>

<select id="amount2">
  <option value="USD">Dolar amerykanski</option>
  <option value="EUR">Euro</option>
  <option value="PLN">Polski zloty</option>
</select>

<h3 class="text-center pb-3">
  -----------------------
</h3>

<button onclick="getResult()">Pobierz dane</button>

<h3 class="text-center pb-3">
  Oto kurs:
</h3>

<pre id="result"></pre>

<script>
  async function getResult() { 
    const amount1 = document.getElementById("amount1").value,
          amount2 = document.getElementById("amount2").value,
          url = `https://api.exchangerate.host/convert?from=${amount1}&to=${amount2}`;

    console.log(amount1, amount2, url);

    const response = await fetch(url, { method: 'get' });
    const data = await response.json();

    console.log(data);
    document.getElementById("result").textContent = (JSON.stringify(data)).replaceAll(',', ',\n');

    console.log([...response.headers]);
    document.getElementById("result").textContent += '\n\n' + ([...response.headers]).toString().replaceAll(',', ',\n');

    document.getElementById("result").textContent += '\n\n' + data.result;
    document.getElementById("result").textContent += '\n' + data.info.rate;
  }
</script>