Skip to main content

Exercise 51

Create the following folder/file structure:

/ex_51
  |-- index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>JSON</title>
  </head>
  <body>
    <div id="jsonresponse"></div>
  </body>
</html>

index.html

Create a basic HTML document
Create a script tag on the document head element
Define a response variable and assign the following JSON object:

`{
  "title": "A New Hope", 
  "episode_id": 4, 
  "species": [
    "https://swapi.co/api/species/5/", 
    "https://swapi.co/api/species/3/", 
    "https://swapi.co/api/species/2/", 
    "https://swapi.co/api/species/1/", 
    "https://swapi.co/api/species/4/"
  ]
}`

Don't forget the `` as they are here to define that this is a JSON string
Transform this JSON object into a JavaScript one using JSON.parse
Select the jsonresponse id element
Add title, episode_id as jsonresponse content
Also iterate the response species and create a link for each item and assign the corresponding href
At the end you need to have the following HTML:

<div id="jsonresponse">
  <h1>A New Hope</h1>
  <p>Episode ID: 4</p>
  <a href="https://swapi.co/api/species/5/">Link 1</a>
  <a href="https://swapi.co/api/species/3/">Link 2</a>
  <a href="https://swapi.co/api/species/2/">Link 3</a>
  <a href="https://swapi.co/api/species/1/">Link 4</a>
  <a href="https://swapi.co/api/species/4/">Link 5</a>
</div>

Create the elements to match this structure

index.html