Making the AJAX Request

Transforming the request URL into an AJAX request and receiving JSON. (4 min. read)

We left off here

Press + to interact
index.js
getUrl.js
getInputValue.js
import 'bootstrap/dist/css/bootstrap.min.css';
import { pipe, tap } from 'ramda';
import getInputValue from './getInputValue';
import getUrl from './getUrl';
const makeUrlFromInput = pipe(
  getInputValue,
  getUrl,
  tap(console.warn)
);
const inputElement = document.querySelector('input');
inputElement.addEventListener('keyup', makeUrlFromInput);

And had working URL functionality.

widget

Next step is mapping that URL to an AJAX request and collecting the JSON response.

Rename makeUrlFromInput to searchAndRenderResults and edit it to look like this.

Press + to interact
index.js
getUrl.js
getInputValue.js
import 'bootstrap/dist/css/bootstrap.min.css';
import { pipe, tap } from 'ramda';
import getInputValue from './getInputValue';
import getUrl from './getUrl';
const searchAndRenderResults = pipe(
  getInputValue,
  getUrl,
  url =>
    fetch(url)
      .then(res => res.json())
      .then(console.warn)
);
const inputElement = document.querySelector('input');
inputElement.addEventListener('keyup', searchAndRenderResults);

We’ve simply renamed it and added a function that fetches the URL and logs the JSON response.

Don’t forget to change your event listener too!

Press + to interact
inputElement.addEventListener('keyup', searchAndRenderResults);

Here’s our result

widget

Looking good so far! We’re making the AJAX request and properly parsing/logging the response.

Next step is hooking it up with our UI!