We Keep Coding

How can I get the value of a checkbox from a for loop

My receive() function parses through data from a backend server and I use that data to create a renderHTML() function which displays the parsed data as an HTML string. I get the data to display and can also attach checkboxes perfectly fine. I am trying to get the value of questionid so that when the user clicks on the checkbox, I can use Ajax to send the values of which question was selected, which can be done by questionid. I am not sure on how to get the value of the questionid, store it, and send it through Ajax.
function receive() {
var text = document.getElementById("text").value;
var data = {
'text': text
};
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
var ourData = xhr.responseText;
var parsedData = JSON.parse(ourData);
console.log(parsedData);
renderHTML(parsedData);
}
};
xhr.open("POST", "URL", true);
xhr.send(JSON.stringify(data));
}
var questionid;
function renderHTML(data) {
var htmlString = "";
for (i = 0; i < data.length; i++) {
htmlString += "<p><input type='checkbox' value='data[i].questionid'>" +
data[i].questionid + "." + "\n";
htmlString += '</p>';
}
response.insertAdjacentHTML('beforeend', htmlString);
var t = this;
var checkboxes = document.querySelectorAll('input[type="checkbox"]');
for (var i = 0; i < checkboxes.length; i++) {
checkboxes[i].onclick = function() {
if (this.checked) {
console.log(this.questionid.value);
}
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
var Data = xhr.responseText;
console.log(Data);
var parseData = JSON.parse(Data);
};
xhr.send(JSON.stringify(data));
}
}
}

There are many ways in which you can achieve what you are looking for. For that, you will need to understand one of two concepts:
bind
closures
None of them is easy to understand for beginners but will help you vastly improve your coding skills once you get them. You can read about them here and here respectively.
The problem with your code (amongst other details) is that the value of i is global, and so by the time the DOM is rendered and the user can click in one of the checkboxes, all the checkboxes have the same value of i (the last one).
bind helps you solve this by setting an argument to the function that will always remain the same.
closures help you solve this by storing the value of a variable declared in a scope that is accessible only from a function that stores a reference to that variable.
Here is some code I wrote that does what you want using a most modern syntax, which I would highly recommend.
Specially, I would recommend you to read about the fetch api; which is a much cleaner way to make http request.
This code does what you are looking for:
function receive() {
const text = document.getElementById('text').value;
const options = {
method: 'POST',
body: JSON.stringify({ text })
}
fetch("<the url here>", options)
.then( response => response.json())
.then( data => {
renderHTML(JSON.parse(data));
})
}
function renderHTML(data){
for (const x of data) {
const content = x.questionid;
// i'm asuming that the response html element already exists
response.insertAdjacentHTML('beforeend', `<p><input value="${content}" type="checkbox">${content}</p>`);
}
document.querySelectorAll('input[type="checkbox"]').forEach( input => {
input.addEventListener((e) => {
const options = {
method: 'POST',
body: JSON.stringify(e.target.value)
};
fetch('<the second url here>', options).then( response => response.json())
.then( data => {
// 'data' is the response you were looking for.
})
})
})
}

JQuery $.getJSON asynchronous workaround - caching ajax results

I am caching the JSON returned from ajax calls and then displaying the results from the cache. My issue is if there is no cache for that Ajax call already, the results only display on refresh. This is down to the fact that ajax is asynchronous but how do I get around that? Ajax async:false has been deprecated so that's not an option. Would the $.getJSON .done() function suffice or is there a better way?
Here is my code so far:
if ((online === true)) {
//get JSON
$.getJSON(baseurl + '/wp-json/app/v2/files?filter[category]' + cat + '&per_page=100', function(jd) {
//cache JSON
var cache = {
date: new Date(),
data: JSON.stringify(jd)
};
localStorage.setItem('cat-' + cat, JSON.stringify(cache));
});
//if not online and no cached file
} else if ((online === false) && (!cache['cat-' + cat])) {
alert('There are no cached files. You need to be online.');
}
//get cached JSON
cache['cat-' + cat] = JSON.parse(localStorage.getItem('cat-' + cat));
var objCache = cache['cat-' + cat].data;
objCache = JSON.parse(objCache); //Parse string to json
//display JSON results from cache
$.each(objCache, function(i, jd) {
var thumb = jd.file_thumbnail.sizes.medium;
//.....etc...
)
}}

A simple rewrite of your code yields the following:
function cacheAsCacheCan(cat, callback) {
if (online === true) {
//get JSON
$.getJSON(baseurl + '/wp-json/app/v2/files?filter[category]' + cat + '&per_page=100', function(jd) {
//cache JSON
var cache = {
date: new Date(),
data: JSON.stringify(jd)
};
localStorage.setItem('cat--' + cat, JSON.stringify(cache));
});
//if not online and no cached file
} else if ((online === false) && (!cache['cat-' + cat])) {
callback('There are no cached files. You need to be online.');
return;
}
//get cached JSON
callback(null, cache['cat-' + cat] = JSON.parse(localStorage.getItem('cat-' + cat)));
}
cacheAsCacheCan('someCat', function(error, cachedata) {
if(error) {
alert(error);
} else {
var objCache = cachedata.data;
objCache = JSON.parse(objCache); //Parse string to json
//display JSON results from cache
$.each(objCache, function(i, jd) {
var thumb = jd.file_thumbnail.sizes.medium;
//.....etc...
)
}
}
);

Return a list of data made from an Ajax/HTTP in the order they were called

Is there a way to display your AJAX data back in the order in which you called your AJAX requests, without using promises, also no synchronous code or jQuery, but simply pure javascript?
For example:
//file 1 takes 3 seconds & file2 takes 1 second
input: ['example1.com', 'example2.com']
output: [example1_response, example2_response]
I started by setting up a small toy problem in my HTML page. I append two placeholder <div>'s with the text wait inside my webpage & then as my url requests completed the appropriate <div>'s placeholder text was replaced. But still it doesn't achieve the end goal of loading my content based on the order in which I made my requests.
JSFIDDLE:https://jsfiddle.net/nf4p1bgf/5/
var body = document.getElementsByTagName('body')[0]
var urls = [ "website1.com", "website2.com"];
//Helper function to simulate AJAX request
function fakeAjax(url,cb) {
var fake_responses = {
"website1.com": "data from website1.com",
"website2.com": "data from website2.com"
};
var randomDelay = (Math.round(Math.random() * 1E4) % 8000) + 1000;
console.log(`Requesting: ${url}. Response time: ${randomDelay}`);
setTimeout(function(){
cb(fake_responses[url]);
},randomDelay);
}
urls.forEach(function(url) {
//creating placeholder <div>'s before AJAX data returns
var div = document.createElement("div");
div.innerHTML = "this is a place holder - please wait";
body.appendChild(div);
fakeAjax(url, function(data) {
div.innerHTML = data;
});
});
EDIT & SOLUTION JSFiddle here: https://jsfiddle.net/fa707qjc/11/
//*********** HELPERS (SEE CODE BELOW HELPERS SECTION) ***********/
var body = document.getElementsByTagName('body')[0]
var urls = ["website1.com","website2.com"];
function fakeAjax(url,cb) {
var fake_responses = {
"website1.com": "data from website1.com",
"website2.com": "data from website2.com"
};
var randomDelay = (Math.round(Math.random() * 1E4) % 8000) + 1000;
console.log(`Requesting: ${url}. Response time: ${randomDelay}`);
setTimeout(function(){
cb(fake_responses[url]);
},randomDelay);
}
function createElement(typeOfElement, text){
var element = document.createElement(typeOfElement)
element.innerHTML = text;
return element;
}
function handleResponse(url, contents){
//if I haven't recieved response from x url
if( !(url in responses)){
responses[url] = contents;
}
//defining order for response outputs
var myWebsites = ['website1.com','website2.com'];
// loop through responses in order for rendering
for(var url of myWebsites){
if(url in responses){
if(typeof responses[url] === "string"){
console.log( responses[url])
//mark already rendered
var originalText = responses[url];
responses[url] = true;
var p = createElement('p', originalText);
body.appendChild(p);
}
}
//can't render it / not complete
else{
return;
}
}
}
//*********** CODE START ***********
function getWebsiteData(url) {
fakeAjax(url, function(text){
console.log(`Returning data from ${url} w/response: ${text}`)
handleResponse(url, text);
});
}
//As we get our responses from server store them
var responses = {};
// request all files at once in "parallel"
urls.forEach(function(url){
getWebsiteData(url);
})

Use Promise.
Promise.all(urls.map(function(url) {
return new Promise(function(resolve, reject) {
request(url, function(data, error) {
if (error) {
return reject(error);
}
resolve(data);
})
});
})).then(function(results) {
console.log(results);
});

Adding more than one AJAX call to a Script

I need to add a function to my script that gets the current server time.
I use the PHP file below to get the server time in milliseconds.
<?php
date_default_timezone_set('Europe/London');
$serverTime = round(microtime(true) * 1000);
echo json_encode($serverTime);
?>
Then i would like to add an Ajax request to 'get' serverTime.PHP and put it into a variable so that i can calculate the time before something ends correctly.
I currently get the clients time by using this
var now = new Date ().getTime();
Now i want to remove that line and add my ajax request.
I have tried adding the following code into the script but i can not get it to execute
function now ()
{
this.ajax.open('GET', 'serverTime.php',
true);
this.ajax.send(null);
if (this.ajax.readyState != 4) return;
if (this.ajax.status == 200)
{
// get response
var now = eval ('('+this.ajax.responseText+')');
}
}
The end result being the variable 'NOW' contains the output of serverTime.PHP
Here is my script, i have tried to add anothert ajax get request in various ways but i cant get it to function correctly.
$.ajaxSetup({
type: 'GET',
headers: { "cache-control" : "no-cache" }
});
var PlayList = function (onUpdate, onError)
{
// store user callbacks
this.onUpdate = onUpdate;
this.onError = onError;
// setup internal event handlers
this.onSongEnd = onSongEnd.bind (this);
// allocate an Ajax handler
try
{
this.ajax = window.XMLHttpRequest
? new XMLHttpRequest()
: new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
// fatal error: could not get an Ajax handler
this.onError ("could not allocated Ajax handler");
}
this.ajax.onreadystatechange = onAjaxUpdate.bind(this);
// launch initial request
this.onSongEnd ();
// ------------------------------------------
// interface
// ------------------------------------------
// try another refresh in the specified amount of seconds
this.retry = function (delay)
{
setTimeout (this.onSongEnd, delay*5000);
}
// ------------------------------------------
// ancillary functions
// ------------------------------------------
// called when it's time to refresh the playlist
function onSongEnd ()
{
// ask for a playlist update
this.ajax.open('GET', 'playlist.php', // <-- reference your PHP script here
true);
this.ajax.send(null);
}
// called to handle Ajax request progress
function onAjaxUpdate ()
{
if (this.ajax.readyState != 4) return;
if (this.ajax.status == 200)
{
// get response
var list = eval ('('+this.ajax.responseText+')');
// compute milliseconds remaining till the end of the current song
var start = new Date(list[0].date_played.replace(' ', 'T')).getTime();
var now = new Date ( ).getTime();
var d = start - now + 6500
+ parseInt(list[0].duration);
if (d < 0)
{
// no new song started, retry in 3 seconds
d = 3000;
}
else
{
// notify caller
this.onUpdate (list);
}
// schedule next refresh
setTimeout (this.onSongEnd, d);
}
else
{
// Ajax request failed. Most likely a fatal error
this.onError ("Ajax request failed");
}
}
}
var list = new PlayList (playlistupdate, playlisterror);
function playlistupdate (list)
{
for (var i = 0 ; i != list.length ; i++)
{
var song = list[i];
}
{
document.getElementById("list0artist").innerHTML=list[0].artist;
document.getElementById("list0title").innerHTML=list[0].title;
document.getElementById("list0label").innerHTML=list[0].label;
document.getElementById("list0albumyear").innerHTML=list[0].albumyear;
document.getElementById("list0picture").innerHTML='<img src="/testsite/covers/' + list[0].picture + '" width="170" height="170"/>';
document.getElementById("list1artist").innerHTML=list[1].artist;
document.getElementById("list1title").innerHTML=list[1].title;
document.getElementById("list1label").innerHTML=list[1].label;
document.getElementById("list1albumyear").innerHTML=list[1].albumyear;
document.getElementById("list1picture").innerHTML='<img src="/testsite/covers/' + list[1].picture + '" width="84" height="84"/>';
document.getElementById("list2artist").innerHTML=list[2].artist;
document.getElementById("list2title").innerHTML=list[2].title;
document.getElementById("list2label").innerHTML=list[2].label;
document.getElementById("list2albumyear").innerHTML=list[2].albumyear;
document.getElementById("list2picture").innerHTML='<img src="/testsite/covers/' + list[2].picture + '" width="84" height="84"/>';
document.getElementById("list3artist").innerHTML=list[3].artist;
document.getElementById("list3title").innerHTML=list[3].title;
document.getElementById("list3label").innerHTML=list[3].label;
document.getElementById("list3albumyear").innerHTML=list[3].albumyear;
document.getElementById("list3picture").innerHTML='<img src="/testsite/covers/' + list[3].picture + '" width="84" height="84"/>';
document.getElementById("list4artist").innerHTML=list[4].artist;
document.getElementById("list4title").innerHTML=list[4].title;
document.getElementById("list4label").innerHTML=list[4].label;
document.getElementById("list4albumyear").innerHTML=list[4].albumyear;
document.getElementById("list4picture").innerHTML='<img src="/testsite/covers/' + list[4].picture + '" width="84" height="84"/>';
$('.nowPlayNoAnimate').each(function() {
$(this).toggleClass('nowPlayAnimate', $(this).parent().width() < $(this).width());
});
}
}
function playlisterror (msg)
{
// display error message
console.log ("Ajax error: "+msg);
//retry
list.retry (10); // retry in 10 seconds
}

Why not use the jquery method ?
function getServerTime() {
var now = null;
$.ajax({
url: "serverTime.php",
dataType: 'JSON',
async: false,
success: function (data) {
now = data;
}
});
return now;
}
You can start as many requests as you want in a browser-portable way.
PS:
you may also want to replace
document.getElementById("list4artist").innerHTML=list[4].artist;
by the shorter
$("#list4artist").html(list[4].artist);
Edit: Add async parameter to make the execution wait for the ajax call to simulate a non-asynchronous function call.

Assuming your service return the date object, you need to add the following line inside the success function (suggested by Clément Prévost):
var now = data;
The success function is an async callback function the triggers after the server return a value.
You should read about Jquery Ajax, it will make your life much easier.

Populating an object with ajax in a loop

I need to pull data from a series of .csv files off the server. I am converting the csvs into arrays and I am trying to keep them all in an object. The ajax requests are all successful, but for some reason only the data from the last request ends up in the object. Here is my code:
var populate_chart_data = function(){
"use strict";
var genders = ["Boys","Girls"];
var charts = {
WHO: ["HCFA", "IWFA", "LFA", "WFA", "WFL"],
CDC: ["BMIAGE", "HCA", "IWFA", "LFA", "SFA", "WFA", "WFL", "WFS"]
};
var fileName, fileString;
var chart_data = {};
for (var i=0; i < genders.length; i++){
for (var item in charts){
if (charts.hasOwnProperty(item)){
for (var j=0; j<charts[item].length; j++) {
fileName = genders[i] + '_' + item + '_' + charts[item][j];
fileString = pathString + fileName + '.csv';
$.ajax(fileString, {
success: function(data) {
chart_data[fileName] = csvToArray(data);
},
error: function() {
console.log("Failed to retrieve csv");
},
timeout: 300000
});
}
}
}
}
return chart_data;
};
var chart_data = populate_chart_data();
The console in Firebug shows every ajax request successful, but when I step through the loops, my chart_data object is empty until the final loop. This is my first foray into ajax. Is it a timing issue?

There are two things you need to consider here:
The AJAX calls are asynchronous, this means you callback will only be called as soon as you receive the data. Meanwhile your loop keeps going and queueing new requests.
Since you're loop is going on, the value of filename will change before your callback is executed.
So you need to do two things:
Push the requests into an array and only return when the array completes
Create a closure so your filename doesn't change
.
var chart_data = [];
var requests = [];
for (var j=0; j<charts[item].length; j++) {
fileName = genders[i] + '_' + item + '_' + charts[item][j];
fileString = pathString + fileName + '.csv';
var onSuccess = (function(filenameinclosure){ // closure for your filename
return function(data){
chart_data[filenameinclosure] = csvToArray(data);
};
})(fileName);
requests.push( // saving requests
$.ajax(fileString, {
success: onSuccess,
error: function() {
console.log("Failed to retrieve csv");
},
timeout: 300000
})
);
}
$.when.apply(undefined, requests).done(function () {
// chart_data is filled up
});

I'm surprised that any data ends up in the object. The thing about ajax is that you can't depend on ever knowing when the request will complete (or if it even will complete). Therefore any work that depends on the retrieved data must be done in the ajax callbacks. You could so something like this:
var requests = [];
var chart_data = {};
/* snip */
requests.push($.ajax(fileString, {
/* snip */
$.when.apply(undefined, requests).done(function () {
//chart_data should be full
});