Can't get response using JSON API - javascript

I was wondering what I was doing wrong with this code? I'm trying to get the response for PC players from the API to be set to a tag in the html, but this isn't working.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Battlefield 4 Tracker</title>
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/bootstrap/bootstrap.min.js"></script>
<script src="js/jquery-3.1.1.min.js"></script>
</head>
<body>
<div id="fullscreen">
<div class="fullscreen-content">
<div id="centered">
<h1>Battlefield 4 Stats Tracker</h1>
<input id="username" name="username" placeholder="PSN Username">
<button id="submit">Submit</button>
<p id="response">
Response goes here.
</p>
</div>
</div>
</div>
<script>
var request = new XMLHttpRequest();
var jsonResponse = request.open("GET", "http://api.bf4stats.com/api/onlinePlayers", false)
var obj = JSON.parse(jsonResponse);
document.getElementById("response").innerHTML = obj.pc[1].count + "";
</script>
</body>
</html>

Since you are using JQuery as suggested by the html you provided , you can use $.get method of it. This method is a simple wrapper to work with the xmlHTTP asynchronous calls. The success call back of this method is where you should populate the obj with response.
And obj.pc is also an object, so you should access it like obj.pc.count
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Battlefield 4 Tracker</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
</head>
<body>
<div id="fullscreen">
<div class="fullscreen-content">
<div id="centered">
<h1>Battlefield 4 Stats Tracker</h1>
<input id="username" name="username" placeholder="PSN Username">
<button id="submit">Submit</button>
<p id="response">
Response goes here.
</p>
</div>
</div>
</div>
<script>
var request = new XMLHttpRequest();
var obj = null;
var jsonResponse = $.get("http://api.bf4stats.com/api/onlinePlayers", function(response){
obj = response;
document.getElementById("response").innerHTML = obj.pc.count + "";
})
</script>
</body>
</html>

you forgot to send the XMLHttpRequest and what you get back is a object of object so you can call directly obj.pc.count. Try this one:
var json = new XMLHttpRequest();
json.open("GET", "http://api.bf4stats.com/api/onlinePlayers", false)
json.send(null)
var obj = JSON.parse(json.responseText);
document.getElementById("response").innerHTML = obj.pc.count;

You never sent the request. You're missing request.send(). You then listen for the load event, when you've gotten a response.
Here's an edited version of your code. I assumed that you want to loop through all the types of devices and count them.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="fullscreen">
<div class="fullscreen-content">
<div id="centered">
<h1>Battlefield 4 Stats Tracker</h1>
<input id="username" name="username" placeholder="PSN Username">
<button id="submit">Submit</button>
<p id="response">
Response goes here.
</p>
</div>
</div>
</div>
<script>
function reqListener () {
//THIS HAPPENS AFTER THE REQUEST HAS BEEN LOADED.
var obj = JSON.parse(this.responseText);
var counter = 0;
for(var k in obj) {
var o = obj[k];
counter += o.count;
}
document.getElementById("response").innerHTML = counter;
}
var request = new XMLHttpRequest();
request.addEventListener("load", reqListener);
request.open("GET", "http://api.bf4stats.com/api/onlinePlayers");
request.send();
</script>
</body>
</html>
You may want to consider other events such as a failed attempt to load the request, etc. Here's more info: https://developer.mozilla.org/en/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest

The request is never send send();
The correct way to do this is to handle it in the onreadystatechange event.
Try this (together with a proper check):
var xmlhttp = new XMLHttpRequest();
var url = "http://api.bf4stats.com/api/onlinePlayers";
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var obj = JSON.parse(this.responseText);
myFunction(obj);
}
};
xmlhttp.open("GET", url, true);
xmlhttp.send();
function myFunction(obj) {
document.getElementById("response").innerHTML = obj.pc.count;
}
or directly without extra function:
var xmlhttp = new XMLHttpRequest();
var url = "http://api.bf4stats.com/api/onlinePlayers";
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var obj = JSON.parse(this.responseText);
document.getElementById("response").innerHTML = obj.pc.count;
}
};
xmlhttp.open("GET", url, true);
xmlhttp.send();
Demo
var xmlhttp = new XMLHttpRequest();
var url = "http://api.bf4stats.com/api/onlinePlayers";
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var obj = JSON.parse(this.responseText);
document.getElementById("response").innerHTML = obj.pc.count;
}
};
xmlhttp.open("GET", url, true);
xmlhttp.send();
<div id="response"></div>

Try this one :-
<script>
var request = new XMLHttpRequest();
request.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var obj = JSON.parse(this.responseText);
document.getElementById("response").innerHTML = obj.pc.count + "";
}
};
jsonResponse = request.open("GET", "http://api.bf4stats.com/api/onlinePlayers", true);
request.send();
</script>

Related

how to show youtube video in an html page with value received via json

I would like your help.
I have to insert a youtube video whose url is received via json; in particular with
document.getElementById("idframe").innerHTML=myJson.Items[4].value;
I get https://youtu.be/ILmvKC-H1l0
So far everything ok. To insert the youtube video in an html page I was following this tutorial.
I just can't get what I want. I get a gray box with the words: It may have been moved, changed, or deleted.
Can you kindly help me?
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style></style>
</head>
<body>
<div>
<div class="video"> <iframe id="idframe" width="420" height="345" src="myFunction()"> </iframe> </div> <br>
<br>
<script>
function myFunction() {
var xmlhttp = new XMLHttpRequest();
var url = "https://vnwcn9gt89.execute-api.us-east-2.amazonaws.com/book";
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var myJson = JSON.parse(this.responseText);
document.getElementById("idframe").innerHTML = myJson.Items[4].value;
}
};
xmlhttp.open("GET", url, true);
xmlhttp.send();
}
</script>
</body>
</html>
Couple of changes required in your code:
You cannot use shortened URL services like https://youtu.be/. Your url should be https://youtube.com/embed/ILmvKC-H1l0
innerHTML won't work for iframe. Try below solution
(function() {
//var xmlhttp = new XMLHttpRequest();
var url = "https://vnwcn9gt89.execute-api.us-east-2.amazonaws.com/book";
/*xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var myJson = JSON.parse(this.responseText);
//Your response for myJson.Items[4].value, should be equal to "https://youtube.com/embed/ILmvKC-H1l0"
let youtubeUrl = myJson.Items[4].value;
document.getElementById("idframe").src = youtubeUrl;
}
};
xmlhttp.open("GET", url, true);
xmlhttp.send();*/
//consider incase you have youtubeUrl as " youtu.be/ILmvKC-H1l0";
//Extract the id and append it like below
let returnedYoutubeUrl = "https://youtu.be/ILmvKC-H1l0";
let id = returnedYoutubeUrl.split("/")[3];
console.log(id);
document.getElementById("idframe").src = "https://youtube.com/embed/"+id;
})();
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style></style>
</head>
<body>
<div>
<div class="video">
<iframe id="idframe" width="420" height="345"> </iframe>
</div>
</div>
</body>
</html>

Javascript onclick function being called on page load

I have a simple Javascript function to be called when a button on the page is clicked. But it is getting called as soon as the page loads. Can anyone please tell me what the problem here is?
The HTML is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<button id="btn">ClicMe!</button>
<div id="demo"></div>
<script src="script.js"></script>
</body>
</html>
While the 'script.js' file is as follows.
var url = "example.txt";
function loadDoc(url, cFunction) {
var xhttp;
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
cFunction(this);
}
};
xhttp.open("GET", url, true);
xhttp.send();
}
function myFunction(xhttp) {
document.getElementById("demo").innerHTML = xhttp.responseText;
}
var btn = document.getElementById("btn");
btn.onclick = loadDoc(url, myFunction);
You must attach an event listener that invoke the function when a user clicks a button:
btn.addEventListener('click', () => {
loadDoc(url);
});
The last line of your script is calling the function instead of assigning the handler to it. Since you have arguments that you want to call it with, you need to use something to bundle the arguments and function together for when it is called. If you replace the last line with the following, it should work:
btn.onclick = loadDoc.bind(undefined, url, myFunction) // "this" value is not needed, so it is left undefined
use an arrow function like this:
btn.onclick = () => loadDoc(url, myFunction);
You are explicitly calling loadDoc() function in your JS file.
You should try this -
var url = "https://jsonplaceholder.typicode.com/posts";
function loadDoc() {
var xhttp;
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
}
};
xhttp.open("GET", url, true);
xhttp.send();
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<button id="btn" onclick='loadDoc()'>ClicMe!</button>
<div id="demo"></div>
<script src="script.js"></script>
</body>
</html>

Ajax Post versus GET

I am trying to implement an AJAX Example which perfectly works with the GET request, but I am not able to transmit via POST. What am I doing wrong ? The POST object received by PHP is always empty. Thanks for any advice!
HTML & JavaScript:
<html>
<head>
<title> Create a new user</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
function checkUser(){
xhttp = new XMLHttpRequest();
xhttp.open("POST","usercheck.php",true);
xhttp.onreadystatechange = function () {
if (xhttp.readyState == 4 && xhttp.status == 200) {
var data = xhttp.responseText;
alert("Benutzer" + data);
}
}
xhttp.send("username=" + encodeURIComponent(document.getElementById("username").value));
}
</script>
</head>
<body>
<p>User:</p><br>
<input type="text" id="username" name="username">
<button onclick="checkUser();"> Check </button>
</body>
</html>
PHP Code:
<?php
$usernames = array("admin", "gast", "paul");
$validate_pattern = "/^[a-z0-9]{4,20}$/";
if (!isset($_POST["username"])) {
die("{valid:false,message:false}");
}
if (in_array($_POST["username"], $usernames)) {
die("{valid:false,message:'Username is used!'}");
}
if (!preg_match($validate_pattern, $_POST["username"])) {
die("{valid:false,message:'Username wrong.'}");
}
echo "{valid:true,message:false}";
?>
I found the bug in the code. I missed to set the request header, which was not part of the tutorial unfortunately:
xhttp.setRequestHeader('Content-Type','x-www-form-urlencoded');

Tizen Javascript function undefined: Uncaught ReferenceError: checkToggle is not defined

I'm trying to do a simple http request to my server in a tizen web application for gear s2.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>
<title>Wearable UI</title>
<link rel="stylesheet" href="../../lib/tau/wearable/theme/default/tau.min.css">
<link rel="stylesheet" href="../../css/style.css">
<!--<script type="text/javascript" src="toggle.js"></script>-->
<script type="text/javascript" >
function checkToggle(name){
//make box2 = box1 when checked
var checkbox = document.getElementById(name);
if (checkbox.checked == 1){
HTTPReq('http://secret.nl/WebServer/edit.php?name='+name+'&value=1');
console.log("set "+name+" ON");
}else{
HTTPReq('http://secret.nl/WebServer/edit.php?name='+name+'&value=0');
console.log("set "+name+" OFF");
}
}
function HTTPReq(theUrl){
console.log('httpReq');
var client = new XMLHttpRequest();
client.open('GET', theUrl);
client.send();
}
</script>
</head>
<body>
<div class="ui-page" data-enable-page-scroll="false">
<div class="ui-content">
<div class="ui-switch">
<div class="ui-switch-text">
Led001
</div>
<div class="ui-toggleswitch ui-toggleswitch-large">
<input type="checkbox" class="ui-switch-input" id="Led001" onclick="checkToggle('Led001')">
<div class="ui-switch-button"></div>
</div>
<div class="ui-switch-sub-text">
Bedroom Light
</div>
</div>
</div>
<script src="controls.js"></script>
</div>
</body>
<script type="text/javascript" src="../../lib/tau/wearable/js/tau.min.js"></script>
</html>
When i emulate this i get the error: Uncaught ReferenceError: checkToggle is not defined. How ever when i save the same file when i'm in web emulator mode and live editing. the code works....?
Can anyone explain this and tell me how to fix this. Thanks
Try:
document.getElementById("Led001").addEventListener("click", function(){
checkToggle("Led001")
})
And remove the onClick from your HTML
I'm not 100% sure how i fixed it but here is the code that works:
( function () {
var led001Button = document.getElementById("Led001"),
led002Button = document.getElementById("Led002");
function httpReq(theUrl){
var xmlhttp = null;
xmlhttp = new XMLHttpRequest();
// xmlhttp.onreadystatechange = function(){
// if (xmlhttp.readyState == xmlhttp.DONE){
// alert(xmlhttp.responseText);
// }
// else{
// alert(xmlhttp.statusText);
// }
// };
// xmlhttp.onerror = function(e){
// alert("onerror: " + xmlhttp.statusText);
// };
xmlhttp.open("GET", theUrl);
xmlhttp.send();
}
function checkToggle(name){
//make box2 = box1 when checked
var checkbox = document.getElementById(name);
if (checkbox.checked === true){
httpReq('http://secret.nl/WebServer/edit.php?name='+name+'&value=1');
// console.log("set "+name+" ON");
}else{
httpReq('http://secret.nl/WebServer/edit.php?name='+name+'&value=0');
// console.log("set "+name+" OFF");
}
}
if (led001Button) {
led001Button.addEventListener("change", function(){
checkToggle("Led001");
});
}
if (led002Button) {
console.log('test');
led002Button.addEventListener("change", function(){
checkToggle("Led002");
});
}
} () );
Thanks for all the replies they have all helped in some way.

XMLHttpRequest can get data to display on webpage

I am trying to retrieve data from a web page and then display it on my webpage, nothing fancy atm just display it so it cam be read, however I am not sure how to do this, this is what I have so far(Also sorry if I've not done the formatting properly I'm still new to this):
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title> Night Out In Glasgow!!</title>
<link rel="stylesheet" type="text/css" href="StyleSheet.css">
<script src="pull.js"></script>
</head>
<body>
<form action = "">
<p><button type = "button" onclick ="getData()">Get The Data</button>
</p>
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</body>
This is then my JS which is in a separate file called pull.js, which I have linked to in my HTML, hope this clears up any confusion form original post.
/*jslint node: true, browser: true */
"use strict";
/*jslint node: true, browser: true */
"use strict";
function getData(){
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("POST","http://ratings.food.gov.uk/OpenDataFiles/FHRS776en- GB.xml");
xmlhttp.onreadystatechange = checkData;
xmlhttp.send(null);
function checkData() {
if(xmlhttp.status == 4){
if(xmlhttp.status == 200){
//We've got a response
alert(xmlhttp.responseXML);
}
}
else{
//Somethings went wrong
alert("Error: " + xmlhttp.status + ": " +xmlhttp.statusXML);
}
}
}
Try it in this order:
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("POST","...");
xmlhttp.onreadystatechange = {
if(xmlhttp.status == 4){
if(xmlhttp.status == 200){
...
};
xmlhttp.send();
I'm not sure with your case, but the same origin policy restricts contents retrieved via XMLHttpRequest to be accessed from a website with different origin. Go check this StackExchange answer

Categories

Resources