leahgarrett/json.md Secret

## json.md

      
    Raw
  

              json.md
            
          
    JSON

Definition


In computing, JavaScript Object Notation (JSON) is an open-standard file format that uses human-readable text to transmit data objects consisting of attribute–value pairs and array data types (or any other serializable value).
https://en.wikipedia.org/wiki/JSON


Example from https://randomuser.me/api/
{
results: [
    {
        gender: "female",
        name: {
            title: "miss",
            first: "sofia",
            last: "thomsen"
        },
        location: {
            street: "4983 færgevej",
            city: "rønnede",
            state: "danmark",
            postcode: 30960,
            coordinates: {
                latitude: "-33.1601",
                longitude: "77.6261"
            },
            timezone: {
                offset: "0:00",
                description: "Western Europe Time, London, Lisbon, Casablanca"
            }
        },
        email: "sofia.thomsen@example.com",
        login: {
            uuid: "ef1773b2-3df0-4936-819d-9c2c23e78627",
            username: "ticklishlion791",
            password: "minerva",
            salt: "10bJoAbf",
            md5: "607025bf0f396eb4fbfb7aa2e8c20235",
            sha1: "695782eaab5c1cca91854d2b51a080ca43ac4905",
            sha256: "3cf96527537fde7faacc7fd52bba60302a67eedaf36d86a2bd0a50a8e67079ae"
        },
        dob: {
            date: "1953-01-31T03:50:34Z",
            age: 66
        },
        registered: {
            date: "2014-06-03T03:11:20Z",
            age: 4
        },
        phone: "29453143",
        cell: "81888334",
        id: {
            name: "CPR",
            value: "914884-9082"
        },
        picture: {
            large: "https://randomuser.me/api/portraits/women/17.jpg",
            medium: "https://randomuser.me/api/portraits/med/women/17.jpg",
            thumbnail: "https://randomuser.me/api/portraits/thumb/women/17.jpg"
        },
        nat: "DK"
    }
    ],
    info: {
        seed: "1fd5703f1b086d73",
        results: 1,
        page: 1,
        version: "1.2"
    }
}
  
To access a picture of the first element

results[0].picture.large.
We can create a HTML page with a container for displaying the json data loaded from the API.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <h1>Random People</h1>

  <div id="container"></div>
  
  <script src="json.js"></script>
</body>
</html>
let data = '';
fetch('https://randomuser.me/api/?results=50')
  .then(function(response) {
      console.log(response)
    return response.json();
  })
  .then(function(myJson) {
        data = myJson;
        console.log(data)
        console.log(data.results.length);
        let container = document.querySelector("#container");

        data.results.forEach(function(result) {
        let newImg = document.createElement("img");
        newImg.src = result.picture.large;
        console.log(result.picture.large)
        container.appendChild(newImg);
    });
  });

  
Challenge


Copy the HTML and javascript examples and get them working
Refactor the above example to move the forEach loop into a function
Currently we are only displaying the images. Create a div to display a person that also includes:

name
address
nationality
phone
username
age
registration date


Refactor your code. Look at how the code for the above step is organised.
Is there any repeated code you can generalise? Could you use a class to group related functions?
Add stlying so the person divs are displayed in a grid (you can use flex box for this effect)
Add buttons for sorting to display people by

age
time registered
last name
user name


Beast

Information for the following steps is in the API documentation https://randomuser.me/documentation

use  seed so the same data is displayed each time the page is reloaded
use a filter to display a specific nationality
add parameters to improve the passwords
see what the difference is with the pretty json format


Beast++

Create another HTML page and use another API (or two) and display the data.