Hi ,
I am facing some issues in retrieving data from Bolt to my HTML page,
Data Received in Arduino Console:
Latitude= 19.160350 Longitude= 72.991409
Now created a javaScript method to retrieve this value on HTML:
function readDataAndShowOnMap1()
{
setKey('APIKey','BOLTXXXX')
var input=serialRead(0)
input=String(input)
alert(input.length)
}
undefined is stored in input variable, however it shows this value in alert, even if i don’t specify
{"value": "2.991500\nLatitude= 19.160268 Longitude= 72.9915Latitude= 19.160352 Longitude= 7", "success": "1"}
However i tried the same using Python, it works fine, But how can we manipulate it via Javascript?
@sachinndhimann Instead of String(input) try using JSON.loads(input) or JSON.stringify(input).
Also, can you please write the input and the type of input you are getting to console? It will be helpful to find out the data that is being received.
Hi Shoeb, thank you for responding to this question.
Expected Input in JavaScript variable is : Latitude= 19.160350 Longitude= 72.991409
However i tried some string manipulations (length,typeof), to understand what type of input i am receiving from serialRead()
for typeof ,It shows undefined
for length, It shows 9
So at the end ,all i am receiving is undefined instead of Latitude= 19.160350 Longitude= 72.991409
However i get to see this alert (Even if ,i dont print it on alert),whenever i call this function on-click of a button:
{“value”: “2.991500\nLatitude= 19.160268 Longitude= 72.9915 Latitude= 19.160352 Longitude= 7”, “success”: “1”}
Thanks,
@sachinndhimann Thats weird. It should be alerting you about the length of the input and not the input itself.
Are you sure that the function you have given in the earlier post of yours is what is being executed?
@vinayak.joshi Any thoughts?
Hi Sachin,
I am guessing you are using boltCommand.js in your code. If you will have a look here https://cloud.boltiot.com/static/js/boltCommands.js and find the serialRead function, it does not return any value and also alert the response.
function serialRead(till,element_id) {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
//document.getElementById("demo").innerHTML = xmlhttp.responseText;
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
alert(xmlhttp.responseText);
//document.getElementById("javascript_response").innerHTML = "Javascript Response : "+xmlhttp.responseText;
var obj = JSON.parse(xmlhttp.responseText);
if(obj.success=="1"){
document.getElementById(element_id).innerHTML = "Read Val = "+obj.value;
}
else{
document.getElementById(element_id).innerHTML = "Error = "+xmlhttp.responseText;
}
}
};
xmlhttp.open("GET",base_url+api_key+"/serialRead?till="+till+"&deviceName="+d_name,true);
xmlhttp.send();
}
Instead of using library function you can call your custom function for doing the Ajax request. Check the below code.
<html>
<head>
<!-- In following line will load the boltCommands.js files from Bolt cloud.-->
<script type="text/javascript" src="https://cloud.boltiot.com/static/js/boltCommands.js"></script>
<script type="text/javascript">
// The following line will set the api key and device name. It will be auto-initialized by Bolt cloud.
setKey('{{ApiKey}}', '{{Name}}');
function customserialRead(till, element_id) {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
alert(xmlhttp.responseText.length);
var obj = JSON.parse(xmlhttp.responseText);
console.log("value is " + obj.value)
if (obj.success == "1") {
document.getElementById(element_id).innerHTML = "Read Val = " + obj.value;
} else {
document.getElementById(element_id).innerHTML = "Error = " + xmlhttp.responseText;
}
}
};
xmlhttp.open("GET", base_url + api_key + "/serialRead?till=" + till + "&deviceName=" + d_name, true);
xmlhttp.send();
}
</script>
</head>
<body>
<center>
<button onclick="customserialRead(30);">serialRead</button>
</center>
</body>
</html>
Now you have the output of serialRead and you can extract the value using split and regex https://www.w3schools.com/jsref/jsref_split.asp .
One suggestion - In your Arduino code, avoid printing the same value multiple time.
Do let me know in case you need further assistance.
1 Like
@shoeb.ahmed: yes it worked. Thank you!!
@rahul.singh1: this might work for me , let me try this, looks promising ,the way you explained.
will get back after experimenting this out. Thank you!!
1 Like
@rahul.singh1:
Here is the javascript code which i tried manipulating for digitalRead(),earlier i had tried the same for serialRead, but it didnt work:
Code Snippet:
function identifyArea(pin,element_id)
{
var pinvalue;
alert('Hi')
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
//document.getElementById(element_id).innerHTML = xmlhttp.responseText;
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
//alert(xmlhttp.responseText);
//document.getElementById("javascript_response").innerHTML = "Javascript Response : "+xmlhttp.responseText;
var obj = JSON.parse(xmlhttp.responseText);
console.log("value is " + obj.value)
if(obj.success=="1"){
document.getElementById(element_id).innerHTML = "Pin Val = "+obj.value;
}
else{
document.getElementById(element_id).innerHTML = "Error = "+xmlhttp.responseText;
}
}
};
xmlhttp.open("GET",base_url+'api_key'+"/digitalReadpin="+pin+"&deviceName="+'BOLTXXXXXXX',true);
alert(typeof xmlhttp.response) //prints as string
alert(xmlhttp.response)// prints nothing
xmlhttp.send();
return xmlhttp.response;
}
i have highlighted the added code and the output (in comment) which i am receiving , while executing this js function,
Basically, i am getting no value .
is there anything which i am missing out??
Please suggest.
Hi @sachinndhimann,
As I can see there is some typo error in the code.
For example You have missed ? in the below line.
xmlhttp.open("GET",base_url+'api_key'+"/digitalReadpin="+pin+"&deviceName="+'BOLTXXXXXXX',true);
The correct code will be
xmlhttp.open("GET",base_url+api_key+"/digitalRead?pin="+pin+"&deviceName="+d_name,true);
See the code below :
function identifyArea(pin, element_id) {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
//document.getElementById(element_id).innerHTML = xmlhttp.responseText;
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
alert(xmlhttp.responseText);
//document.getElementById("javascript_response").innerHTML = "Javascript Response : "+xmlhttp.responseText;
var obj = JSON.parse(xmlhttp.responseText);
console.log("value is " + obj.value)
if (obj.success == "1") {
document.getElementById(element_id).innerHTML = "Pin Val = " + obj.value;
} else {
document.getElementById(element_id).innerHTML = "Error = " + xmlhttp.responseText;
}
}
};
xmlhttp.open("GET", base_url + api_key + "/digitalRead?pin=" + pin + "&deviceName=" + d_name, true);
xmlhttp.send();
}
One more suggestion :
Posting code snippet on the forum : Use the Markdown style for posting the code. Refer this link https://help.github.com/en/articles/creating-and-highlighting-code-blocks
@rahul.singh1: I just verified my code,looks like i did that typo mistake while adding that code, i had used digitalRead?pin instead of digitalReadpin.
1 Like
@rahul.singh1 and @shoeb.ahmed:
I did some modifications and this is how it worked for me:
//Code Snippet
xmlhttp_pin1.onreadystatechange = function() {
//document.getElementById(element_id).innerHTML = xmlhttp.responseText;
if (xmlhttp_pin1.readyState == 4 && xmlhttp_pin1.status == 200) {
//alert(xmlhttp_pin1.responseText);
setLocationOnMap1(xmlhttp_pin1.responseText)
//window.value=xmlhttp_pin1.responseText
//document.getElementById("javascript_response").innerHTML = "Javascript Response : "+xmlhttp.responseText;
var obj = JSON.parse(xmlhttp_pin1.responseText);
console.log("value is " + obj.value)
if(obj.success=="1"){
document.getElementById(element_id).innerHTML = "Pin Val = "+obj.value;
alert('success')
}
else{
document.getElementById(element_id).innerHTML = "Error = "+xmlhttp_pin1.responseText;
}
}
};
Here i created another JS method setLocationOnMap1(xmlhttp_pin1.responseText)
to get that value and do manipulations.
Thanks to both you for your quick help !! 
1 Like