Попытка получить результаты API для отображения, не уверенный, что мне не хватает.

Casey спросил: 12 мая 2018 в 05:03 в: javascript

Я просто пытаюсь работать с API и просто показывать результаты в браузере.

Я установил расширение chrome для обхода проблемы CORS для тестирования, поэтому я "думаю", это не проблема, но я не могу заставить ее даже регистрировать результат? Не уверен, что мне не хватает?

У меня есть console.log (данные) в обратном вызове функции для получения api, но ничего не отображается?

const NAMEURL = "https://uzby.com/api.php"

// get data from api
function getDataFromApi(value, callback){
  const QUERY = {
    min:`${value}`,
    max:`${value}`
  }
  $.getJSON(NAMEURL, QUERY, callback)
}

function renderResult(result){
  return `${result}`;
}

// render results to page
function displayName(data){
  console.log(data);
  const results = renderResult(data);
  $('.nameResult').html(results);
}

// wait for user to submit
function watchSubmit() {
  $('.js-search-form').submit(event => {
    event.preventDefault();
    const queryTarget = $(event.currentTarget).find('#js-dropValue');
    const thisquery = queryTarget.val();
    getDataFromApi(thisquery, displayName);
  });
}
// running the watch submit function waiting for click
$(watchSubmit);

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>title</title>
  <link rel="stylesheet" href="style.css">
  <link rel="shortcut icon" type="image/png" href="CW-favicon.png">
</head>
<body>
  <div class="container">
    <header>
      <h1>Heading 1</h1>
    </header>
    <section role="main" id="main">
      <div class="titlerow">
        <h2>Tagline</h2>
      </div>
      <div class="buttonrow">
        <form action="#" class="js-search-form">
          <label for="js-dropValue">Number of Letters
          <select name="js-dropValue" id="js-dropValue" >
            <option value="choose">choose the number of letters</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
            <option value="11">11</option>
            <option value="12">12</option>
          </select>
          </label>
          <button type="submit">Create my name!</button>
        </form>
      </div>
      <div class="nameResult">
      </div>
    </section>
  </div>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="jquery-3.3.1.min.js"><\/script>')</script>
  <script src="script.js"></script>
</body>
</html>

1 ответ

Есть решение
Casey ответил: 14 мая 2018 в 06:06

@timHutchison дал мне большой совет, который помог мне. В итоге я просто использовал XMLHTTPRequest для выполнения ввода данных.