Making a Results Component

Making a component that nicely formats our Wikipedia results. (6 min. read)

Now that we have JSON, let’s create a component that pretties it up!

Add Results.js to your directory.

Press + to interact
index.js
Results.js
getUrl.js
getInputValue.js
// nothing yet :D

Remember our Wikipedia search JSON’s shaped like this

Press + to interact
[
  "JavaScript",
  [
    "JavaScript",
    "JavaScript syntax",
    "JavaScript engine",
    "JavaScript library",
    "JavaScript InfoVis Toolkit",
    "JavaScript Style Sheets",
    "JavaScriptMVC",
    "JavaScript templating",
    "JavaScript framework",
    "JavaScript OSA"
  ],
  [
    "JavaScript (), often abbreviated as JS, is a high-level, interpreted programming language. It is a language which is also characterized as dynamic, weakly typed, prototype-based and multi-paradigm.",
    "The syntax of JavaScript is the set of rules that define a correctly structured JavaScript program.",
    "A JavaScript engine is a program or interpreter which executes JavaScript code. A JavaScript engine may be a traditional interpreter, or it may utilize just-in-time compilation to bytecode in some manner.",
    "A JavaScript library is a library of pre-written JavaScript which allows for easier development of JavaScript-based applications, especially for AJAX and other web-centric technologies.",
    "The JavaScript InfoVis Toolkit provides tools for creating Interactive Data Visualizations for the Web.",
    "JavaScript Style Sheets (JSSS) was a stylesheet language technology proposed by Netscape Communications Corporation in 1996 to provide facilities for defining the presentation of webpages.",
    "JavaScriptMVC is an open-source rich Internet application framework based on jQuery and OpenAjax. It extends those libraries with a model–view–controller architecture and tools for testing and deployment.",
    "JavaScript templating refers to the client side data binding method implemented with the JavaScript language.",
    "A JavaScript framework is an application framework written in JavaScript. It differs from a JavaScript library in its control flow: a library offers functions to be called by its parent code, whereas a framework defines the entire application design.",
    "JavaScript OSA, (originally JavaScript for OSA, abbreviated as JSOSA), is a freeware inter-process communication scripting language for the Macintosh computer."
  ],
  [
    "https://en.wikipedia.org/wiki/JavaScript",
    "https://en.wikipedia.org/wiki/JavaScript_syntax",
    "https://en.wikipedia.org/wiki/JavaScript_engine",
    "https://en.wikipedia.org/wiki/JavaScript_library",
    "https://en.wikipedia.org/wiki/JavaScript_InfoVis_Toolkit",
    "https://en.wikipedia.org/wiki/JavaScript_Style_Sheets",
    "https://en.wikipedia.org/wiki/JavaScriptMVC",
    "https://en.wikipedia.org/wiki/JavaScript_templating",
    "https://en.wikipedia.org/wiki/JavaScript_framework",
    "https://en.wikipedia.org/wiki/JavaScript_OSA"
  ]
]

It’s an array. Here’s the indices

  1. Query (what you searched for)
  2. Array of result names
  3. Array of summaries
  4. Array of links to results

Our component can take an array of this shape and return a nicely formatted list.

Edit Results.js

Press + to interact
index.js
Results.js
getUrl.js
getInputValue.js
export default ([query, names, summaries, links]) => `
  <h2>Searching for "${query}"</h2>
  <ul class="list-group">
    ${names.map(
      (name, index) => `
        <li class="list-group-item">
          <a href=${links[index]} target="_blank">
            <h4>${name}</h4>
          </a>
          <p>${summaries[index]}</p>
        </li>
      `
    )}
  </ul>
`;

Let’s go step by step.

  • It’s a function that takes an array of our expected elements: query, names, summaries, and links.

  • Using ES6 template literals, it returns an HTML string with a title and a list.

  • Inside the <ul> we map names to <li> tags, so one for each.

  • Inside those are <a> tags pointing to each result’s link. Each link opens in a new tab.

  • Below the link is a paragraph summary.

Import this in index.js and use it like so

Press + to interact
index.js
Results.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';
import Results from './Results';
const searchAndRenderResults = pipe(
  getInputValue,
  getUrl,
  url =>
    fetch(url)
      .then(res => res.json())
      .then(Results)
      .then(console.warn)
);
const inputElement = document.querySelector('input');
inputElement.addEventListener('keyup', searchAndRenderResults);

Pass the JSON straight to Results and log the result.

widget

Pretty cool, we’ve got our markup! Now let’s render it. Add a render function to your index.js.

Press + to interact
index.js
Results.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';
import Results from './Results';
const render = markup => {
  const resultsElement = document.getElementById('results');
  resultsElement.innerHTML = markup;
};
const searchAndRenderResults = pipe(
  getInputValue,
  getUrl,
  url =>
    fetch(url)
      .then(res => res.json())
      .then(Results)
      .then(console.warn)
);
const inputElement = document.querySelector('input');
inputElement.addEventListener('keyup', searchAndRenderResults);

And replace console.warn with render in your fetch.

Press + to interact
index.js
Results.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';
import Results from './Results';
const render = markup => {
  const resultsElement = document.getElementById('results');
  resultsElement.innerHTML = markup;
};
const searchAndRenderResults = pipe(
  getInputValue,
  getUrl,
  url =>
    fetch(url)
      .then(res => res.json())
      .then(Results)
      .then(render)
);
const inputElement = document.querySelector('input');
inputElement.addEventListener('keyup', searchAndRenderResults);

Check it out!

widget

Try it out. Each link opens in a new tab.