Как я могу загружать данные из службы, которая возвращает JSON, и создавать контент с помощью jQuery?

#javascript #jquery #json

Вопрос:

Я новичок в JS. поэтому я обращаюсь к вам, надеясь, что кто-нибудь сможет меня просветить!

Мне была предоставлена ссылка JSON, в которой перечислено много информации, и я должен создать html, используя как минимум 2 фрагмента информации из этой ссылки JSON.

Я уже импортировал свои таблицы стилей ( скрипт) в html, и я закодировал это в своем script.js :

 $.getJSON('myjsonlink', function(json) {
  console.log(json);
});

Если у кого-нибудь из вас, ребята, найдется минутка, чтобы протянуть мне руку помощи, это было бы здорово! Заранее большое вам спасибо.
Афина.

1. Пробовали ли вы что-нибудь читать из ответа JSON и обновлять содержимое HTML на основе этого?

2. Можете ли вы поделиться тем, как бы вы хотели отображать данные, поступающие из api или json-ссылки? Нравится структура

3. @Athena если я хорошо понял вопрос, вы хотите получить данные из файла JSON и обновить или добавить контент в свой html (веб-страницу) с помощью этих данных

4. @Rilla да, именно так! но когда я пытаюсь закодировать это на основе того, что я понял из своего курса, ничего не появляется..

5. @NikhilSingh Я хотел бы сделать что-то действительно простое (затем оформить его с помощью css). Я должен представить вселенную аниме «Наруто», так что, по сути, это будет заголовок H1, возможно, интерактивная кнопка для загрузки данных, а затем просто изображения, заголовки и краткое описание аниме (которые перечислены в ссылке json). Я не знаю, очень ли я понятен.. Я надеюсь на это

Ответ №1:

Есть несколько проблем с тем, как вы считываете данные и отображаете их:

В ответе нет naruto свойства, оно есть results .
img недопустимое свойство, оно должно быть image_url вместо.

Давайте это исправим:

 $('#get-data').click(function() {
  var showData = $('#show-data');
  $.getJSON('https://api.jikan.moe/v3/search/anime?q=naruto', function(data) {
    var naruto = data.results;
    for (var i = 0; i < naruto.length; i  ) {
      var anime = naruto[i];
      var html = '<div class="card">'   '<img src="'   anime.image_url   '">'   '<div class="cardcontainer">'   '<p>'   anime.title   '</p>'   '<p>'   anime.synopsis   '</p>'   '</div>'   '</div>';
      showData.append(html);
    }
  });
});

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="get-data">Load Data</button>
<div id="show-data"></div>

1. должен ли я использовать <div class=»card»> или «cardcontainer» для отображения данных json …? Я не знаю

2. Я думаю, что у меня проблема с тем, как конкретно создать мою «карточку класса div» для загрузки и окончательного отображения моих данных…

3. @Athena если вы скопируете и вставите точный код, он должен просто работать. Я не уверен, что вы подразумеваете под использованием card или cardcontainer , это зависит от вашей таблицы стилей и классов CSS, в которых нет фиксированных / предопределенных классов.

4. Я скопировал вставил код, но ничего не происходит, когда я нажимаю на кнопку «загрузить данные» на моей веб-странице. Что я должен сделать, чтобы показать данные ссылки json?

5. Не могли бы вы поделиться своим кодом в jsfiddle? Если вы запустите фрагмент кода в stackoverflow, он загружается и работает должным образом!