I'm quite good with html and css but absolutely no experience using javascript.
I want to display the date received from this API into an html page
.json?token=PutHereYourToken
This is how I'm trying without any success until now.
var getJSON = function(url) {
return new Promise(function(resolve, reject) {
var xhr = new XMLHttpRequest();
xhr.open('get', url, true);
xhr.responseType = 'json';
xhr.onload = function() {
var status = xhr.status;
if (status == 200) {
resolve(xhr.response);
} else {
reject(status);
}
};
xhr.send();
});
};
getJSON('.json?token=mytoken').then(function(data) {
alert('Your Json result is: ' + data.result);
result.innerText = data.result;
}, function(status) {
alert('Something went wrong.');
});<body>
<div class="container">
<div id="result" style="color:red"></div>
</div>
</body>I'm quite good with html and css but absolutely no experience using javascript.
I want to display the date received from this API into an html page
http://api.travelpayouts./data/routes.json?token=PutHereYourToken
This is how I'm trying without any success until now.
var getJSON = function(url) {
return new Promise(function(resolve, reject) {
var xhr = new XMLHttpRequest();
xhr.open('get', url, true);
xhr.responseType = 'json';
xhr.onload = function() {
var status = xhr.status;
if (status == 200) {
resolve(xhr.response);
} else {
reject(status);
}
};
xhr.send();
});
};
getJSON('https://api.travelpayouts./data/routes.json?token=mytoken').then(function(data) {
alert('Your Json result is: ' + data.result);
result.innerText = data.result;
}, function(status) {
alert('Something went wrong.');
});<body>
<div class="container">
<div id="result" style="color:red"></div>
</div>
</body>Thank you :)
Share Improve this question edited May 26, 2017 at 20:18 sloane asked May 26, 2017 at 19:56 sloanesloane 451 gold badge1 silver badge5 bronze badges 6- stackoverflow./help/how-to-ask – tech2017 Commented May 26, 2017 at 19:57
- developer.mozilla/en-US/docs/AJAX – Thiatt Commented May 26, 2017 at 20:01
- @sloane Once you've actually shown some effort. It's our job to help once you've shown that you've actually tried it yourself first. You haven't done that here. – Carcigenicate Commented May 26, 2017 at 20:08
- @Carcigenicate, let me 3 min to edit my question, then maybe you will figure out that I tried. It's not like I e and ask without having tried since 2 hours by myself..) – sloane Commented May 26, 2017 at 20:13
- 1 @sloane You'd be surprised, people do it all the time. And if you tried, show your work. We can't know what you haven't shown. In the future, please show your efforts from the start so it doesn't seem like you're asking for an answer without already having tried yourself. – Carcigenicate Commented May 26, 2017 at 20:14
2 Answers
Reset to default 3Here's a working example that does not use jQuery
// Callback to run when data is ready
function reqListener() {
// Parse the JSON text to an object so we can get just one property
var data = JSON.parse(this.responseText);
// Append that value to the DOM.
document.querySelector("#demo").innerHTML = data.body;
}
// Create a new ajax requst
var oReq = new XMLHttpRequest();
// Fire callback on load event
oReq.addEventListener("load", reqListener);
// Create the connection to our API
oReq.open("GET", "https://jsonplaceholder.typicode./posts/1");
// Fire the request
oReq.send();
Learn more about ajax here and see this working fiddle
This piece of code is Using Jquery
I suggest that you learn a bit more about ajax
Edit: I have updated my answer to fit your case. Working fiddle here
<body>
<div class="container">
<div id="result" style="color:red"></div>
</div>
</body>
Javascript
<script>
$(document).ready(function(){
$.ajax({
url: "http://api.travelpayouts./data/routes.json?token=PutHereYourToken",
type: 'GET',
dataType: 'json',
success: function(res) {
$('#result').html(res)
}
});
})
</script>
Do not forget to include jQuery and the javascript code in the head section of your html.