Created
March 15, 2018 17:22
-
-
Save FlyteWizard/def4dcd44263d6cd24f9b8aae5a2462f to your computer and use it in GitHub Desktop.
CSC130 - Spring 2018
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Assignment 8</title> | |
| <style media="screen"> | |
| /* Makes the list black circles */ | |
| li { | |
| list-style-type: disc; | |
| } | |
| /* Makes the countries bold and larger without a list style */ | |
| .parent { | |
| list-style-type: none; | |
| font-size: 2em; | |
| font-weight: bold; | |
| padding-top: 1em; | |
| } | |
| /* make all the images the same width / height and adds padding */ | |
| .img { | |
| width: 50px; | |
| height: 25px; | |
| padding: 0 0 0 0.5em; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="jsonList"> | |
| <!-- Json goes here --> | |
| </div> | |
| <script type="text/javascript"> | |
| // Arrays start at index 0 | |
| var obj = [ | |
| { | |
| country: "Canada", | |
| img: "https://upload.wikimedia.org/wikipedia/commons/d/d9/Flag_of_Canada_%28Pantone%29.svg", | |
| alt: "Canada Flag", | |
| cities: [ | |
| { | |
| cityName: "Vancouver", | |
| img: "http://res.cloudinary.com/simpleview/image/upload/v1486505969/clients/vancouverbc/Aerial_Sunset_Vancouver_d3_copy_1bb86ed0-1edc-4cda-841d-0b033ca0bb72.jpg", | |
| alt: "Vancouver Landscape" | |
| }, | |
| { | |
| cityName: "Richmond", | |
| img: "https://upload.wikimedia.org/wikipedia/commons/thumb/d/d1/Richmond_BC_Skyline.jpg/1200px-Richmond_BC_Skyline.jpg", | |
| alt: "Richmond Landscape" | |
| }, | |
| { | |
| cityName: "Victoria", | |
| img: "https://www.hellobc.com/getmedia/5f968a97-eec9-48ff-9b3b-10f353fb7f44/1-2616-Victoria-Inner-Harbour.jpg.aspx", | |
| alt: "Victoria Landscape" | |
| } | |
| ] | |
| }, | |
| { | |
| country: "USA", | |
| img: "https://upload.wikimedia.org/wikipedia/en/a/a4/Flag_of_the_United_States.svg", | |
| alt: "USA Flag", | |
| cities: [ | |
| { | |
| cityName: "Seattle", | |
| img: "https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Space_Needle002.jpg/1200px-Space_Needle002.jpg", | |
| alt: "Seattle Landscape" | |
| }, | |
| { | |
| cityName: "New York", | |
| img: "https://lonelyplanetimages.imgix.net/mastheads/GettyImages-538096543_medium.jpg", | |
| alt: "New York Landscape" | |
| }, | |
| { | |
| cityName: "San Francisco", | |
| img: "https://secure.parksandresorts.wdpromedia.com/resize/mwImage/1/1200/600/90/secure.parksandresorts.wdpromedia.com/media/abd/refresh/north-america/san-francisco-tours/adventures-by-disney-north-america-san-francisco-long-weekend-hero-01-golden-gate-bridge.jpg", | |
| alt: "San Francisco Landscape" | |
| } | |
| ] | |
| }, | |
| { | |
| country: "France", | |
| img: "http://flags.fmcdn.net/data/flags/w580/fr.png", | |
| alt: "France Flag", | |
| cities: [ | |
| { | |
| cityName: "Paris", | |
| img: "https://www.telegraph.co.uk/content/dam/Travel/hotels/europe/france/paris/eiffel-tower-paris-p.jpg", | |
| alt: "Paris Landscape" | |
| }, | |
| { | |
| cityName: "Lyon", | |
| img: "https://upload.wikimedia.org/wikipedia/commons/thumb/6/6c/01._Panorama_de_Lyon_pris_depuis_le_toit_de_la_Basilique_de_Fourvi%C3%A8re.jpg/900px-01._Panorama_de_Lyon_pris_depuis_le_toit_de_la_Basilique_de_Fourvi%C3%A8re.jpg", | |
| alt: "Lyon Landscape" | |
| }, | |
| { | |
| cityName: "Nice", | |
| img: "https://www.telegraph.co.uk/content/dam/Travel/Destinations/Europe/France/Nice/Nice%2C%20france-xlarge.jpg", | |
| alt: "Nice Landscape" | |
| } | |
| ] | |
| } | |
| ]; | |
| // Start what will be returned to the HTML div | |
| text = "<ul>"; | |
| for(country in obj) { | |
| text += "<li class='parent'>" + obj[country]["country"] + "<img alt='" + obj[country]["alt"] + "' class='img' src='" + obj[country]["img"] + "'>" + "</li>"; | |
| text += "<ul>"; | |
| for(i = 0; i < obj[country]["cities"].length; i++) { | |
| text += "<li>" + obj[country]["cities"][i]["cityName"] + "<img alt='" + obj[country]["cities"][i]["alt"] + "' class='img' src='" + obj[country]["cities"][i]["img"] + "'>" + "</li>"; | |
| } | |
| //for(cities in country) { | |
| //console.log(obj[country]["cities"]); | |
| //text += "<li>" + obj[country]["cities"][cities]["cityName"] + "<img class='img' src='" + obj[country]["cities"][cities]["img"] + "'>" + "</li>"; | |
| //} | |
| text += "</ul>"; | |
| //console.log(obj[country]["cities"][0]["cityName"]); | |
| } | |
| text += "</ul>"; | |
| // Return parsed json to the div tag | |
| document.getElementById('jsonList').innerHTML = text; | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment