Блог

Главная - Вопросы по программированию - jQuery-AJAX Coins API

jQuery-AJAX Coins API

#jquery #ajax #api

#jquery #ajax #API

Вопрос:

Здравствуйте, это школьный проект (HTML, CSS, jQuery, AJAX), все, что я сделал, в порядке, но у меня есть две небольшие проблемы.

  1. Кнопка дополнительной информации: вместо того, чтобы показывать мне информацию для каждой монеты, она показывает мне ту же информацию для всех монет сразу.
  2. Кнопка поиска — не выполняется поиск, могу ли я узнать, что я здесь сделал не так? Это код:

 // -------- Show all the coins onload -------- //
$(document).ready(showAllCoins());

// --------------------------------- Show all fonts onload function --------------------------------- //
function showAllCoins() {
    $.ajax({
        url: "https://api.coingecko.com/api/v3/coins/list",
        dataType: "json",
        success: function (data) {
            // console.log(data);
            for (let i = 0; i < 100; i  ) {
                $(".coins").append(`
<div class="card">
<div class="card-body">
<span>
<p id="coin-sym"><strong>symbol:</strong> ${data[i].symbol}<br>
<strong>name:</strong> ${data[i].name}</p>
<button class="btn btn-primary btn-sm" data-toggle="collapse" data-target="#${data[i].id}" onClick="moreInfo('${data[i].id}')">More Info</button>
<div class="collapse" id="a${data[i].id}">details added here</div>
</span>
</div>
</div>
</div>
`)
            }
        }
    })
}


// --------------------------------- Search Function --------------------------------- //
function searchCoins() {
    $.ajax(
        {
            type: 'GET',
            datatype: 'json',
            url: "https://api.coingecko.com/api/v3/coins/"   searchInput.value,
            success: function (data) {
                searchCoin[0] = data
                $(".searchResult").html($(`.${searchInput}`));
                console.log(data)
            },
            error: function (error) {
                console.log("error : ", error);
            }
        }
    );
}

// ---------------------------------More info function --------------------------------- //
function moreInfo(id) {
    $.ajax({
        url: "https://api.coingecko.com/api/v3/coins/"   id,
        dataType: "json",
        success: function (data) {
            $(".card").append(`
<div class="card-body">
<div><img src=${data.image.small}/>
<p>Price List:</p>
<ul>
<li>${data.market_data.current_price.usd} $</li>
<li>${data.market_data.current_price.eur} €</li>
<li>${data.market_data.current_price.ils} ₪</li>
</ul>
</div>
`)
        }
    })
}  
 <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

</head>

<body>
    <div class="container-fluid" id="container">
        <div>
            <form class="form-inline">
                <input class="form-control" type="search" placeholder="Type something.." aria-label="Search"
                    id="searchInput">
                <button class="btn btn-success" type="button" id="searchButton" onclick="searchCoins()">Search</button>
            </form>
        </div>
        <div class="card-columns">
            <div class="coins" id="coinsLoad"></div>
        </div>
    </div>

</body>

</html>

Ответ №1:

Что касается второй проблемы, которую я не могу понять, потому что вы ссылаетесь на элемент с классом SearchResult, который я не вижу.

Для первой проблемы вам нужно изменить эту строку:

 $(".card").append(`

Для:

  $('#'   id).closest(".card").append(`

Это для того, чтобы показать подробную информацию только для нажатой кнопки. В любом случае я бы посоветовал избегать встроенных обработчиков событий.

 $(function () {
    // -------- Show all the coins onload -------- //
    showAllCoins();
});


// --------------------------------- Show all fonts onload function --------------------------------- //
function showAllCoins() {
    $.ajax({
        url: "https://api.coingecko.com/api/v3/coins/list",
        dataType: "json",
        success: function (data) {
            // console.log(data);
            for (let i = 0; i < 100; i  ) {
                $(".coins").append(`
            <div class="card">
                        <div class="card-body">
                        <span>
                        <p id="coin-sym"><strong>symbol:</strong> ${data[i].symbol}<br>
                <strong>name:</strong> ${data[i].name}</p>
                <button class="btn btn-primary btn-sm" data-toggle="collapse" data-target="#${data[i].id}" onClick="moreInfo('${data[i].id}')">More Info</button>
                <div class="collapse" id="${data[i].id}">details added here</div>
                </span>
                </div>
                </div>
                </div>
`)
            }
        }
    })
}


// --------------------------------- Search Function --------------------------------- //
function searchCoins() {
    var valTosearch = $('#searchInput').val()
    $.ajax(
            {
                type: 'GET',
                datatype: 'json',
                url: "https://api.coingecko.com/api/v3/coins/"   valTosearch,
                success: function (data) {
                    $(".searchResult").html($(`.${searchInput}`));
                    console.log(data)
                },
                error: function (error) {
                    console.log("error : ", error);
                }
            }
    );
}

// ---------------------------------More info function --------------------------------- //
function moreInfo(id) {
    $.ajax({
        url: "https://api.coingecko.com/api/v3/coins/"   id,
        dataType: "json",
        success: function (data) {
            if ($('#'   id).closest(".card").find('.card-body').length == 1) {
            $('#'   id).closest(".card").append(`
                  <div class="card-body">
                          <div><img src=${data.image.small}/>
                  <p>Price List:</p>
                  <ul>
                  <li>${data.market_data.current_price.usd} $</li>
                  <li>${data.market_data.current_price.eur} €</li>
                  <li>${data.market_data.current_price.ils} ₪</li>
                  </ul>
                  </div>
          `);
          }
        }
    })
}  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

<div class="container-fluid" id="container">
    <div>
        <form class="form-inline">
            <input class="form-control" type="search" placeholder="Type something.." aria-label="Search"
                   id="searchInput">
            <button class="btn btn-success" type="button" id="searchButton" onclick="searchCoins()">Search</button>
        </form>
    </div>
    <div class="card-columns">
        <div class="coins" id="coinsLoad"></div>
    </div>
</div>

Комментарии:

1. большое вам спасибо, все работает отлично 🙂 Я добавил функцию свертывания $(‘.content-collapse’).slideToggle(‘slow’); } Я также определил этот класс, но что происходит: при повторном нажатии на кнопку, чтобы свернуть его, он сворачивает его, но, кроме того, он добавляет под ним другую информацию.

2. фрагмент обновлен: больше нет ………… но, кроме того, он добавляет другую информацию под ним

3. Большое вам спасибо @gaetanoM, вы действительно помогли мне в функции «Дополнительная информация» 🙂