Отображение данных из API в аккордеоне - PullRequest
Новая
       0

Отображение данных из API в аккордеоне

2 голосов
/ 12 октября 2019

У меня есть некоторые данные из API, которые я отображаю на своей веб-странице. У меня также есть простой HTML для аккордеона. У меня есть 4 лота данных, и я хочу отображать только один лот на слайд на аккордеоне. Как бы я это сделал? Я хотел бы знать, как разделить данные для каждого слайда на основе моего кода. 

$( function() {
  $( "#top-stories" ).accordion();
});

fetch('https://api.nytimes.com/svc/topstories/v2/technology.json?api-key='')
.then((resp) => resp.json())
.then(function(data) {
   const accordionSlides = document.querySelectorAll(".accordion-slide");
   data.results.slice(0, 4).forEach((accordion, i) => {
    accordionSlides[i].innerHTML = `
      <h1>${accordion.title}</h1>
      <p>${accordion.url}</p>
      <p>${accordion.abstract}</p>
      <p>${accordion.published_date}</p>
      <img src="${accordion.multimedia[4].url}"/>`;
  })

})

<html>
 <head>
        <link rel="stylesheet" href="styles.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
        <script src="index.js"></script>
    </head>
    <body>
        <div id="top-stories">Top Stories</h1>
            <h3 class="accordion">Story 1</h3>
            <div class="panel">
                <div class="accordion-title"></div>
            </div>

            <h3 class="accordion">Story 2 - Collapsed</h3>
            <div class="panel">
                    <div class="accordion-title"></div>
            </div>

            <h3 class="accordion">Story 3 - Collapsed</h3>
            <div class="panel">
                    <div class="accordion-title"></div>
            </div>
            <h3 class="accordion">Story 4 - Collapsed</h3>
            <div class="panel">
                    <div class="accordion-title"></div>
            </div>
    </body>
</html>

Ответы [ 2 ]

1 голос
/ 12 октября 2019

Если вы открыты для использования библиотеки jquery-ui, должно работать следующее.

Прежде всего, ваш HTML должен выглядеть примерно так: 
<html>
 <head>
        <link rel="stylesheet" href="styles.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
        <script src="index.js"></script>
    </head>
    <body>
        <div id="top-stories">Top Stories</h1>
            <h3 class="accordion">Story 1</h3>
            <div class="panel">
                <div class="accordion-slide"></div>
            </div>

            <h3 class="accordion">Story 2 - Collapsed</h3>
            <div class="panel">
                    <div class="accordion-slide"></div>
            </div>

            <h3 class="accordion">Story 3 - Collapsed</h3>
            <div class="panel">
                    <div class="accordion-slide"></div>
            </div>
            <h3 class="accordion">Story 4 - Collapsed</h3>
            <div class="panel">
                    <div class="accordion-slide"></div>
            </div>
    </body>
</html>

Я изменил идентификаторы на классы и заменил кнопки тегами h3. Кроме того, я добавил ссылку на библиотеку jquery-ui.

И тогда JS будет в основном соответствовать предложению @marzelin с добавлением инициализации библиотеки jquery-ui accordin: 

$( function() {
    $( "#top-stories" ).accordion();
});

fetch('https://api.nytimes.com/svc/topstories/v2/technology.json?api-key="."')
  .then((resp) => resp.json())
  .then(function(data) {
     const accordionSlides = document.querySelectorAll(".accordion-slide");
     data.results.slice(0, 4).forEach((accordion, i) => {
      accordionSlides[i].innerHTML = `
        <h1>${accordion.title}</h1>
        <p>${accordion.url}</p>
        <p>${accordion.abstract}</p>
        <p>${accordion.published_date}</p>
        <img src="${accordion.multimedia[4].url}"/>`;
    })

  })
0 голосов
/ 12 октября 2019

изменить <div id="accordion"></div> на <div class="accordion-slide"></div>, а затем: 

fetch('https://api.nytimes.com/svc/topstories/v2/technology.json?api-key="."')
  .then((resp) => resp.json())
  .then(function(data) {
     // get all slides
     const accordionSlides = document.querySelectorAll(".accordion-slide");
     data.results.slice(0, 4).forEach((accordion, i) => {
      // insert content into a given slide
      accordionSlides[i].innerHTML = `
        <h1>${accordion.title}</h1>
        <p>${accordion.url}</p>
        <p>${accordion.abstract}</p>
        <p>${accordion.published_date}</p>
        <img src="${accordion.multimedia[4].url}"/>`;
    })

  })
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...