Можете ли вы помочь мне поставить бесконечный набор данных прокрутки из API? - PullRequest
Новая
       35

Можете ли вы помочь мне поставить бесконечный набор данных прокрутки из API?

0 голосов
/ 06 ноября 2019 
const app = document.getElementById('root');
const container = document.createElement('div');
container.setAttribute('class', 'container');
app.appendChild(container);

// Create a request variable and assign a new XMLHttpRequest object to it.
var request = new XMLHttpRequest();

*** Я изучаю синтаксис JavaScript, как использовать DOM и так далее! И я новичок, поэтому, если вы сможете объяснить более подробно, я буду благодарен! Здесь я просто выбираю первую страницу, я могу придумать, как это сделать, но это так сложно кодировать. И если не проблема, можете ли вы дать какой-нибудь дополнительный совет, чтобы изучить это ?! Я уже делаю freecodecamp. 

 var page = 1;
    // Open a new connection, using the GET request on the URL endpoint
    request.open('GET', 'https://api.punkapi.com/v2/beers?page='+page+'&per_page=80', true)

    request.onload = function() {
    // Begin accessing JSON data here
        var data = JSON.parse(this.response);

        if (request.status >= 200 && request.status < 400){
        // Log each beer's name 
        data.forEach(beer => {
            // Create a div with a card class
            const card = document.createElement('div');
            card.setAttribute('class', 'card');

            //Create an image and set the image content to the beer's image
            const image = document.createElement('img');
            image.src=beer.image_url;

            // Create an h1 and set the text content to the beer's name
            const h1 = document.createElement('h1');
            h1.textContent = beer.name;

            // Create a p and set the text content to the beer's description
            const p = document.createElement('p');
            beer.tagline = beer.tagline.substring(0, 300);// Limit to 300 chars
            p.textContent = `${beer.tagline}...` // End with an ellipses

            // Append the cards to the container element
            container.appendChild(card);

            // Each card will contain an image, h1 and a p
            card.appendChild(image);
            card.appendChild(h1);
            card.appendChild(p);
          });
        } else {
            textContent('error');
        }
    }

    // Send request
    request.send();
...