I wanted to get the value of an HTML input by using the dollar ($) sign, since I have to make a String the only way I can think of is using the eval() function, but since it is not recommended I wanted to know which alternative could I use.
Basically here ${player} can be "player1" or "player2":
eval(`${player}NameInput`)
So that it access one or the other of this input elements:
const player1NameInput = document.getElementById("name1")
const player2NameInput = document.getElementById("name2")
Here is the code with more context:
const player1NameInput = document.getElementById("name1")
const player2NameInput = document.getElementById("name2")
const player = event.target.id.slice(7,14) // Can be "player1" or "player2"
let name = document.getElementById(`${player}-name`) // A label
name.textContent = eval(`${player}NameInput`).value + ": "
eval(`${player}NameInput`).value = ""
I've tried the function approach and the window[variable] approach but I couldn't make them work, I also have the feeling that there must be a simpler approach.
In the function approach I did:
Function('"use strict"; return ' + `${player}NameInput`)()
Which gives me this error:
Uncaught ReferenceError: player1NameInput is not defined
at eval (eval at changeName (script.js:158:21), <anonymous>:3:15)
at HTMLButtonElement.changeName (script.js:158:77)
Thanks!
If you really need to use string interpolation to get the value, you can put the values in an object:
const players =
{
player1NameInput: document.getElementById("name1"),
player2NameInput: document.getElementById("name2")
};
const player = event.target.id.slice(7,14); // Can be "player1" or "player2"
let name = document.getElementById(`${player}-name`); // A label
name.textContent = players[`${player}NameInput`].value + ": ";
players[`${player}NameInput`].value = '';
Use an object to store them by name, instead of multiple variables.
const nameInputs = {
player1: document.getElementById("name1"),
player2: document.getElementById("name2"),
}
const nameLabels = {
player1: document.getElementById("player1-name"),
player2: document.getElementById("player2-name"),
};
const player = event.target.id.slice(7,14) // Can be "player1" or "player2";
nameLabels[player].textContent = nameInputs[player].value + ": ";
nameInputs[player].value = "";
Even easier to access (in general) might be an array, with index 0 for player 1 and index 1 for player 2. This will make for simpler code when iterating all elements or toggling between them.
Related
first time using stackoverflow. :)
I am a beginner in JS trying to add values to a list of variables that may change based on the number of passengers variable. (ie. if numRiders = 4 I need to assign values to passenger1Name, passenger2Name, passenger3Name, passenger4Name)
I am trying to use eval inside a loop to do it:
for(i = 0; i<=numRiders; i++) {
j = i+1
var l ='var '
var k = 'passenger'
let nameJ = ride[i].passengerDetails.first + ' ' + ride[i].passengerDetails.last;
console.log (nameJ)
eval(l+k+j+ 'Name' + '= ' + nameJ + ';')
console.log(passenger1Name)
I am getting this output right after the nameJ console.log
VM321:1 Uncaught SyntaxError: Unexpected identifier
at pageLoad
Anyone know how can I solve this or approach this differently? Unfortunately, I can't change the variables names (e.g. passengerXName) to one that would make it easier to assign dynamic variables.
Thank you
nameJ appears to be a string. So you need to put quotes around it.
eval(l+k+j+ 'Name' + '= "' + nameJ + '";')
But as others stated in the comments, defining variables dynamically like this is almost never what you really want.
I have since 1996 or so RARELY seen any reason for eval
This is recommended
const rides = [
{ passengerDetails: {first:"Fred",last:"Flinstone"}},
{ passengerDetails: {first:"Wilma",last:"Flinstone"}}
]
const names = rides.map(ride => `${ride.passengerDetails.first} ${ride.passengerDetails.last}`)
console.log(names)
or even
const rides = [
{ passengerDetails: {first:"Fred",last:"Flinstone"}},
{ passengerDetails: {first:"Wilma",last:"Flinstone"}}
]
const names = rides.reduce((acc,ride,i) => {
acc[`passenger${i+1}name`] = `${ride.passengerDetails.first} ${ride.passengerDetails.last}`
return acc;
},{})
console.log(names)
If you MUST, try this assuming you have a window scope to add it to
const rides = [
{ passengerDetails: {first:"Fred",last:"Flinstone"}},
{ passengerDetails: {first:"Wilma",last:"Flinstone"}}
]
rides.forEach((ride,i) => {
let nameJ = `${ride.passengerDetails.first} ${ride.passengerDetails.last}`;
window[`passenger${i+1}Name`]=nameJ;
})
console.log(passenger1Name)
The option from #ZacAnger
var names = {};
for(i = 0; i<=numRiders; i++) {
j = i+1
let nameJ = ride[i].passengerDetails.first + ' ' + ride[i].passengerDetails.last;
names['passenger'+ j+ 'Name'] = nameJ;
}
I meet a weird problem. If I set a variable direclty with a value like this "const myString = 'someWord';" that work but if I take the value from a variable like this "const myString = someVariable;", that doesn't work, and if I set the value on a conditional block that doesn't work too.
So, work:
var jsonName = 'tramwayen';
const pathex = require('../assets/JSON/' + jsonName);
var json = JSON.parse(JSON.stringify(pathex));
doesn't work:
var jsonName = variable;
const pathex = require('../assets/JSON/' + jsonName);
var json = JSON.parse(JSON.stringify(pathex));
doesn't work:
var jsonName = '';
if (condition) {
jsonName = 'tramwayen';
}
const pathex = require('../assets/JSON/' + jsonName);
var json = JSON.parse(JSON.stringify(pathex));
I really don't understand.
I have this error :
"Invalid call at line 41: require('../assets/JSON/' + jsonName2)"
Most JS bundlers cannot handle dynamic require imports. You might want to load all of the files, and put them in an object:
let data = {
tramwayen: require('../assets/JSON/tramwayen.json'),
something: require('../assets/JSON/something.json'),
// and so on
};
And use the data object to retrieve the data you need.
From what I read while doing some research, it seems impossible to made a require dynamically. In react native require should be static.
But there are some solutions to avoid this issue.
Here is mine, I put all data of my differents Json on one single json, and I dynamically choice wich part of the data I want to get.
I can also, put all the static require on an object, and choose dynamicaly wich require I want to get.
solution 1:
const id = window.currentPI;
const json = require('../assets/JSON/mainData.json');
const nbreOfPix = json[`${id}`].preData.numberOfPictures;
solution 2:
const IMAGES = {
tramwayen: require('../assets/CtrlPI/PHOTO_articles/008_02_Img.png'),
tramwayen2: require('../assets/CtrlPI/PHOTO_articles/HC002_04_Img.png')
};
getImage = (name) => {
return IMAGES[name];
};
To avoid a javascript heap problem, I use multiple arrays: family1, family2,family3 ..., dogs1, dogs2, dogs3 ... Use example: 'family1 and dogs1', or 'family132 and dogs132' to create a new array 'results'.
How do I pass the "id" correctly
let id = 'value here'
this.family + id
this.dogs + id
So far my str itself is pushed int the new array: t-h-i-s-.-f-a-m-i-l-y-1
for (let i = +0; i < +20; i++) {
const id = 1;
let str = 'this.family'+id; // ?
let str = 'this.dogs'+id; // ?
console.log(str);
const result = {
familyType: str[i], // behavior: t-h-i-s-.-f-a-m-i-l-y-1
protocol: this.dogs1[i], // expected original behavior
};
results.push(result);
}
}
You are looking for:
let str = this['family'+id];
But this is generally a bad design pattern. Don't name your variables with incremental numbers. Use 2D arrays (i.e. arrays having arrays as values), like this.dog[id][i]. If you have "a javascript heap problem", then it is caused by some other code.
Hi I want to write clean code that I can read and have a good overview.
So I wrote this:
var id = '12345';
var coll = ['scc-roles','scc-proj-' + id];
var spm = 'some-role';
var data = {role : spm, roleNames : 'sccss-user', collection : coll}
var spmRoleId = xdmp.eval('declareUpdate();
var sec = require("/MarkLogic/security.xqy");
var roleId = sec.createRole(role, "Generated project member", roleNames, null, collection,null,null);
var uri = "http://marklogic.com/xdmp/roles/" + roleId;
xdmp.documentAddCollections(uri,collection)',data,{"database" : xdmp.securityDatabase()})
But apparently a newline is not allowed in xdmp.eval() ?
[javascript] JS-JAVASCRIPT: + 'var sec = require("/MarkLogic/security.xqy"); -- Error running JavaScript request: SyntaxError: Unexpected token ILLEGAL
I tried using a '+' sign to generate a strng over more then one line, swapping single and double quotes but no luck.
Being able to test this code (copy paste) to the security database makes a lot of sense to me...
If I wrap it all in one unreadable line , it works ok.
hugo
The way to effectively create a new line in a JavaScrit string is to escape the new line char like this
var str = "I'm displayed\
in two line";
In the final file, you will see effectively a new line.
If you want see in the dist output the new line but not in your src string you could just insert the \n equivalent of a return to line.
var str = "I'm displayed\n in two line";
In es6 you will be able to use ` char to achieve the same thing without \
var str = `I'm displayed
in two line`;
Maybe you would like the strange, yet useful array-notation way of doing this:
var multiline1 = [
'the lazy fox',
'jumped over',
'the dead chicken',
].join('\n');
and the result:
the lazy fox
jumped over
the dead chicken
In general, you should avoid string concatenation to build code for eval. Strings make it difficult to spot bugs and are a great vector for injection attacks. Instead, I'd advise you to write a proper function in XQuery or JavaScript and use xdmp.invokeFunction to evaluate it. invokeFunction takes all of the same options as xdmp.eval.
Here's an example that gets roles in the context of a security database. The applyAs function returns a function that wraps the function provided by the caller, evaluating it with the eval options provided.
function applyAs(fct, options) {
return function() {
var params = Array.prototype.slice.call(arguments);
// Curry the function to include the params by closure.
// xdmp.invokeFunction requires that invoked functions have
// an arity of zero.
var f = (function() {
return fct.apply(null, params);
}).bind(this);
// Allow passing in user name, rather than id
if(options.user) { options.userId = xdmp.user(options.user); delete options.user; }
// Allow the functions themselves to declare their transaction mode
if(fct.transactionMode && !(options.transactionMode)) { options.transactionMode = fct.transactionMode; }
return xdmp.invokeFunction(f, options); // xdmp.invokeFunction returns a ValueIterator
}
}
/**
* Gets an Array of id-name Objects. Requires privileged access to security.
*
* #param names An optional Array of role IDs as strings used to filter
* #return An Array of Objects with role ID keys and role name values
*/
function getRoles(names) {
var sec = require('/MarkLogic/security.xqy');
var db = {database: xdmp.securityDatabase()};
var roleIDs = applyAs(sec.getRoleIds, db);
var rolesItr;
if(Array.isArray(names)) {
rolesItr = roleIDs(xdmp.arrayValues(names));
} else {
rolesItr = roleIDs();
}
var roleNames = applyAs(sec.getRoleNames, db)(rolesItr).toArray().map(function(el) { return el.textContent; });
var roles = [];
var i = 0;
for(var role of rolesItr) {
var r = {}
r[role.textContent] = roleNames[i++];
roles.push(r);
}
return roles;
}
getRoles();
Originally from a gist.
I'm currently using javascript eval() to check and create a multidimensional object that I have no idea of the depth.
Basically, I want to know if there's any way to create this multi-depth object. The object can be as deep as result['one']['two']['three']['four']['five']['six']['seven']. I know there are cases where using eval() is perfectly fine, but I'm also worried about performance. I thought about referencing each depth to a new variable, but I don't know how to do pointers in Javascript
create = function(fields, create_array){
var field;
for (j = 0; j < len; j++){
field = fields.slice(0, j).join('');
if (field){
// is there any way to do this without eval?
eval('if (typeof result' + field + ' == "undefined" || !result' + field + ') result' + field + ' = ' + (create_array?'[]':'{}') + ';');
}
}
}
How about
var deep = { one: { two: { three: { four: { five: { six: { seven: 'peek-a-boo!' }}}}}}};
I don't see what "eval()" has to do with this at all; there's no reason to "initialize" such an object. Just create them.
If you wanted to write a function with an API like you've got (for reasons I don't understand), you could do this:
function create(fields, create_array) {
var rv = create_array ? [] : {}, o = rv;
for (var i = 0; i < fields.length; ++i) {
o = o[fields[i]] = create_array ? [] : {};
}
return rv;
}
There doesn't seem to be any point to the "create_array" flag, since you're presumably always using strings for keys.
Never mind, found my way in. I used a recursive function to ensure that the object was created properly.
create = function(create_array, res, path){
var field = fields.shift();
if (field){
if (typeof res[field] == "undefined" || !res[field]) res[field] = (create_array?[]:{});
path.push('["' + field + '"]');
create(create_array, res[field], path);
}
}
var result = {}, strpath = [], fields[];
create(true, result, strpath);
eval('result' + strpath.join('') + ' = value;');
being variable "field" a variable outside the function, that contained the levels of the object. doing result["field"]["name"]["first"] = value without the ["field"] or ["name"] field existing or defined as an object, would throw an error and stop execution, that's why I'm pre-creating the object variable, either as an array or object.
I couldn't find another option for the second eval() though. There's no way to provide a way to access multiple properties on an object without knowing the depth.