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": "https://rickandmortyapi.com/api/character/?page=2",  "prev": "" },  "results": [ {  "id": 1,  "name": "Rick Sanchez",  "status": "Alive",  "species": "Human",  "type": "",  "gender": "Male",   "origin": {  "name": "Earth",  "url": "https://rickandmortyapi.com/api/location/1"  },   "location": {   "name": "Earth",   "url": "https://rickandmortyapi.com/api/location/20"  },  "image": "https://rickandmortyapi.com/api/character/avatar/1.jpeg",  "episode": [    "https://rickandmortyapi.com/api/episode/1",    "https://rickandmortyapi.com/api/episode/2",    // ...   ],   "url": "https://rickandmortyapi.com/api/character/1",   "created": "2017-11-04T18:48:46.250Z"  },  // ... ]}
fetch(‘https://rickandmortyapi.com/api/character/’)   .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: ${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

//platform.twitter.com/widgets.js from Twitter https://twitter.com/krushfitnessca

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

HOW WEB EVENTS BEHAVE IN JAVASCRIPT

Creating my first wed application in Javascript.