How to Use JavaScript Fetch to Display API Results in HTML

<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-      scale=1.0">    <title>Rick and Morty Data</title>    <script src=’index.js’ defer></script>  </head>  <body>    <div id=’rick-and-morty-characters’></div>  </body></html>
 { "info": {   "count": 394,  "pages": 20,  "next": "",  "prev": "" },  "results": [ {  "id": 1,  "name": "Rick Sanchez",  "status": "Alive",  "species": "Human",  "type": "",  "gender": "Male",   "origin": {  "name": "Earth",  "url": ""  },   "location": {   "name": "Earth",   "url": ""  },  "image": "",  "episode": [    "",    "",    // ...   ],   "url": "",   "created": "2017-11-04T18:48:46.250Z"  },  // ... ]}
fetch(‘’)   .then(response => response.json())   .then(characters => showCharacters(characters.results));
showCharacters = characters => {  const charactersDiv = document.querySelector(‘#rick-and-morty-  characters’);  characters.forEach(character => {    const characterElement = document.createElement(‘p’);    characterElement.innerText = `Character Name: ${}`;    charactersDiv.append(characterElement);  });}




Data Engineer | Software Engineer

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

A Deep Dive into Web Components

Lazy loading non-routable Angular modules — Imperative & Declarative pattern

React: import React, { Panic, Over } from “react”;

Performance Testing using Artillery

How To Make Better Queries With React Query

elevated highway passing straight through a large city

// from Twitter

Testing Vue with Jest part — II

Someday You Will Have Forgotten More Javascript than Most People Know

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Jack P

Jack P

Data Engineer | Software Engineer

More from Medium

Peaky Blinders & Fetch!

A High-Level Overview of javascript


Creating my first wed application in Javascript.