XMLHttpRequest with multiple queries

XMLHttpRequest with multiple queries - javascript

I have an interface that need user to input zip code, then I will query the longitude and latitude from a remote site based on the inputted zip, then query some population information based on previous queried longitude and latitude. I need 3 XMLhttpRequest() to query three different sites. Each query will based on previous queried data. I think there may have some callback issues in my code, I don't know how to fix it.
<input type="submit" value="Get City" onclick="getInfo()">
<script>
function getInfo(getGeoCode) {
var zipCode = document.getElementById("inputtext").value
var xmlReq = new XMLHttpRequest();
xmlReq.open("GET", "http://api.zippopotam.us/us/" + zipCode, true);
xmlReq.onreadystatechange = function () {
if (xmlReq.readyState == 4) {
var temp = JSON.parse(xmlReq.responseText);
var lat = temp.places[[0]].latitude ;
var logt = temp.places[[0]].longitude;
getGeoCode(lat, logt);
};
};
xmlReq.send();
}
function getGeoCode(lat,logt,getpop) {
var nereq = new XMLHttpRequest();
nereq.open("GET", "https://data.fcc.gov/api/block/find?&latitude=" + lat + "&longitude=" + logt + "&showall=false&format=json", true);
nereq.onreadystatechange = function () {
if (nereq.readyState == 4) {
var temp2 = JSON.parse(nereq.responseText);
var stateCode = temp2.State.FIPS;
var contyCode = temp2.County.FIPS;
getpop(stateCode, contyCode);
};
};
nereq.send();
}
function getpop(stateCode, contyCode) {
var nereq2 = new XMLHttpRequest();
nereq2.open("GET", "http://api.census.gov/data/2010/sf1?get=P0010001&for=county:" + contyCode + "&in=state:" + stateCode, true);
nereq2.onreadystatechange = function () {
if (nereq2.readyState == 4) {
var temp3 = JSON.parse(nereq.responseText);
document.getElementById("fs").innerHTML = temp3;
};
};
nereq2.send();
}
</script>

Your functions have arguments which conflict with the function names you call, so they are not accessible anymore.
For example, getGeoCode has an argument called getpop. When getpop is called, it does not call the function of that name, but tries to call the reference that the getpop argument references. Especially as you aren't passing anything in this paarmeter, it is most likely erroring.
The solution is to just remove the getGeoCode parameter from getInfo() and the getpop parameter from getGeoCode():
<input type="submit" value="Get City" onclick="getInfo()">
<script>
function getInfo() {
var zipCode = document.getElementById("inputtext").value
var xmlReq = new XMLHttpRequest();
xmlReq.open("GET", "http://api.zippopotam.us/us/" + zipCode, true);
xmlReq.onreadystatechange = function () {
if (xmlReq.readyState == 4) {
var temp = JSON.parse(xmlReq.responseText);
var lat = temp.places[[0]].latitude ;
var logt = temp.places[[0]].longitude;
getGeoCode(lat, logt);
};
};
xmlReq.send();
}
function getGeoCode(lat,logt) {
var nereq = new XMLHttpRequest();
nereq.open("GET", "https://data.fcc.gov/api/block/find?&latitude=" + lat + "&longitude=" + logt + "&showall=false&format=json", true);
nereq.onreadystatechange = function () {
if (nereq.readyState == 4) {
var temp2 = JSON.parse(nereq.responseText);
var stateCode = temp2.State.FIPS;
var contyCode = temp2.County.FIPS;
getpop(stateCode, contyCode);
};
};
nereq.send();
}
function getpop(stateCode, contyCode) {
var nereq2 = new XMLHttpRequest();
nereq2.open("GET", "http://api.census.gov/data/2010/sf1?get=P0010001&for=county:" + contyCode + "&in=state:" + stateCode, true);
nereq2.onreadystatechange = function () {
if (nereq2.readyState == 4) {
var temp3 = JSON.parse(nereq.responseText);
document.getElementById("fs").innerHTML = temp3;
};
};
nereq2.send();
}
</script>

Related

Problem getting HTML to display after forEach loop

Hope Someone can help out. The goal of this small project is to search the moviedatabase OMDB, and display the fetched results below the search bar. I have a feeling that the code breaks when I try to use the forEach loop on the returned results, but I cannot find the bugs. Every help is appreciated! Thanks!
var httpRequest = new XMLHttpRequest();
httpRequest.onload = function() {
if (httpRequest.readyState === XMLHttpRequest.DONE) {
if (httpRequest.status === 200) {
var response = JSON.parse(httpRequest.responseText).Search;
var body = document.getElementsByTagName("body");
response.forEach(function (element, index) {
body.appendChild(" <img src="+element[index].Poster+"/>" +
"<p>Title: <a href = 'https://www.imdb.com/title/"+element[index].imdbID+"' >" +element[index].Title+ "</a></p>" +
"<p>Year: "+ element[index].Year+"</p>" +
"<p>Type: "+element[index].Type+"</p>");
});
} else {
console.log(httpRequest.statusText);
}
}
};
httpRequest.onerror = function() {
console.log(httpRequest.statusText);
};
var searchMovie = function () {
var input = document.querySelector('input').value;
if (input) {
httpRequest.open('GET', 'https://www.omdbapi.com/?s=' + input + '&plot=short&apikey=b7da8d63');
httpRequest.send(null);
}
};

Here's a working example which assumes that you're getting back an array of movies.
const response = JSON.parse('{"Search":[{"Title":"The Town","Year":"2010","imdbID":"tt0840361","Type":"movie","Poster":"https://m.media-amazon.com/images/M/MV5BMTcyNzcxODg3Nl5BMl5BanBnXkFtZTcwMTUyNjQ3Mw##._V1_SX300.jpg"},{"Title":"Ghost Town","Year":"2008","imdbID":"tt0995039","Type":"movie","Poster":"https://m.media-amazon.com/images/M/MV5BMTQyODQ4MzYxN15BMl5BanBnXkFtZTcwOTQ1MDczMw##._V1_SX300.jpg"},{"Title":"Cougar Town","Year":"2009–2015","imdbID":"tt1441109","Type":"series","Poster":"https://m.media-amazon.com/images/M/MV5BMTQyMDI2MDM5NF5BMl5BanBnXkFtZTgwOTcyNDE5MDE#._V1_SX300.jpg"},{"Title":"New in Town","Year":"2009","imdbID":"tt1095174","Type":"movie","Poster":"https://m.media-amazon.com/images/M/MV5BMzAxNzU4MDE1Nl5BMl5BanBnXkFtZTcwOTQ0NDcwMg##._V1_SX300.jpg"},{"Title":"Mr. Deeds Goes to Town","Year":"1936","imdbID":"tt0027996","Type":"movie","Poster":"https://m.media-amazon.com/images/M/MV5BNzdiMDVkNmMtNDI0Ny00MTQ5LWEwNjAtODQxOGNjOTZmMGVmL2ltYWdlXkEyXkFqcGdeQXVyMDI2NDg0NQ##._V1_SX300.jpg"},{"Title":"On the Town","Year":"1949","imdbID":"tt0041716","Type":"movie","Poster":"https://m.media-amazon.com/images/M/MV5BNjk0YmVlNTQtZDg0NC00MGYyLWFhYTMtMTBlMzFkYjczMDMyXkEyXkFqcGdeQXVyMDI2NDg0NQ##._V1_SX300.jpg"},{"Title":"The Town That Dreaded Sundown","Year":"2014","imdbID":"tt2561546","Type":"movie","Poster":"https://m.media-amazon.com/images/M/MV5BMTUwNzUyNjEwM15BMl5BanBnXkFtZTgwOTk3MTc2MjE#._V1_SX300.jpg"}],"totalResults":"1588","Response":"True"}');
// Get the body, which is the first element in the array
// returned by document.getElementsByTagName()
var body = document.getElementsByTagName("body")[0];
var movie;
response.Search.forEach(function (element) {
// Create a new element to append
movie = document.createElement('div');
// Add HTML contents to new element
movie.innerHTML =
"<img src="+element.Poster+"/>" +
"<p>Title: <a href = 'https://www.imdb.com/title/"+element.imdbID+"' >"+element.Title+ "</a></p>" +
"<p>Year: "+element.Year+"</p>" +
"<p>Type: "+element.Type+"</p>";
// Append new element
body.appendChild(movie);
});
<html>
<head></head>
<body>
</body>
</html>

var httpRequest = new XMLHttpRequest();
httpRequest.onload = function() {
if (httpRequest.readyState === XMLHttpRequest.DONE) {
if (httpRequest.status === 200) {
var response = JSON.parse(httpRequest.responseText).Search;
var body =document.getElementById('main')
body.innerHTML = ""
//document.getElementsByTagName("body");
response.forEach(function (element, index) {
var img=document.createElement('img')
img.src=element.Poster
var p1=document.createElement('p')
p1.textContent='Title :'
var a=document.createElement('a')
a.textContent=element.Title
a.href=`https://www.imdb.com/title/${element.imdbID}`
p1.appendChild(a)
var p2=document.createElement('p')
p2.textContent=`Year: ${element.Year}`
var p3=document.createElement('p')
p3.textContent=`Type: ${element.Type}`
var div=document.createElement('div')
div.appendChild(img)
div.appendChild(p1)
div.appendChild(p2)
div.appendChild(p3)
body.appendChild(div);
});
} else {
console.log(httpRequest.statusText);
}
}
};
httpRequest.onerror = function() {
console.log(httpRequest.statusText);
};
var searchMovie = function () {
var input = document.querySelector('input').value;
if (input) {
httpRequest.open('GET', 'https://www.omdbapi.com/?s=' + input + '&plot=short&apikey=b7da8d63');
httpRequest.send(null);
}
};
searchMovie();
var eve = document.getElementById("myInput");
eve.addEventListener("keyup", function(event) {
if (event.keyCode === 13) {
searchMovie();
}
});;
.input{
position: fixed;}
<input type="text" class="input" id="myInput" name="country" value="time" ><br><br>
<span id="main"></span>

show next/previous items of an array

I am using next/previous buttons to show the corresponding items of an array. I am experiencing two issues...
1) when the page loads, I need to click previous or next two times before anything will happen
2) Let's say I'm at record ID 10 for example. If I press 'next' 5 times to get to record ID 15, then press 'previous', instead of taking me to 14, it will take me to ID 16. If I then hit previous again (and subsequent times), the ID will then decrease as normal. Same thing with previous: If I start at ID 15 and hit previous down to 10, clicking 'next' will take me to ID 9 instead of 11. Then, subsequent clicks of 'next' will increase the ID as normal.
Hopefully this will help explain what I mean...
https://jsfiddle.net/mjcs351L/
This uses a super hero API. You will need your own to test the code but it's free and doesn't even ask you to sign up: https://www.superheroapi.com/
Thanks in advance for any guidance.
var apiKey = "YOUR API";
var charID = Math.floor((Math.random() * 731) + 1);
var website = "https://www.superheroapi.com/api.php/" + apiKey + "/" + charID;
var req = new XMLHttpRequest();
req.open('GET', website, true);
req.setRequestHeader('Content-Type', 'application/json');
req.addEventListener('load', function() {
var result = JSON.parse(req.responseText);
getinfo();
function getinfo() {
document.getElementById('fullname').innerHTML = result.biography["full-name"];
document.getElementById('name').innerHTML = result.name;
document.getElementById('egos').innerHTML = result.biography["alter-egos"];
document.getElementById('charID').innerHTML = result.id;
document.getElementById('birth').innerHTML = result.biography["place-of-birth"];
document.getElementById('height').innerHTML = result.appearance.height;
document.getElementById('weight').innerHTML = result.appearance.weight;
document.getElementById('gender').innerHTML = result.appearance.gender;
document.getElementById('race').innerHTML = result.appearance.race;
document.getElementById('eye').innerHTML = result.appearance["eye-color"];
document.getElementById('hair').innerHTML = result.appearance["hair-color"];
document.getElementById('occupation').innerHTML = result.work.occupation;
document.getElementById('connections').innerHTML = result.connections["group-affiliation"];
document.getElementById('relatives').innerHTML = result.connections.relatives;
document.getElementById("pic").src = result.image.url;
document.getElementById("pic").style.height = 300;
document.getElementById("pic").style.width = 300;
}
function nextItem() {
var test = charID + 1;
var website = "https://www.superheroapi.com/api.php/" + apiKey + "/" + test;
req.open('GET', website, true);
req.setRequestHeader('Content-Type', 'application/json');
req.addEventListener('load', function() {
var result = JSON.parse(req.responseText);
charID = test;
getinfo();
});
req.send(null);
}
function prevItem() {
var test = charID - 1;
var website = "https://www.superheroapi.com/api.php/" + apiKey + "/" + test;
req.open('GET', website, true);
req.setRequestHeader('Content-Type', 'application/json');
req.addEventListener('load', function() {
var result = JSON.parse(req.responseText);
charID = test;
getinfo();
});
req.send(null);
}
document.getElementById('prev_button').addEventListener('click', function(e) {
prevItem();
});
document.getElementById('next_button').addEventListener('click', function(e) {
nextItem();
});
event.preventDefault();
});
req.send(null);

You should try and follow DRY (don't repeat yourself), it makes it easier to debug code. I've tweaked the code a bit to re-use components.
var apiKey = "YOUR API";
var charID = Math.floor((Math.random() * 731) + 1);
function fetchData(id) {
id = id || charID;
var website = "https://www.superheroapi.com/api.php/" + apiKey + "/" + id;
var req = new XMLHttpRequest();
req.open('GET', website, true);
req.setRequestHeader('Content-Type', 'application/json');
req.addEventListener('load', function() {
var result = JSON.parse(req.responseText);
getinfo(result);
});
req.send(null);
}
fetchData()
function getinfo(result) {
document.getElementById('fullname').innerHTML = result.biography["full-name"];
document.getElementById('name').innerHTML = result.name;
document.getElementById('egos').innerHTML = result.biography["alter-egos"];
document.getElementById('charID').innerHTML = result.id;
document.getElementById('birth').innerHTML = result.biography["place-of-birth"];
document.getElementById('height').innerHTML = result.appearance.height;
document.getElementById('weight').innerHTML = result.appearance.weight;
document.getElementById('gender').innerHTML = result.appearance.gender;
document.getElementById('race').innerHTML = result.appearance.race;
document.getElementById('eye').innerHTML = result.appearance["eye-color"];
document.getElementById('hair').innerHTML = result.appearance["hair-color"];
document.getElementById('occupation').innerHTML = result.work.occupation;
document.getElementById('connections').innerHTML = result.connections["group-affiliation"];
document.getElementById('relatives').innerHTML = result.connections.relatives;
document.getElementById("pic").src = result.image.url;
document.getElementById("pic").style.height = 300;
document.getElementById("pic").style.width = 300;
}
function nextItem(ev) {
ev.preventDefault();
fetchData(++charID)
}
function prevItem(ev) {
ev.preventDefault();
fetchData(--charID)
}
document.getElementById('prev_button').addEventListener('click', prevItem);
document.getElementById('next_button').addEventListener('click', nextItem);

html table no longer supported

As others before I used yql to get data from a website. The website is in xml format.
I am doing this to build a web data connector in Tableau to connect to xmldata and I got my code from here: https://github.com/tableau/webdataconnector/blob/v1.1.0/Examples/xmlConnector.html
As recommended on here: YQL: html table is no longer supported I tried htmlstring and added the reference to the community environment.
// try to use yql as a proxy
function _yqlProxyAjaxRequest2(url, successCallback){
var yqlQueryBase = "http://query.yahooapis.com/v1/public/yql?q=";
var query = "select * from htmlstring where url='" + url + "'";
var restOfQueryString = "&format=xml" ;
var yqlUrl = yqlQueryBase + encodeURIComponent(query) + restOfQueryString + "&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys";
_ajaxRequestHelper(url, successCallback, yqlUrl, _giveUpOnUrl9);
}
function _giveUpOnUrl9(url, successCallback) {
tableau.abortWithError("Could not load url: " + url);
}
However, I still got the message: Html table no longer supported.
As I don't know much about yql, I tried to work with xmlHttpRequestinstead, but Tableau ended up processing the request for ages and nothing happened.
Here my attempt to find another solution and avoid the yql thingy:
function _retrieveXmlData(retrieveDataCallback) {
if (!window.cachedTableData) {
var conData = JSON.parse(tableau.connectionData);
var xmlString = conData.xmlString;
if (conData.xmlUrl) {
var successCallback = function(data) {
window.cachedTableData = _xmlToTable(data);
retrieveDataCallback(window.cachedTableData);
};
//INSTEAD OF THIS:
//_basicAjaxRequest1(conData.xmlUrl, successCallback);
//USE NOT YQL BUT XMLHTTPREQUEST:
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myFunction(this);
}
};
xhttp.open('GET', 'https://www.w3schools.com/xml/cd_catalog.xml', true);
xhttp.send();
return;
}
try {
var xmlDoc = $.parseXML(conData.xmlString);
window.cachedTableData = _xmlToTable(xmlDoc);
}
catch (e) {
tableau.abortWithError("unable to parse xml data");
return;
}
}
retrieveDataCallback(window.cachedTableData);
}
Does anyone have an idea how to get YQL work or comment on my approach trying to avoid it?
Thank you very much!
For reference, if there is any Tableau user that wants to test it on Tableau, here is my full code:
<html>
<head>
<title>XML Connector</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
<script src="https://connectors.tableau.com/libs/tableauwdc-1.1.1.js" type="text/javascript"></script>
<script type="text/javascript">
(function() {
var myConnector = tableau.makeConnector();
myConnector.init = function () {
tableau.connectionName = 'XML data';
tableau.initCallback();
};
myConnector.getColumnHeaders = function() {
_retrieveXmlData(function (tableData) {
var headers = tableData.headers;
var fieldNames = [];
var fieldTypes = [];
for (var fieldName in headers) {
if (headers.hasOwnProperty(fieldName)) {
fieldNames.push(fieldName);
fieldTypes.push(headers[fieldName]);
}
}
tableau.headersCallback(fieldNames, fieldTypes); // tell tableau about the fields and their types
});
}
myConnector.getTableData = function (lastRecordToken) {
_retrieveXmlData(function (tableData) {
var rowData = tableData.rowData;
tableau.dataCallback(rowData, rowData.length.toString(), false);
});
};
tableau.registerConnector(myConnector);
})();
function _retrieveXmlData(retrieveDataCallback) {
if (!window.cachedTableData) {
var conData = JSON.parse(tableau.connectionData);
var xmlString = conData.xmlString;
if (conData.xmlUrl) {
var successCallback = function(data) {
window.cachedTableData = _xmlToTable(data);
retrieveDataCallback(window.cachedTableData);
};
//_basicAjaxRequest1(conData.xmlUrl, successCallback);
//here try another approach not using yql but xmlHttpRequest?
//try xml dom to get url (xml http request)
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myFunction(this);
}
};
xhttp.open('GET', 'https://www.w3schools.com/xml/cd_catalog.xml', true);
xhttp.send();
return;
}
try {
var xmlDoc = $.parseXML(conData.xmlString);
window.cachedTableData = _xmlToTable(xmlDoc);
}
catch (e) {
tableau.abortWithError("unable to parse xml data");
return;
}
}
retrieveDataCallback(window.cachedTableData);
}
function myFunction(xml) {
var xmlDoc = xml.responseXML;
window.cachedTableData = _xmlToTable(xmlDoc);
}
// There are a lot of ways to handle URLS. Sometimes we'll need workarounds for CORS. These
// methods chain together a series of attempts to get the data at the given url
function _ajaxRequestHelper(url, successCallback, conUrl, nextFunction,
specialSuccessCallback){
specialSuccessCallback = specialSuccessCallback || successCallback;
var xhr = $.ajax({
url: conUrl,
dataType: 'xml',
success: specialSuccessCallback,
error: function()
{
nextFunction(url, successCallback);
}
});
}
// try the straightforward request
function _basicAjaxRequest1(url, successCallback){
_ajaxRequestHelper(url, successCallback, url, _yqlProxyAjaxRequest2);
}
// try to use yql as a proxy
function _yqlProxyAjaxRequest2(url, successCallback){
var yqlQueryBase = "http://query.yahooapis.com/v1/public/yql?q=";
var query = "select * from htmlstring where url='" + url + "'";
var restOfQueryString = "&format=xml" ;
var yqlUrl = yqlQueryBase + encodeURIComponent(query) + restOfQueryString + "&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys";
_ajaxRequestHelper(url, successCallback, yqlUrl, _giveUpOnUrl9);
}
function _giveUpOnUrl9(url, successCallback) {
tableau.abortWithError("Could not load url: " + url);
}
// Takes a hierarchical xml document and tries to turn it into a table
// Returns an object with headers and the row level data
function _xmlToTable(xmlDocument) {
var rowData = _flattenData(xmlDocument);
var headers = _extractHeaders(rowData);
return {"headers":headers, "rowData":rowData};
}
// Given an object:
// - finds the longest array in the xml
// - flattens each element in that array so it is a single element with many properties
// If there is no array that is a descendent of the original object, this wraps
function _flattenData(xmlDocument) {
// first find the longest array
var longestArray = _findLongestArray(xmlDocument, xmlDocument);
if (!longestArray || longestArray.length == 0) {
// if no array found, just wrap the entire object blob in an array
longestArray = [objectBlob];
}
toRet = [];
for (var ii = 0; ii < longestArray.childNodes.length; ++ii) {
toRet[ii] = _flattenObject(longestArray.childNodes[ii]);
}
return toRet;
}
// Given an element with hierarchical properties, flattens it so all the properties
// sit on the base element.
function _flattenObject(xmlElt) {
var toRet = {};
if (xmlElt.attributes) {
for (var attributeNum = 0; attributeNum < xmlElt.attributes.length; ++attributeNum) {
var attribute = xmlElt.attributes[attributeNum];
toRet[attribute.nodeName] = attribute.nodeValue;
}
}
var children = xmlElt.childNodes;
if (!children || !children.length) {
if (xmlElt.textContent) {
toRet.text = xmlElt.textContent.trim();
}
} else {
for (var childNum = 0; childNum < children.length; ++childNum) {
var child = xmlElt.childNodes[childNum];
var childName = child.nodeName;
var subObj = _flattenObject(child);
for (var k in subObj) {
if (subObj.hasOwnProperty(k)) {
toRet[childName + '_' + k] = subObj[k];
}
}
}
}
return toRet;
}
// Finds the longest array that is a descendent of the given object
function _findLongestArray(xmlElement, bestSoFar) {
var children = xmlElement.childNodes;
if (children && children.length) {
if (children.length > bestSoFar.childNodes.length) {
bestSoFar = xmlElement;
}
for (var childNum in children) {
var subBest = _findLongestArray(children[childNum], bestSoFar);
if (subBest.childNodes.length > bestSoFar.childNodes.length) {
bestSoFar = subBest;
}
}
}
return bestSoFar;
}
// Given an array of js objects, returns a map from data column name to data type
function _extractHeaders(rowData) {
var toRet = {};
for (var row = 0; row < rowData.length; ++row) {
var rowLine = rowData[row];
for (var key in rowLine) {
if (rowLine.hasOwnProperty(key)) {
if (!(key in toRet)) {
toRet[key] = _determineType(rowLine[key]);
}
}
}
}
return toRet;
}
// Given a primitive, tries to make a guess at the data type of the input
function _determineType(primitive) {
// possible types: 'float', 'date', 'datetime', 'bool', 'string', 'int'
if (parseInt(primitive) == primitive) return 'int';
if (parseFloat(primitive) == primitive) return 'float';
if (isFinite(new Date(primitive).getTime())) return 'datetime';
return 'string';
}
function _submitXMLToTableau(xmlString, xmlUrl) {
var conData = {"xmlString" : xmlString, "xmlUrl": xmlUrl};
tableau.connectionData = JSON.stringify(conData);
tableau.submit();
}
function _buildConnectionUrl(url) {
// var yqlQueryBase = "http://query.yahooapis.com/v1/public/yql?q=";
// var query = "select * from html where url='" + url + "'";
// var restOfQueryString = "&format=xml";
// var yqlUrl = yqlQueryBase + encodeURIComponent(query) + restOfQueryString;
// return yqlUrl;
return url;
}
$(document).ready(function(){
var cancel = function (e) {
e.stopPropagation();
e.preventDefault();
}
$("#inputForm").submit(function(e) { // This event fires when a button is clicked
// Since we use a form for input, make sure to stop the default form behavior
cancel(e);
var xmlString = $('textarea[name=xmlText]')[0].value.trim();
var xmlUrl = $('input[name=xmlUrl]')[0].value.trim();
_submitXMLToTableau(xmlString, xmlUrl);
});
var ddHandler = $("#dragandrophandler");
ddHandler.on('dragenter', function (e)
{
cancel(e);
$(this).css('border', '2px solid #0B85A1');
}).on('dragover', cancel)
.on('drop', function (e)
{
$(this).css('border', '2px dashed #0B85A1');
e.preventDefault();
var files = e.originalEvent.dataTransfer.files;
var file = files[0];
var reader = new FileReader();
reader.onload = function(e) { _submitXMLToTableau(reader.result); };
reader.readAsText(file);
});
$(document).on('dragenter', cancel)
.on('drop', cancel)
.on('dragover', function (e)
{
cancel(e);
ddHandler.css('border', '2px dashed #0B85A1');
});
});
</script>
<style>
#dragandrophandler {
border:1px dashed #999;
width:300px;
color:#333;
text-align:left;vertical-align:middle;
padding:10px 10px 10 10px;
margin:10px;
font-size:150%;
}
</style>
</head>
<body>
<form id="inputForm" action="">
Enter a URL for XML data:
<input type="text" name="xmlUrl" size="50" />
<br>
<div id="dragandrophandler">Or Drag & Drop Files Here</div>
<br>
Or paste XML data below
<br>
<textarea name="xmlText" rows="10" cols="70"/></textarea>
<input type="submit" value="Submit">
</form>

How can I Make Use of Only One Function with My Weather App

In my weather app, I need to get the user location, which I'm getting from ipinfo.io, so that's one http request, and then I make another http request to another api on openweathermap.org. My question is how can I improve my code. Is it possible to make only one http request function and use it for calling both api by passing different parameters. Notice that I do set a number of variables inside each function which are particular to that function. I don't think it is possible to use these variables outside the scope of the function.
Here's my index.js
/*
Weather App Javascript code
author: George Louis
date: 3/11/2018
purpose: get local weather
*/
window.onload = function() {
//variables
var ipUrl = "https://ipinfo.io/json";
var appid = "appid=8e1880f460a20463565be25bc573bdc6";
var location = document.getElementById("location");
var currentDate = new Date();
var dayNight = "day";
//setting the date
var dateElem = document.getElementById("date");
var strDate = currentDate.toString();
dateElem.innerHTML = strDate.substring(0, strDate.length-18)
//calling ipinfo.io/json function
httpReqIpAsync(ipUrl);
//request to ipinfo.io/json
function httpReqIpAsync(url, callback) {
var httpReqIp = new XMLHttpRequest();
httpReqIp.open("GET", url, true)
httpReqIp.onreadystatechange = function() {
if(httpReqIp.readyState == 4 && httpReqIp.status == 200) {
var jsonIp = JSON.parse(httpReqIp.responseText)
var ip = jsonIp.ip;
var city = jsonIp.city;
var country = jsonIp.country;
location.innerHTML = `${city}, ${country}`;
var lat = jsonIp.loc.split(",")[0];
var lon = jsonIp.loc.split(",")[1];
console.log(lat+" "+lon)
var weatherApi = `http://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&${appid}`;
//calling openweathermap api function
httpReqWeatherAsync(weatherApi);
}
}
httpReqIp.send();
}
//request to openweathermap.com json
function httpReqWeatherAsync(url, callback) {
var httpReqWeather = new XMLHttpRequest();
httpReqWeather.open("GET", url, true);
httpReqWeather.onreadystatechange = function() {
if(httpReqWeather.readyState == 4 && httpReqWeather.status == 200) {
var jsonWeather = JSON.parse(httpReqWeather.responseText);
console.log(jsonWeather)
var weatherDesc = jsonWeather.weather[0].description;
var id = jsonWeather.weather[0].id;
var icon = `<i class="wi wi-owm-${id}"></i>`
var temperature = jsonWeather.main.temp;
var tempFaren = Math.round(1.8 * (temperature - 273) + 32)
// console.log(tempFaren)
var humidity = jsonWeather.main.humidity;
var windSpeed = jsonWeather.wind.speed;
//converting visibility to miles
var visibility = Math.round(jsonWeather.visibility / 1000);
// console.log(visibility)
//find whether is day or night
var sunSet = jsonWeather.sys.sunset;
//sunset is 10 digits and currentDate 13 so div by 1000
var timeNow = Math.round(currentDate / 1000);
console.log(timeNow + "<" + sunSet +" = "+(timeNow < sunSet))
dayNight = (timeNow < sunSet) ? "day" : "night";
//insert into html page
var description = document.getElementById("description");
description.innerHTML = `<i id="icon-desc" class="wi wi-owm-${dayNight}-${id}"></i><p>${weatherDesc}</p>`;
var tempElement = document.getElementById("temperature");
tempElement.innerHTML = `${tempFaren}<i id="icon-thermometer" class="wi wi-thermometer"></i>` ;
var humidityElem = document.getElementById("humidity");
humidityElem.innerHTML = `${humidity}%`;
var windElem = document.getElementById("wind");
windElem.innerHTML = `${windSpeed}m/h`;
var visibilityElem = document.getElementById("visibility");
visibilityElem.innerHTML = `${visibility} miles`;
}
}
httpReqWeather.send();
}
}

You can use the modern way to request with fetch instead, if you like. You can also take advantage of destructuring. This is what I would do:
function httpReqIpAsync(url, callback) {
fetch(url)
.then(response => response.json())
.then(jsonIp => {
const { ip, city, country } = jsonIp;
location.textContent = `${city}, ${country}`;
const [lat, lon] = jsonIp.loc.split(",");
const weatherApi = `http://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&${appid}`;
return [weatherApi, callback];
})
.then(httpReqWeatherAsync)
}
//request to openweathermap.com json
function httpReqWeatherAsync([url, callback]) {
// ...
Since each request is separate, I think it makes much more sense for them to be in separate functions, rather than consolidating them together.

Send object id from success function to another function in parse.com

I have a problem on parse.com in which i to take the id of an type and pass it to another function which uploads an image. Then take the type.id among with the image and post it to another function which saves the data to a class.
This is what i've tried until now without success.
--OnClick code
$('#submitId').on("click", function(e, f) {
e.preventDefault();
typeSave(typeid1);
//var objnew1 = typeSave();
console.log("inside onclick " + type2);
var fileUploadControl = $("#profilePhotoFileUpload")[0];
var file = fileUploadControl.files[0];
var name = file.name; //This does *NOT* need to be a unique name
var parseFile = new Parse.File(name, file);
parseFile.save().then(
function() {
//typeSave();
type2 = typeid1;
saveJobApp(parseFile, type2);
console.log("inside save onclick " + type2);
},
function(error) {
alert("error");
}
);
});
-- Type Code
var type;
var typeid1;
var type2;
function typeSave() {
var type = new Parse.Object("type");
var user = new Parse.Object("magazia");
//var bID = objbID;
//user.id = bID;
var cafebar = document.getElementById('cafe_bar').checked;
if (cafebar) {
var valueCafebar = true;
} else {
var valueCafebar = false;
}
var club = document.getElementById('club').checked;
if (club) {
var valueClub = true;
} else {
var valueClub = false;
}
var restaurant = document.getElementById('restaurant').checked;
if (restaurant) {
var valueRestaurant = true;
} else {
var valueRestaurant = false;
}
var pistes = document.getElementById('pistes').checked;
if (pistes) {
var valuePistes = true;
} else {
var valuePistes = false;
}
type.set("cafebar", valueCafebar);
type.set("club", valueClub);
type.set("restaurant", valueRestaurant);
type.set("pistes", valuePistes);
type.save(null, {
success: function(type) {
//saveJobApp(type.id);
var typeid1 = type.id;
console.log("inside type save " + typeid1);
//return ;
},
error: function(type, error) {
alert('Failed to create new object, with error code: ' + error.description);
}
});
}
-- Send Data to parse.com class code
function saveJobApp(objParseFile, type2) {
var jobApplication = new Parse.Object("magazia");
var email = document.getElementById('email').value;
var name = document.getElementById('name').value;
var description = document.getElementById('description').value;
var website = document.getElementById('website').value;
var phone = document.getElementById('phone').value;
var address = document.getElementById('address').value;
var latlon = document.getElementById('latlon').value;
var area = document.getElementById('area').value;
var value = latlon;
value = value.replace(/[\(\)]/g, '').split(', ');
console.log("inside saveJobApp " + type2);
var x = parseFloat(value[0]);
var y = parseFloat(value[1]);
var point = new Parse.GeoPoint(x, y);
jobApplication.set("image", objParseFile);
jobApplication.set("email", email);
jobApplication.set("phone", phone);
jobApplication.set("address", address);
jobApplication.set("name", name);
jobApplication.set("website", website);
jobApplication.set("description", description);
jobApplication.set("area", area);
jobApplication.set("latlon", point);
jobApplication.set("typeID", type2);
jobApplication.save(null, {
success: function(gameScore) {
// typeSave(jobApplication.id);
},
error: function(gameScore, error) {
alert('Failed to create new object, with error code: ' + error.description);
}
});
}
So resuming i am trying when i click the button to first run the typesave() function, after when it posts the type on the type class in parse, to take to type.id from the success function and send it to the parseFile.save().then
and then to send the objectFile and the type2 (which is the type.id) it in saveJobApp and them to save it in class magazia
What i get from the console.logs is this
Which means that my code post to the type class and takes the type.id
but it doesnt send it to the magazia class via the parsefile save.
Any idea of what am i missing?

I noticed your mistake is not about the functions but about trying to pass the type.id as a string and not as a function in the saveJobApp function.
if you try making it like this
function saveJobApp(objParseFile , objtype) {
var jobApplication = new Parse.Object("magazia");
var type = new Parse.Object("type");
type.id = objtype;
jobApplication.set("typeID", type);
I think it will work.
And also update the onclick and the ParseFile save code to this
$('#submitId').on("click", function(e) {
typeSave();
});
function PhotoUpload(objtype){
var fileUploadControl = $("#profilePhotoFileUpload")[0];
var file = fileUploadControl.files[0];
var name = file.name; //This does *NOT* need to be a unique name
var parseFile = new Parse.File(name, file);
parseFile.save().then(
function() {
saveJobApp(parseFile, objtype);
},
function(error) {
alert("error");
}
);
}
And the success function in typeSave()
should be something like this
type.save(null, {
success: function(type) {
PhotoUpload(type.id);
},
Hope this helps :)

Develop Reference

JavaScript is the programming language of the Web.

XMLHttpRequest with multiple queries - javascript

Related

Problem getting HTML to display after forEach loop

show next/previous items of an array

html table no longer supported

How can I Make Use of Only One Function with My Weather App

Send object id from success function to another function in parse.com

Categories

Resources