Last active
June 18, 2020 14:19
-
-
Save JHarry444/45baa7d9324ad31e7775253ef8f6df00 to your computer and use it in GitHub Desktop.
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></head> | |
| <body> | |
| <div id="bigOutput"></div> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.js"></script> | |
| <script src="./js/details.js"></script> | |
| </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
| const bigOutput = document.getElementById('bigOutput'); | |
| (function () { | |
| const params = new URLSearchParams(window.location.search); | |
| axios.get('http://localhost:8081/duck/get/' + params.get('id')).then(res => { | |
| const duck = res.data; | |
| const duckDiv = makeElement('div', '', bigOutput); | |
| makeElement('h2', duck.name, duckDiv); | |
| makeElement('p', 'Colour: ' + duck.colour, duckDiv); | |
| makeElement('p', `Habitat: ${duck.habitat}`, duckDiv); | |
| }).catch(err => console.err(err)); | |
| })(); | |
| function makeElement(eleType, text, appendTo) { | |
| const element = document.createElement(eleType); | |
| element.innerText = text; | |
| appendTo.appendChild(element); | |
| return element; | |
| } |
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></head> | |
| <body> | |
| <button onclick="getData();">GET Ducks</button> | |
| <br /> | |
| <button onclick="fetchData();">FETCH Ducks</button> | |
| <br /> | |
| <button onclick="axiosData();">AXIOS Ducks</button> | |
| <br /> | |
| <button onclick="axiosDataElements();">AXIOS Ducks EL</button> | |
| <pre id="output"></pre> | |
| <div id="bigOutput"></div> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.js"></script> | |
| <script src="js/requests.js"></script> | |
| </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
| const request = new XMLHttpRequest(); | |
| const output = document.getElementById('output'); | |
| const bigOutput = document.getElementById('bigOutput'); | |
| const params = new URLSearchParams(window.location.search); | |
| console.log('id: ', params.get('id')); | |
| function getData() { | |
| request.open('GET', 'http://localhost:8081/duck/getAll'); | |
| request.onload = function () { | |
| console.log(this); | |
| output.innerText = this.responseText; | |
| } | |
| request.send(); | |
| } | |
| function fetchData() { | |
| fetch('http://localhost:8081/duck/getAll') | |
| .then(res => res.json()) | |
| .then(json => output.innerText = JSON.stringify(json, undefined, 2)) | |
| .catch(err => console.log(err)); | |
| } | |
| function axiosData() { | |
| axios.get('http://localhost:8081/duck/getAll') | |
| .then(res => output.innerText = JSON.stringify(res.data, undefined, 2)) | |
| .catch(err => console.log(err)); | |
| } | |
| function axiosDataElements() { | |
| axios.get('http://localhost:8081/duck/getAll') | |
| .then(res => { | |
| res.data.forEach((duck, i) => { | |
| const duckDiv = makeElement('div', '', bigOutput); | |
| duckDiv.id = 'duck' + i; | |
| duckDiv.addEventListener('click', function () { | |
| window.location = './details.html?id=' + duck.id; | |
| }); | |
| makeElement('h2', duck.name, duckDiv); | |
| makeElement('p', 'Colour: ' + duck.colour, duckDiv); | |
| makeElement('p', `Habitat: ${duck.habitat}`, duckDiv); | |
| }); | |
| }) | |
| .catch(err => console.log(err)); | |
| } | |
| // function axiosDataElements() { | |
| // axios.get('http://localhost:8081/duck/getAll') | |
| // .then(res => { | |
| // res.data.forEach(duck => { | |
| // const duckDiv = document.createElement('div'); | |
| // bigOutput.appendChild(duckDiv); | |
| // const name = document.createElement('h2'); | |
| // name.innerText = duck.name; | |
| // duckDiv.appendChild(name); | |
| // const colour = document.createElement('p'); | |
| // colour.innerText = `Colour: ${duck.colour}`; | |
| // duckDiv.appendChild(colour); | |
| // const habitat = document.createElement('p'); | |
| // habitat.innerText = `Habitat: ${duck.habitat}`; | |
| // duckDiv.appendChild(habitat); | |
| // }) | |
| // }) | |
| // .catch(err => console.log(err)); | |
| // } | |
| function makeElement(eleType, text, appendTo) { | |
| const element = document.createElement(eleType); | |
| element.innerText = text; | |
| appendTo.appendChild(element); | |
| return element; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment