Displaying different JSON text on interval - json

How is it possible here to display next JSON data on intervals(20s for example)?
Here is the code for getting JSON data
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var response = JSON.parse(xhttp.responseText);
var data= response.data;
var output = '';
for(var i = 0;i < data.length;i++){
output += ''+data[0].data1+''+data[0].data2+'<br/>';
}
document.getElementById('placeholder').innerHTML = output;
}
};
xhttp.open("GET", "url.json", true);
xhttp.send();

Related

Fetching data from API but no data are being displayed in html

I'm trying to fetch a specific set of data from an API as shown in the code below. Fetching only the football home teams' name and displaying it into a table.
I am getting no errors but no data is being shown in my table.
xhr.onreadystatechange = function()
{
if(this.readyState == 4 && this.status == 200)
{
//document.getElementById('text').innerHTML = this.responseText;
const obj = JSON.parse(this.responseText);
for (var i=0; i<obj.length; i++)
{
var row = $('<tr><td>' + obj.response[i].teams.home.name + '</td></tr>');
$('#myTable').append(row);
}
}
}
xhr.onerror = function()
{
console.log('Request Error');
}
xhr.send();
}
when doing console.log(obj)
you could do something like this
xhr.onreadystatechange = function()
{
if(xhr.readyState === XMLHttpRequest.DONE && xhr.status == 200)
{
//document.getElementById('text').innerHTML = this.responseText;
const obj = JSON.parse(xhr.responseText);
for (var i=0; i<obj.response.length; i++)
{
var row = $('<tr><td>' + obj.response[i].teams.home.name + '</td></tr>');
$('#myTable').append(row);
}
}
}
xhr.onerror = function()
{
console.log('Request Error');
}
xhr.send();

convert indexedb objecstore to json for send data with post

i must send data of an objectstore with post to a php file but i can't transform objectstore to send it.
Thanks for help
var xhttp = new XMLHttpRequest();
xhttp.open("POST", "../php/sincDATI.php", true);
var request = indexedDB.open("rsapp",1, "persistent");
request.onsuccess = function (evt) {
var db = request.result;
var tx = db.transaction(pTable,"readwrite");
var store = tx.objectStore(pTable);
*** TRAFORM store in json ????
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
};
};
xhttp.send(????);
};
I have found a solution for sending a JSON file, with an XMLHttpRequest transforming automatically an indexedDB objectStore:
function sendData(pTable,pMess) {
var xhttp = new XMLHttpRequest();
var sendArray=[];
var request = indexedDB.open("dbapp",1, "persistent");
request.onsuccess = function (evt) {
var db = request.result;
var tx = db.transaction(pTable,"readwrite");
var store = tx.objectStore(pTable);
var cursorRequest = store.getAll();
cursorRequest.onsuccess = function(event) {
var cursor=event.target.result;
for(var item of cursor) {
sendArray.push(item);
};
xhttp.open("POST", "../php/sincDATI.php", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
$("#lblMessaggi").html("OK!"+ xhttp.responseText);
};
};
xhttp.send("pArr="+JSON.stringify(sendArray));
};
};
};

Iterating through json when new tab is created

I want to iterate through a json and send info to html each time a new tab opens. However, the chrome.tabs.onCreated.addListener isn't working. Any ideas?
Thank you!
var x;
chrome.tabs.onCreated.addListener(function() {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.status == 200 && xmlhttp.readyState == 4) {
console.log(xmlhttp.responseText)
myObj = JSON.parse(xmlhttp.responseText);
title = myObj[x].Title;
date = myObj[x].Date;
artist = myObj[x].Artist;
var obj = document.getElementById('main_image');
obj.style.background = 'url("'+myObj[x].Image+'")';
document.getElementById("title").innerHTML = title;
document.getElementById("date").innerHTML = date;
document.getElementById("artist").innerHTML = artist;
document.getElementById("help").innerHTML =
xmlhttp.responseText;
}
if (x < myObj.length + 1) {
x = x + 1;
}
else {
x = 0;
}
}
xmlhttp.open("GET", chrome.extension.getURL("config.json"), true);
xmlhttp.send();
});
Could you try with a parameter in the ramada function?
chrome.tabs.onCreated.addListener(function(tab) {
And check if the tab.id is properly retriving.
https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/tabs/onCreated#Syntax

Displaying random JSON data

I have this code that displays JSON data. How could this code be remade to display random JSON data every 30 seconds?
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var response = JSON.parse(xhttp.responseText);
var data= response.data;
var output = '';
for(var i = 0;i < data.length;i++){
output += ''+data[0].data1+''+data[0].data2+'<br/>';
}
document.getElementById('placeholder').innerHTML = output;
}
};
xhttp.open("GET", "url.json", true);
xhttp.send();
Here is an example of JSON
{
"data": [
{
"data":"John",
"data2": "Doe"
},
{
"data":"Nick",
"data2": "Doe"
},
]
}
How would it be best to use with setInterval, so that one minute "John Doe" is displayed, and other "Nick Doe"?
create a setInterval to call your logic every 30secs. Set index=0 initially and reset when it equals to your json's length.
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var response = JSON.parse(xhttp.responseText);
var data= response.data;
var output = '';
var index = 0; // set your index
setInterval(function(){
if (index == data.length){
index= 0; // reset when equals json's length
}
output = ''+data[index].data1+''+data[index].data2+'<br/>';
document.getElementById('placeholder').innerHTML = output;
index++; // move to next element
},30000);
}
};
xhttp.open("GET", "url.json", true);
xhttp.send();

Uncaught SyntaxError: Unexpected token u in json

I have read online that the unexpected token issue can come from using JSON.parse().
I am getting this error Uncaught SyntaxError: Unexpected token u
What I am doing wrong?
My code look like this
var t=null;
var xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function(responseText)
{
if (xmlhttp.readyState == 4 &&xmlhttp.status==200)
var obj = JSON.parse(xmlhttp.responseText);
var str=JSON.stringify(obj);
var newArr = JSON.parse(str);
var len=newArr.length;
$.mobile.pageContainer.pagecontainer( "change","sales_home.html");
$(document).on('pageshow', "#temp", function (event, data) {
while (len > 0) {
len--;
}
});
}
xmlhttp.onerror=function(E)
{
alert("error"+ E);
}
xmlhttp.open("GET","url",true);
xmlhttp.send();
The problem becomes apparent if you indent the code consistently and correctly:
var t = null;
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function(responseText) {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
var obj = JSON.parse(xmlhttp.responseText);
var str = JSON.stringify(obj); // <====
var newArr = JSON.parse(str); // <====
var len = newArr.length;
$.mobile.pageContainer.pagecontainer("change", "sales_home.html");
$(document).on('pageshow', "#temp", function(event, data) {
while (len > 0) {
len--;
}
});
}
xmlhttp.onerror = function(E) {
alert("error" + E);
}
xmlhttp.open("GET", "url", true);
xmlhttp.send();
Note how the code does
var str = JSON.stringify(obj);
var newArr = JSON.parse(str);
no matter what the value of readyState and status are. That causes the error, because obj will be undefined, so JSON.stringify(obj) will return undefined, so JSON.parse will coerce that to the string "undefined", which it then cannot parse, failing on the first character, u.
You probably want to add a block:
var t = null;
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function(responseText) {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { // Block starts here
var obj = JSON.parse(xmlhttp.responseText);
var str = JSON.stringify(obj);
var newArr = JSON.parse(str);
var len = newArr.length;
$.mobile.pageContainer.pagecontainer("change", "sales_home.html");
$(document).on('pageshow', "#temp", function(event, data) {
while (len > 0) {
len--;
}
});
} // Block ends here
}
xmlhttp.onerror = function(E) {
alert("error" + E);
}
xmlhttp.open("GET", "url", true);
xmlhttp.send();
Not quite following why you're parsing, then stringifying, then parsing again though... Or why you have an empty while loop...