I get a syntax error in IE but not in Chrome - javascript

So I have this code (a function) that works in Google Chrome/Fire Fox but not in IE. If I comment this certain line, everything runs fine, except that line is crucial.
I have this function called ReadCookie, which basically just stores the cookies into an array called cookiearray.
function ReadCookie() {
var allcookies = document.cookie; //variable called "allcookies" stores all the cookies.
cookiearray = allcookies.split(';').map(c => c.split('=')[1]); //cookiearray is an array that has all the values as strings.
}
IE said that the 4th line is incorrect cookiearray = allcookies.split(';').map(c => c.split('=')[1]); but I don't know why.
Thanks!

Arrow functions (like c => c.split('=')[1]) are a new feature in ES6. Chrome supports them. Internet Explorer does not.

I believe it's an ECMA script 6 thing with the way you're using the map.
So you can write it like this instead:
cookiearray = allcookies.split(';').map(function (c) {
return c.split('=')[1];
}); //cookiearray is an array that has all the values as strings.

The solution I implemented was as follows
goto: https://babeljs.io/repl
Paste in your code and select es2015.
In your new code paste the following, if you are using forEach (which is again not supported in IE) :
if (window.NodeList && !NodeList.prototype.forEach) {
NodeList.prototype.forEach = Array.prototype.forEach;
}
Use indexOf instead of includes

Related

JS Error with for(var key of...)

I have some code that I have been using in an application for some time now where all of our internal users are using firefox for running the app. There are a few people wanting to run IE and there is a block of code that I believe is hitting an error and I don't know exactly why..
// Given a field name, check to see if its in our output. If so, return the formatted link
function createLink(field, val) {
var output = {
'ntid': 'https://web.internal/profile/' + val,
'email': 'mailTo:' + val
};
for (var key of Object.keys(output)){
if (field.toLowerCase().includes(key)){
return `${val}`;
}
}
return val;
}
In IE 11, I get a console error SCRIPT1004: Expected ';' which refers to the line for (var key of Object.keys(output)){.
Is this not supported in IE11 or is there some type of syntax that FF handles correctly that IE doesn't?
Instead of the "for...of", try a "for...in" which is supported by every browser for a long time now. Syntax is exactly the same.
(There is a difference between them but I guess in your case it's not relevant... More about this here: What is the difference between ( for... in ) and ( for... of ) in javascript? )
Instead of the "for...of", try a "for...in" which is supported by
every browser for a long time now. Syntax is exactly the same.
Not entirely:
https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Statements/for...of

Same code, same browser, different behavior for users

I have a piece of JS code which parses through a file, then associated the array with a key-value pair map, and then iterates it through it to find the proper city name with a .includes method. My problem is that the final field (where the function in question is called) works fine on my end for both Chrome and Firefox. It does not work for some reason for my group members.
This is the JS snippet that does the iterating:
Edit: this is how the file is being opened:
var rawFile = new XMLHttpRequest();
rawFile.open("GET", "../data/myFile.txt", false);
for (var i = 0; i < allText.length; i++) {
if (i % 2 == 0) {
myMap[allText[i]] = allText[i + 1];
}
}
var city = document.getElementById("city").value;
for (var key in myMap) {
if (myMap.hasOwnProperty(key)) {
if (myMap[key].toLowerCase().includes(city.toLowerCase())) {
document.getElementById("city").value = myMap[key]
document.getElementById("zipcode").value = key;
}
}
}
This is the html part that calls it:
<label for="myLabel">City: </label>
<input type="text" name="myLabel" id="myLabel" onblur="readTextFile()">
What exactly is the problem and how can I troubleshoot it as it makes no sense to me, coming from the world of Java and C++, where I have never faced such an issue before. If you are wondering why the JS might be kinda ugly, it is the result of a student with a teacher who thinks that showing W3Schools examples is equivalent to good teaching.
Javascript includes function may work erratically due to some browsers not supporting it. You need to be wise while choosing the javascript functions specially when mozilla may have some functions which are not supported on some browsers. W3schools also provides a list of Browser support for a function. Check the link below for that list for includes function:
http://www.w3schools.com/jsref/jsref_includes.asp
Alternatively, you can use indexOf function like:
myMap[key].toLowerCase().indexOf(city.toLowerCase()) >= 0
I have myself faced issues with includes function hence providing you a workaround. Happy programming.

Javascript What method should I use to find or check if a string exists in an array?

I found these methods, indexOf() apparently doesn't work for internet explorer 8
There are a lot of options, I want to know which one is like the defacto or what I should opt to use for best results.
Also, if the result is undefined, how do I use that as a value do I simply use it as a string like "undefined" or is it null?
array.find()
array.findIndex()
array.indexOf("string");
In this example of replacing a string within an array knowing the index, they use indexOf, should I be concerned of incompatibility?
var index = items.indexOf(3452);
if (index !== -1) {
items[index] = 1010;
}
It's perfectly acceptable to use a polyfill for these types of things:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf#Polyfill
if (!Array.prototype.indexOf) {
// paste polyfill here
}
You could also use methods provided by different libraries:
// jQuery
if ($.inArray("some_value", someArray) > -1) { ... }
// Underscore
if (_.contains(someArray, "some_value")) { ... }

jQuery append fail in IE

I have this object that I would like to append to my div#doctors-list.
Firefox,Chrome work like a charm.But all IE fail. No errors are shown in the console.
$.each(sorteddoctorsArray[i2], function(idx, val) {
if ( !$.browser.msie ) {
$('div#doctors-list').append(val);
}else{
console.log(val);
// this logs [object Object]
$('div#doctors-list').append(val); // fails
}
});
any suggestions?
open it in IE and firefox to see the difference
try:
$('div#doctors-list').html($('div#doctors-list').html()+val);
It's hard to say when you disable the IE-Code(it currently is commented out).
But one issue I see so far(a few lines above the code posted by you) :
$('div#doctors-list').html('');
for(var i in priority){
for(var i2 in sorteddoctorsArray){
Both, priority and sorteddoctorsArray are native Arrays, you should never walk native Arrays by using for...in, always use for(var i=0;i<array.length;++i)
The for...in -Syntax will walk trough all members of an object. Also the build-in Array-members, e.g. length , will be fetched, what may result in errors.

javascript get function body

I have a function e.g.
var test = function () {alert(1);}
How can I get the body of this function?
I assume that the only way is to parse the result of test.toString() method, but is there any other way? If parsing is the only way, what will be the regex to get to body? (help with the regex is extremly needed, because I am not familiar with them)
IF(!!!) you can get the toString(), then you can simply take the substring from the first indexOf("{") to the lastIndexOf("}"). So, something like this "works" (as seen on ideone.com):
var test = function () {alert(1);}
var entire = test.toString(); // this part may fail!
var body = entire.substring(entire.indexOf("{") + 1, entire.lastIndexOf("}"));
print(body); // "alert(1);"
2015 update
Upon revisiting the state of function decompilation, it can said that it's generally safe in certain well-considered use cases and enviroments (e.g: Node.js workers with user defined functions).
It should be put in the same bucket as eval, which is a powerful tool that has its place, but should only be used on rare occasions. Think twice, that's my only advice.
The conclusions from Kangax's new research:
It's still not standard
User-defined functions are generally looking sane
There are oddball engines (especially when it comes to source code
placement, whitespaces, comments, dead code)
There might be future oddball engines (particularly mobile or unusual
devices with conservative memory/power consumption)
Bound functions don't show their original source (but do preserve
identifier... sometimes)
You could run into non-standard extensions (like Mozilla's expression
closures)
ES6 is coming, and functions can now look very different than
they used to
Minifiers/preprocessors are not your friend
"function decompilation" — a process of getting
string representation of a Function object.
Function decompilation is generally
recommended against, as it is a
non-standard part of the language, and
as a result, leads to code being
non-interoperable and potentially
error-prone.
#kangax on comp.lang.javascript
Simplest Use-Case
If you just want to execute the body of the function (e.g. with eval or using the Worker API), you can simply add some code to circumvent all the pitfalls of extracting the body of the function (which, as mentioned by others, is a bad idea in general):
'(' + myFunction + ')()';
I am using this trick in this Worker-related JSFiddle.
Complete Function Serialization With Accurate Stacktrace
I also wrote a more complete library that can:
Serialize any kind of function to string
Be able to send that string representation anywhere else, execute it with any custom arguments, and be able to reproduce the original stacktrace
Check out my CodeBuilder code here.
Note that much of the code takes care of making sure that we get an accurate stacktrace, wherever we execute the serialized function at a later point in time.
This fiddle demonstrates a simplified version of that logic:
Use JSON.stringify to properly serialize the function (that comes in handy when, e.g., we want to make it part of a bigger serialization "data package").
We then wrap it in one eval to un-escape the "JSON-ish"-escaped string (JSON does not allow functions + code, so we must use eval), and then in another eval to get back the object we wanted.
We also use //# sourceMappingURL (or the old version //# sourceMappingURL) to show the right function name in the stacktrace.
You will find that the Stacktrace looks Ok, but it does not give you the correct row and column information relative to the file that we defined the serialized functions in, which is why my Codebuilder makes use of stacktracejs to fix that.
I use the CodeBuilder stuff in my (now slightly dated) RPC library where you can find some examples of how it is used:
serializeInlineFunction example
serializeFunction example
buildFunctionCall example
extending #polygenelubricants' answer:
using: .toString()
Testee:
var y = /* olo{lo} */
/* {alala} */function/* {ff} */ x/*{s}ls{
}ls*/(/*{*{*/)/* {ha-ha-ha} */
/*
it's a function
*/
{
return 'x';
// }
}
/*
*/
By indexOf and lastIndexOf:
function getFunctionBody(fn) {
function removeCommentsFromSource(str) {
return str.replace(/(?:\/\*(?:[\s\S]*?)\*\/)|(?:([\s;])+\/\/(?:.*)$)/gm, '$1');
}
var s = removeCommentsFromSource( fn.toString() );
return s.substring(s.indexOf('{')+1, s.lastIndexOf('}'));
};
getFunctionBody(y);
/*
"
return 'x'
"
*/
used: rm comments from js source
This code provides the body when using ES6 arrow functions like var testFn=(q)=>q+1;
function getFunctionBody(test){
var entire = test.toString(); // note: not safe-guarded; this part may fail like this!
return entire.substring((entire.indexOf("{")+1)||(entire.indexOf("=>")+2), entire.lastIndexOf("}")!==-1?entire.lastIndexOf("}"):entire.length);
}
//testing/showcase code
var tests = [
function () {alert(1);},
()=>{return 1;},
q=>q+1
];
for (var i=0;i<tests.length;i++){
console.log(tests[i],getFunctionBody(tests[i]));
}
I originally submitted this code as an edit to polygenelubricants accepted answer, but it was rejected as the changes were considered to be too drastic.
var fn1 = function() {};
var fn2 = function() { alert("lol!"); };
Function.prototype.empty = function() {
var x = this.toString().match(/\s*function\s*\w*\s*\(.*?\)\s*{\s*}\s*;?\s*/);
return x != null;
};
alert(fn1.empty()); // true
alert(fn2.empty()); // false
'
Solução proposta pelo Paulo Torres no grupo A.P.D.A. no facebook.
you can try this functiion:
function extractFunctionBody(fn) {
var reg = /function \((.*)\)[ ]?{(.*)}$/g;
var match = reg.exec(fn.toString().replace(/\n/g, ";"));
if (match){
return match[2];
} else {
return "";
}
}
Try this:
/\{(\s*?.*?)*?\}/g.exec(test.toString())[0]
test.toString() will hold your entire declaration.
/{(\s*?.?)?}/g will match everything between your braces

Categories

Resources