Search⌘ K
Home
Courses
Functional Programming Patterns With RamdaJS!

Making the AJAX Request

Explore how to integrate AJAX requests within a RamdaJS-based Wikipedia search app. Understand mapping URLs, fetching JSON responses, and preparing the data for UI updates in a functional programming style.

We'll cover the following...

We left off here

Javascript (babel-node)
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.

Javascript (babel-node)
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!

Javascript (babel-node)
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!