Блог

Я пытаюсь реализовать API good reads с помощью поиска, но я могу сделать запрос, но я не знаю, как его отобразить. Я попытался найти учебные пособия, но их не было.

Редактировать — Заставил его работать, спасибо всем <3

app.js

 var input = document.querySelector('.input_text');
var main = document.querySelector('#name');
var temp = document.querySelector('.author');
var desc = document.querySelector('.title');
var button= document.querySelector('.button');


document
  .querySelector('input[type="button"]')
  .addEventListener("click", function () {
  const input = document.querySelector('input[type="text"]').value;  fetch("https://v1.nocodeapi.com/lap/gr/ZXOgJZwIXeGBhScd/search?q="   input)
      .then((response) => response.json())
      .then(data => {
     console.log(data)
  var nameValue = data['obj_id'];
  var descValue = data['reasults'][0]['title'];

  reasults.innerHTML = nameValue;
  desc.innerHTML = "Desc - " descValue;
  input.value ="";
  
})

})
 

HTML

  <div class="input">
      <input type="text" placeholder="Enter the city" class="input_text">
      <input type="button" value="button" class="button">
    </div>
  </div>

  <div class="container">
    <div class="card">
      <h1 class="name" id="name"></h1>
      <p class="type"></p>
      <p class="title"></p>
    </div>
  </div>
<script src="app.js"></script>
</body>
</html>
 

извините за запутанный код при первом использовании API
Большое вам спасибо :).

Вы делаете почти все правильно, однако есть одна маленькая деталь. Когда вы используете json( ) функцию на Promise.prototype.then( )'s response , результатом снова будет обещание. Именно так это и работает, поэтому вам нужно будет снова использовать Promise.prototype.then( ) функцию для получения результата, чтобы получить фактические данные. Как показано ниже:

     button.addEventListener("click", function (name) {
  fetch(
    "https://v1.nocodeapi.com/lap/gr/ZXOgJZwIXeGBhScd/search?q="   input.value
  )
    .then((response) => response.json())
    .then((data) => console.log(data));
});
 

Вот пример, показывающий то же самое:

 document
  .querySelector('input[type="button"]')
  .addEventListener("click", function () {
  const input = document.querySelector('input[type="text"]').value;  fetch("https://v1.nocodeapi.com/lap/gr/ZXOgJZwIXeGBhScd/search?q="   input)
      .then((response) => response.json())
      .then((data) => console.log(data));
  }); 

 <input type="text">
<input type="button" value="Search"> 

Ответ от API находится внутри response.json() . Итак, чтобы проверить, что вы получаете желаемый ответ, вы можете попробовать сделать это и проверить консоль.

 button.addEventListener('click', function(name){
fetch('https://v1.nocodeapi.com/lap/gr/ZXOgJZwIXeGBhScd/search?q=' input.value)
.then(response => response.json()).then(data=>console.log(data))
})
 

Как только вы убедитесь, что это именно то, чего вы ожидаете, вашей следующей целью будет отображение данных на странице. Для этого посмотрите на структуру ответа и решите, что все вы собираетесь отображать. Затем вы можете использовать функцию для генерации требуемого HTML-кода, а затем добавить его как дочерний элемент в узел на вашей странице.

Вы можете либо собрать все в виде строки, вставляя данные везде, где требуется, а затем установить узлы контейнера .innerHTML в строку, которую вы создали.

В качестве альтернативы вы могли бы создать все узлы, используя такие команды, как document.createElement("div") структурировать их так, как вы хотите, и использовать .appendChild для отображения на странице

Вы можете попробовать использовать ajax таким образом, если вы не извлекаете ни одной строки, вам нужно зациклить свои данные

 $.get("url",function(data,status){
     var list = JSON.parse(data);
       //only loop for more than one row
      for(var  i = 0; i<list.lenvth; i  ){
             document.getElementById('title').innerHTML  = list[i].title;
       }
});