Last active
March 26, 2017 14:31
-
-
Save M3kH/6fa878e04b9b8afa0c9b481325f95303 to your computer and use it in GitHub Desktop.
XMLHTTPRequest
This file contains 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
| <html> | |
| <head> | |
| <script src="./index.js"></script> | |
| </head> | |
| <body> | |
| <ul id="repos"> | |
| </ul> | |
| </body> | |
| </html> |
This file contains 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
| (function(doc){ | |
| function getContributors ( url, repoId ){ | |
| var getContributorsRequest = new XMLHttpRequest(); | |
| var listOfContributors = ''; | |
| var repoListItem = doc.getElementById(repoId) | |
| getContributorsRequest.addEventListener('load', function(){ | |
| var myContributorsList = JSON.parse(this.responseText); | |
| for(var k in myContributorsList){ | |
| var contributor = myContributorsList[k]; | |
| listOfContributors += [ | |
| '<li>', | |
| '<img src="', | |
| contributor.avatar_url, | |
| '" />', | |
| '</li>' | |
| ].join(''); | |
| } | |
| repoListItem.innerHTML += '<h2>Contributors</h2><ul class="contributor-list">' + listOfContributors + '</ul>'; | |
| }); | |
| getContributorsRequest.open('GET', url); | |
| getContributorsRequest.send(); | |
| } | |
| function printMyList( obj ){ | |
| for(var k in obj){ | |
| if(k > 2) return ''; | |
| var repo = obj[k]; | |
| var repoId = 'repo-'+k; | |
| myListElement.innerHTML += [ | |
| '<li id="', repoId ,'">', | |
| '<a href="', | |
| repo.url, | |
| '" >', | |
| repo.name, | |
| '</a></li>' | |
| ].join(''); | |
| getContributors( repo.contributors_url, repoId ); | |
| } | |
| } | |
| var myRequest = new XMLHttpRequest(); | |
| var myListElement; | |
| function requestLoaded (){ | |
| if(this.status === 200){ | |
| var obj = JSON.parse(this.responseText); | |
| printMyList(obj); | |
| } else { | |
| console.log('Something went bad'); | |
| } | |
| } | |
| function sendRequest(){ | |
| myRequest.addEventListener('load', requestLoaded); | |
| myRequest.open( | |
| 'GET', | |
| 'https://api.github.com/orgs/hackyourfuture/repos' | |
| ); | |
| myRequest.send(); | |
| } | |
| doc.onreadystatechange = function(){ | |
| if(document.readyState === 'complete'){ | |
| myListElement = doc.getElementById('repos'); | |
| sendRequest(); | |
| } | |
| } | |
| })(document); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment