Develop Reference

Check a json value against a regexp throws a is not a function error

I've a problem with an if statement, where I want to check the value against a regExp. But I get "data[key].name is not a function", how do I go about to fix this issue?
document.querySelector('#search').onkeyup = function() {
var searchField = document.querySelector('#search').value;
var myExp = new RegExp(searchField, "i");
var request = new XMLHttpRequest();
request.open('GET', 'allCountries.json', true);
request.onreadystatechange = function() {
if ((request.readyState === 4) && (request.status === 200)) {
var data = JSON.parse(request.responseText);
var output = '<ul class="searchresult">';
for(var key in data) {
if(data[key].name(myExp) != -1 || data[key].code(myExp) != -1) {
output += '<li>' + data[key].name + ' - ' + data[key].code +
'</li>';
}
}
output += '</ul>';
document.querySelector('#update').innerHTML = output;
}
};
request.send();
};

If you want to check if a String matches a RegEx pattern, use the String#match() function:
Change your if statement to
if (data[key].name.match(myExp) || data[key].code.match(myExp)) {
var myExp = new RegExp("something.*[23]", "i");
var data = {a:{name:"something1", code:"somethingElse1"}, b:{name:"something2", code:"somethingElse2"}, c:{name:"something3", code:"somethingElse3"}}
var output = '<ul class="searchresult">';
for (var key in data) {
if (data[key].name.match(myExp) || data[key].code.match(myExp)) {
output += '<li>' + data[key].name + ' - ' + data[key].code +
'</li>';
}
}
output += '</ul>';
document.querySelector('#update').innerHTML = output;
<div id="update"></div>

If name and code are strings you should test your regex this way:
if(myExp.test(data[key].name) || myExp.test(data[key].code))

capturing all dom manipulation events

I'm trying to create a proxy JS so every request to external resource will be proxied like XHR or any other resource.
so for XHR request i manage to do it with this code:
if(window.XMLHttpRequest)
{
var XMLHttpRequest = window.XMLHttpRequest;
var startTracing = function () {
XMLHttpRequest.prototype.uniqueID = function() {
// each XMLHttpRequest gets assigned a unique ID and memorizes it
// in the "uniqueIDMemo" property
if (!this.uniqueIDMemo) {
this.uniqueIDMemo = Math.floor(Math.random() * 1000);
}
return this.uniqueIDMemo;
}
// backup original "open" function reference
XMLHttpRequest.prototype.oldOpen = XMLHttpRequest.prototype.open;
var newOpen = function(method, url, async, user, password) {
//console.log(url);//new
if (url.includes("somesample")) {
//Debug Only
/*console.log("[" + this.uniqueID() + "] intercepted open (" +
method + " , " +
url + " , " +
async + " , " +
user + " , " +
password + ")");*/
urlParts = /^(?:\w+\:\/\/)?([^\/]+)(.*)$/.exec(url);
hostname = urlParts[1]; // www.example.com
path = urlParts[2]; // /path/to/somwhere
proxyprefix = "http://myproxy.com/xhr.php?url="
fullurl = "http://" + hostname + path;
rewrittenUrl = proxyprefix + btoa(encodeURIComponent(fullurl));
url = rewrittenUrl;
}
this.oldOpen(method, url, async, user, password);
}
XMLHttpRequest.prototype.open = newOpen;
// backup original "send" function reference
XMLHttpRequest.prototype.oldSend = XMLHttpRequest.prototype.send;
var newSend = function(a) {
//console.log("[" + this.uniqueID() + "] intercepted send (" + a + ")");
var xhr = this;
var onload = function() {
/*console.log("[" + xhr.uniqueID() + "] intercepted load: " +
xhr.status +
" " + xhr.responseText);*/
};
var onerror = function() {
/* console.log("[" + xhr.uniqueID() + "] intercepted error: " +
xhr.status);*/
};
xhr.addEventListener("load", onload, false);
xhr.addEventListener("error", onerror, false);
this.oldSend(a);
}
XMLHttpRequest.prototype.send = newSend;
}
startTracing();
}
else if (window.ActiveXObject) {
var ActualActiveXObject = ActiveXObject;
var ActiveXObject = function(progid) {
var ax = new ActualActiveXObject(progid);
if (progid.toLowerCase() == "msxml2.xmlhttp") {
var o = {
_ax: ax,
_status: "fake",
responseText: "",
responseXml: null,
readyState: 0,
status: 0,
statusText: 0,
onReadyStateChange: null
};
o._onReadyStateChange = function() {
var self = o;
return function() {
self.readyState = self._ax.readyState;
if (self.readyState == 4) {
self.responseText = self._ax.responseText;
self.responseXml = self._ax.responseXml;
self.status = self._ax.status;
self.statusText = self._ax.statusText;
}
if (self.onReadyStateChange) self.onReadyStateChange();
}
}();
o.open = function(bstrMethod, bstrUrl, varAsync, bstrUser, bstrPassword) {
/*console.log("intercepted open (" +
bstrMethod + " , " +
bstrUrl + " , " +
varAsync + " , " +
bstrUser + " , " +
bstrPassword + ")");*/
varAsync = (varAsync !== false);
this._ax.onReadyStateChange = this._onReadyStateChange
return this._ax.open(bstrMethod, bstrUrl, varAsync, bstrUser, bstrPassword);
};
o.send = function(varBody) {
return this._ax.send(varBody);
};
}
else
var o = ax;
return o;
}
}
and its working fine.
and because i have got some js that manipulate the dom and adds elements i need to intercept that to.
so i started by rewriting appendChild with that code:
window.callbackFunc = function(elem, args) {
//console.log(elem);
for (var key in elem) {
if (elem.hasOwnProperty(key) && elem[key].src)
{
elem[key].src = "http://myptoxy/proxy.php?u=" +encodeURIComponent(elem[key].src);
}
}
}
window.f = Element.prototype.appendChild;
Element.prototype.appendChild = function() {
window.callbackFunc.call(this, arguments);
return window.f.apply(this, arguments);
};
and thats also working well but i encounter a problem with createlement.
some js code on my site creates an iframe with src that i'm unable to intercept with this code:
document.createElement = function(create) {
return function() {
var ret = create.apply(this, arguments);
//console.log(ret);
for (var key in ret) {
if (ret.hasOwnProperty(key) && ret[key].src) {
ret[key].src = "http://myproxy.com/proxy.php?u=" + encodeURIComponent(elem[key].src);
}
}
return ret;
};
}(document.createElement)
I mean I can intercept the creation but the attributes are empty obviously the script adds the attribute after the element creation)
I tried to use MutationObserver but with no luck...
Any help?
Another approach to the entire problem will be great!

How to save the parameters value between functions call?

I'm trying to create a weather app, sending Ajax requests to OpenWeatherMap. I've got an error in w.getWeatherFunc, when I'm giving the function sendRequest the parameter of w.weather and then giving the same parameter to the function displayFunc, which I'm calling next.
Here is what I've got in the console:
Uncaught TypeError: Cannot read property 'weather' of undefined
at displayFunc (weather.js:46)
at weather.js:78
How can I fix this and make it work?
function Weather () {
var w = this;
var weatherUrl = 'http://api.openweathermap.org/data/2.5/weather?';
var appid = '&appid=c0a7816b2acba9dbfb70977a1e537369';
var googleUrl = 'https://maps.googleapis.com/maps/api/geocode/json?address=';
var googleKey = '&key=AIzaSyBHBjF5lDpw2tSXVJ6A1ra-RKT90ek5bvQ';
w.demo = document.getElementById('demo');
w.place = document.getElementById('place');
w.description = document.getElementById('description');
w.temp = document.getElementById('temp');
w.humidity = document.getElementById('humidity');
w.getWeather = document.getElementById('getWeather');
w.addCityBtn = document.getElementById('addCity');
w.rmCityBtn = document.getElementById('rmCity');
w.icon = document.getElementById('icon');
w.wind = document.getElementById('wind');
w.time = document.getElementById('time');
w.lat = null;
w.lon = null;
w.cityArray = [];
w.weather = null;
function sendRequest (url, data) {
var request = new XMLHttpRequest();
request.open('GET', url, true);
request.send();
request.onreadystatechange = function() {
if (request.readyState == 4 && request.status == 200) {
data = JSON.parse(request.responseText);
console.log(data);
return data;
} else {
console.log(request.status + ': ' + request.statusText);
}
}
}
function displayFunc (obj) {
console.log('obj ' + obj);
w.icon.src = 'http://openweathermap.org/img/w/' + obj.weather[0].icon + '.png';
var timeNow = new Date();
var hours = timeNow.getHours();
var minutes = timeNow.getMinutes() < 10 ? '0' + timeNow.getMinutes() : timeNow.getMinutes();
w.time.innerHTML = hours + ':' + minutes;
w.place.innerHTML = 'Place: ' + obj.name;
w.description.innerHTML = "Weather: " + obj.weather[0].description;
w.temp.innerHTML = "Temperature: " + w.convertToCels(obj.main.temp) + "°C";
w.humidity.innerHTML = "Humidity: " + obj.main.humidity + '%';
w.wind.innerHTML = 'Wind: ' + obj.wind.speed + ' meter/sec';
}
w.convertToCels = function(temp) {
var tempC = Math.round(temp - 273.15);
return tempC;
}
w.getWeatherFunc = function() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(location){
w.lat = location.coords.latitude;
w.lon = location.coords.longitude;
var url = weatherUrl + 'lat=' + w.lat + '&lon=' + w.lon + appid;
var result = sendRequest(url, w.weather);
console.log(result);
displayFunc(result);
});
} else {
alert('Browser could not find your current location');
}
}
w.addCityBtn.onclick = function() {
var newCity = prompt('Please insert city', 'Kiev');
var gUrl = googleUrl + newCity + googleKey;
var newCityWeather = null;
sendRequest(url, newCityWeather);
var location = newCityWeather.results[0].geometry.location;
var newUrl = weatherUrl + 'lat=' + location.lat + '&lon=' + location.lng + appid;
sendRequest(newUrl, w.weather);
displayFunc(newCity);
w.cityArray.push(newCity);
}
window.onload = w.getWeatherFunc;
setInterval(function() {
w.getWeatherFunc();
}, 900000);
}

Your ajax return returns into the browsers engine. As its async you need to create a callback:
function sendRequest(url,data,callback){
//if the data was received
callback(data);
}
Use like this
sendRequest("yoururl",data,function(data){
displayFunc(data);
});

The first time you pass the obj to the function it will save it one scope higher. after that, if you don;t pass the object the one you saved earlier will be used.
var objBkp;
function displayFunc (obj) {
if(undefined === obj) obj = objBkp;
else objBkp = obj;
// rest of code here
}

In your sendRequest you are passing only the value of w.weather, not its reference. JavaScript doesn't pass variables by value or by reference, but by sharing. So if you want to give the value to your variable you should do this inside your function sendRequest:
request.onreadystatechange = function() {
if (request.readyState == 4 && request.status == 200) {
w.weather = JSON.parse(request.responseText);
console.log(data);
return data;
} else {
console.log(request.status + ': ' + request.statusText);
}
}
Also, if you are using the attributes, you don't have to pass them in the function as arguments. Besides that fact, it would be good if you also create get() and set()

What does the console.log(result); in getWeatherFunc gives you?
The problem as I see it is that in the displayFunc the parameter passed is undefined.

nodejs, function jumping to a completely unrelated line for no reason?

So I'm trying to add a command to an already existing project InsomBot to retrieve a League of Legends player's information, I am using lol-api found on npm for this, the only modifications made to this package were to update the API url's as they were outdated and incorrect, my code is below and an image of the issue in a debugger is also below, once the program reaches line 105 it jumps to line 111 for seemingly no reason, perhaps I'm missing a simple indentation error here or I'm not closing something properly, etc. Any help would be appreciated.
i.stack.imgur.com/PnDHU.png (Seems I can't post more than 2 links)
var cc = require('config-multipaas'),
env = require('./env.json'),
Discord = require('discord.js'),
Imgur = require("imgur-search"),
Giphy = require('giphy-wrapper')(env["giphy_key"]),
urban = require('urban'),
api = require('lol-api');
//lol
api.configure("API_KEY_HIDDEN");
var server_port = process.env.OPENSHIFT_NODEJS_PORT || 8080
var server_ip_address = process.env.OPENSHIFT_NODEJS_IP || '127.0.0.1'
var config_overrides = {
PORT: server_port
}
var config = cc(config_overrides);
var mybot = new Discord.Client();
var isearch = new Imgur(env["imgur_key"]);
var termCount = new Map();
var seenURLs = new Map();
mybot.on("message", function (msg) {
var message = msg.content;
//keywords
var giphy = "/giphy ";
var imgurKey = "/img ";
var hatter = "hater";
var def = "/define ";
var commands = "/commands";
var lolstatus = "/lolstatus";
// Reply to direct mentions
if (msg.isMentioned(mybot.user)) {
mybot.reply(msg, "right back atcha");
return;
}
// Giphy
var giphyIndex = message.indexOf(giphy);
if (giphyIndex > -1) {
var term = message.substring(giphyIndex + giphy.length).trim().replace(/\s/g, "+");
var count = termCount.get(term) || 0;
// console.log("count for term " + term + " is: " + count);
termCount.set(term,count+1);
Giphy.search(term, 100, count, function (err, data) {
if (err) {
return;
}
var items = data.data;
var index = Math.floor(Math.random() * items.length / 2.0);
// console.log("found " + items.length + " items for " + term);
while (index < items.length && seenURLs.get(items[index].url) !== undefined) {
index++;
}
// console.log("using? result number " + index);
if (items.length > index) {
var item = items[index];
seenURLs.set(item.url, 1);
mybot.sendMessage(msg, item.url);
} else {
var apology = "sorry, I couldn't find any giphys for the term: " + term;
mybot.reply(msg, apology);
}
});
return;
}
//Imgur
var imgurIndex = message.indexOf(imgurKey);
if (imgurIndex > -1) {
var term = message.substring(imgurIndex + imgurKey.length).trim().replace(/\s/g, "+");
// console.log("searching imgur for term: " + term);
isearch.search(term).then(function(results) {
// console.log("found results: " + JSON.stringify(results,null,2));
if (results === undefined || results.length === 0) {
mybot.reply(msg, "sorry, I couldn't find any imgurs for the term: " + term);
return;
}
var image = results[Math.floor(Math.random() * results.length)];
mybot.sendMessage(msg, "Here's a description of an image: " + image.title + " " + image.description + " " + image.link);
});
return;
}
//lol
var lolIndex = message.indexOf(lolstatus);
debugger;
if (lolIndex > -1) {
debugger;
var term = message.substring(lolIndex + lolstatus.length).trim().replace(/\s/g, "+");
debugger;
api.summonerByName(term, 'na', function(results){
debugger;
console.log(results);
});
}
//Define
var defIndex = message.indexOf(def);
if (defIndex > -1) {
var term = message.substring(defIndex + def.length).trim().replace(/\s/g, "+");
urban(term).first(function(json) {
if (json !== undefined) {
// console.log("got json from UD: " + JSON.stringify(json,null,2));
var definition = "" + json.word + ": " + json.definition + "\nupvotes: " + json.thumbs_up + " downvotes: " + json.thumbs_down + "\n\nExample: " + json.example;
mybot.reply(msg, definition);
}
else {
var apology = "sorry, I couldn't find a definition for: " + term;
mybot.reply(msg, apology);
}
});
}
//Hatter
if (message === hatter) {
mybot.sendMessage(msg, "https://pbs.twimg.com/media/CM5gg9YVAAAVMcn.png");
return;
}
//Commands
if (message === commands) {
mybot.sendMessage(msg, "Available commands:[/] giphy | img | define");
return;
}
});
mybot.login(env["discord_email"], env["discord_pass"]);
Line 105 = api.summonerByName(term, 'na', function(results){
Line 111 = var defIndex = message.indexOf(def);

Line 111 contains the next statement after line 105, so it makes perfect sense.
api.summonerByName() is an asynchronous method, so its callback (lines 106 and 107) will be called only when there are results available, but the rest of your program will continue to run.

JavaScript variable not changing with XMLHttpRequest

I tried to run this but it doesn't work.
It is intended to return a variable assigned inside a function, that was passed as callback to sendRequest(), which is retrieving data from the Internet through XMLHttpRequest asynchronously.
Can anyone tell me why this is not working and always returning ""?
function sendRequest(requestCode, args, callback){
var req = requestEngineUrl + "?req=" + requestCode + ";" + args;
var xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = function(){
if(xmlHttp.readyState == 4)
{
if(callback != null){
callback(xmlHttp.responseText);
}
}
};
xmlHttp.open("GET", req, true);
xmlHttp.send(null);
}
this.assembleProcess = function(){
if(!isNull(this.id) && !isNull(this.titles)){
var titles = this.titles;
var id = this.id;
c = "";
sendRequest('304', id,
function(result){
var res = result.split("/");
var title = res[0];
var possibilities = res[1];
var fcontent = title + '<br><div>';
if(titles.length != possibilities){
console.log("WARNING: [SURVEYCARD].titles has not the same length as possibilities");
}
for(i = 0; i < possibilities; i++){
fcontent += '<div><a onclick="sendRequest("301",' + id + ',' + i + ',null)">' + titles[i] + '</a></div>';
}
fcontent += '</div>';
c = fcontent;
});
return c;
}

As an XMLHttpRequest is async, you should write an async function for that matter, like this
this.assembleProcess = function(callback){
if(!isNull(this.id) && !isNull(this.titles)){
var titles = this.titles;
var id = this.id;
c = "";
sendRequest('304', id,
function(result){
var res = result.split("/");
var title = res[0];
var possibilities = res[1];
var fcontent = title + '<br><div>';
if(titles.length != possibilities){
console.log("WARNING: [SURVEYCARD].titles has not the same length as possibilities");
}
for(i = 0; i < possibilities; i++){
fcontent += '<div><a onclick="sendRequest("301",' + id + ',' + i + ',null)">' + titles[i] + '</a></div>';
}
fcontent += '</div>';
c = fcontent;
callback(c)
});
}
and then, instead of using this.assembleProcess as a function with a result, you should pass a function as parameter:
Instead of
console.log(this.assembleProcess);
do this
this.assembleProcess(function(c){console.log(c)});