Created
April 14, 2014 20:56
-
-
Save kylejson/10682174 to your computer and use it in GitHub Desktop.
Tiny Api call javascript/jquery example. Taking data and putting it in the DOM to be styled.
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 lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Document</title> | |
| <style type="text/css"> | |
| /* styles for the element*/ | |
| h1{ | |
| font-family: helvetica; | |
| } | |
| img{ | |
| width: 25px; | |
| height: 25px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1></h1> | |
| <img src=""> | |
| <!-- link to jquery --> | |
| <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> | |
| </body> | |
| <script type="text/javascript"> | |
| //getJSON function take the URL from the API and returns the data to be used. | |
| $.getJSON('https://api.github.com/users/kylejson', function(data){ | |
| //prints the returned data in the console | |
| console.log(data); | |
| // selects the empty h1 tag in the body and puts the value of 'name' key from the returned data into it | |
| $('h1').append(data.name); | |
| // selects the img tag in the body and puts the link value of 'avatar_url' from the returned data into its 'src' field | |
| $('img').attr('src', data.avatar_url); | |
| }); | |
| </script> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment