Filter/search from api

JavaScript
1

I am trying to create a site where I fetch these quotes from this api

http://ron-swanson-quotes.herokuapp.com/v2/quotes/70

where I add each qoute into a card, each card must have card no and this qoute.

Now the tricky part comes in.

I want to filter each card on number, how can I do that. ?

Bellow is what I have done sofare.

// fetch api
	
	fetch('http://ron-swanson-quotes.herokuapp.com/v2/quotes/70')
   	 .then(result => result.json())
  	.then((res) => {

  // populate in each card

  		let display = '<br>';
  		res.forEach(function(res){
  			
  			display += `
					<div class="card">
						
						<h4>${res}</h4>
					</div>
  						`;

  		})  

// display cards

  		document.getElementById('display').innerHTML = display;
  })
2

Hi!

In the variable “res” you get an array of quotes. What do you mean by “…to filter each card on number?”

3

Lets say I use “res” as id how can I filter so If press 1 to 57 in a input field (this api is 57 long) so that only that is showing. ?

4

To do this, it’s better to use the for loop instead of the forEach function.

Here’s the code you need.

HTML

<input type="text" class="from">
<input type="text" class="to">
<button class="apply">Apply</button>
<div id="display"></div>

JavaScript

const fromInp = document.querySelector('.from');
const toInp = document.querySelector('.to');
const apply = document.querySelector('.apply');

apply.addEventListener('click', function() {
    const from = +fromInp.value;
    const to = +toInp.value;

    fetch('http://ron-swanson-quotes.herokuapp.com/v2/quotes/70')
        .then(result => result.json())
        .then((res) => {
            let display = '<br>';
            for(let i = from; i <= to; i++) {
                display += `
          <div class="card">
            
            <h4>${res[i]}</h4>
          </div>
              `;
            }

            // display cards

            document.getElementById('display').innerHTML = display;
        })
})