Develop Reference

Array with JSON Objects inside that are written starting and ending with curly braces error

I am given an "array" with JSON Objects inside like so (it's not an actual array since it begins with curly braces):
{{"x1","x2"},{"y1","y2"},{"z1","z2"}}
How can I make it so that the first and last { curly braces } becomes square braces [ ]?
Javascript does not recognize the above example as an array and throws an error. Calling JSON.stringify or JSON.parse does not work either since the above is not actual JSON/Array. Only when it has [ square brackets ] does it actually work since then it is an array with JSON objects inside it. Like so:
[{"x1","x2"},{"y1","y2"},{"z1","z2"}]
I was thinking of making it into a string first, then replacing the first and last char with [ and ] respectively, but calling String(value), where value is the first "array", simply doesn't cut it as it thinks it is a JSON and throws unexpected token if I even declare it.

If you're trying to create an array of JSON objects, you could do as follow:
const object = new Array(
{ 'x1': 'x2' },
{ 'y1': 'y2' },
{ 'z1': 'z2' }
);
console.log( object[0] );
expecting in the console the following result:
{
x1: "x2"
}
Hope it helps.

As it was already pointed out in comments, your input JSON isn't really JSON at all - you'll want a custom parser for it. Here's something quickly scrambled from Haxe's haxe.format.JsonParser:
var Std = function() { };
Std.parseInt = function(x) {
if(x != null) {
var _g = 0;
var _g1 = x.length;
while(_g < _g1) {
var i = _g++;
var c = x.charCodeAt(i);
if(c <= 8 || c >= 14 && c != 32 && c != 45) {
var nc = x.charCodeAt(i + 1);
var v = parseInt(x,nc == 120 || nc == 88 ? 16 : 10);
if(isNaN(v)) {
return null;
} else {
return v;
}
}
}
}
return null;
};
var StringBuf = function() {
this.b = "";
};
var JsonParser = function(str) {
this.str = str;
this.pos = 0;
};
JsonParser.prototype = {
doParse: function() {
var result = this.parseRec();
var c;
while(true) {
c = this.str.charCodeAt(this.pos++);
if(!(c == c)) {
break;
}
switch(c) {
case 9:case 10:case 13:case 32:
break;
default:
this.invalidChar();
}
}
return result;
}
,parseRec: function() {
while(true) switch(this.str.charCodeAt(this.pos++)) {
case 9:case 10:case 13:case 32:
break;
case 34:
return this.parseString();
case 123:
var arr = [];
var comma = null;
while(true) switch(this.str.charCodeAt(this.pos++)) {
case 9:case 10:case 13:case 32:
break;
case 44:
if(comma) {
comma = false;
} else {
this.invalidChar();
}
break;
case 125:
if(comma == false) {
this.invalidChar();
}
return arr;
default:
if(comma) {
this.invalidChar();
}
this.pos--;
arr.push(this.parseRec());
comma = true;
}
break;
default:
this.invalidChar();
}
}
,parseString: function() {
var start = this.pos;
var buf = null;
var prev = -1;
while(true) {
var c = this.str.charCodeAt(this.pos++);
if(c == 34) {
break;
}
if(c == 92) {
if(buf == null) {
buf = new StringBuf();
}
var s = this.str;
var len = this.pos - start - 1;
buf.b += len == null ? s.substr(start) : s.substr(start,len);
c = this.str.charCodeAt(this.pos++);
if(c != 117 && prev != -1) {
buf.b += String.fromCodePoint(65533);
prev = -1;
}
switch(c) {
case 34:case 47:case 92:
buf.b += String.fromCodePoint(c);
break;
case 98:
buf.b += String.fromCodePoint(8);
break;
case 102:
buf.b += String.fromCodePoint(12);
break;
case 110:
buf.b += String.fromCodePoint(10);
break;
case 114:
buf.b += String.fromCodePoint(13);
break;
case 116:
buf.b += String.fromCodePoint(9);
break;
case 117:
var uc = Std.parseInt("0x" + this.str.substr(this.pos,4));
this.pos += 4;
if(prev != -1) {
if(uc < 56320 || uc > 57343) {
buf.b += String.fromCodePoint(65533);
prev = -1;
} else {
buf.b += String.fromCodePoint(((prev - 55296 << 10) + (uc - 56320) + 65536));
prev = -1;
}
} else if(uc >= 55296 && uc <= 56319) {
prev = uc;
} else {
buf.b += String.fromCodePoint(uc);
}
break;
default:
throw new ("Invalid escape sequence \\" + String.fromCodePoint(c) + " at position " + (this.pos - 1));
}
start = this.pos;
} else if(c != c) {
throw new ("Unclosed string");
}
}
if(prev != -1) {
buf.b += String.fromCodePoint(65533);
prev = -1;
}
if(buf == null) {
return this.str.substr(start,this.pos - start - 1);
} else {
var s1 = this.str;
var len1 = this.pos - start - 1;
buf.b += len1 == null ? s1.substr(start) : s1.substr(start,len1);
return buf.b;
}
}
,invalidChar: function() {
this.pos--;
throw "Invalid char " + this.str.charCodeAt(this.pos) + " at position " + this.pos;
}
};
JsonParser.parse = function(s) {
return new JsonParser(s).doParse();
}

If someone is giving you this you really ought to go back to the source and inform them that they are NOT providing you with a valid input.
I avoid having to hack around poor source data.
Fix it at the source and not have to deal with it everywhere that it is used.

Call a function with its parameters if all required keys are pressed

I am trying to create a function that will call another function (passed as a parameter) if all the required keys are pressed. This is what I have so far:
function multiKeyPress(funcName, parms, key0, key1, key2, key3, key4, key5) {
var down = [];
var noKeys = arguments.length - 2
var args = parms
// for (i = 0; i < noKeys; i++) {
// if (i == noKeys - 1) {
// keyPress += ('down[key' + i + '])')
// } else {
// keyPress += ('down[key' + i + '] && ')
// }
// }
console.log(noKeys)
console.log(args);
switch (noKeys) {
case 1:
$(window).keydown(function(e) {
down[e.keyCode] = true;
}).keyup(function(e) {
if (down[key0]) {
funcName.apply(this, args);
}
down[e.keyCode] = false;
});
break;
case 2:
$(window).keydown(function(e) {
down[e.keyCode] = true;
}).keyup(function(e) {
if (down[key0] && down[key1]) {
funcName.apply(this, args);
}
down[e.keyCode] = false;
});
break;
case 3:
$(window).keydown(function(e) {
down[e.keyCode] = true;
}).keyup(function(e) {
if (down[key0] && down[key1] && down[key2]) {
funcName.apply(this, args);
}
down[e.keyCode] = false;
});
break;
case 4:
$(window).keydown(function(e) {
down[e.keyCode] = true;
}).keyup(function(e) {
if (down[key0] && down[key1] && down[key2] && down[key3]) {
funcName.apply(this, args);
}
down[e.keyCode] = false;
});
break;
case 5:
$(window).keydown(function(e) {
down[e.keyCode] = true;
}).keyup(function(e) {
if (down[key0] && down[key1] && down[key2] && down[key3] && down[key4]) {
funcName.apply(this, args);
}
down[e.keyCode] = false;
});
break;
case 6:
$(window).keydown(function(e) {
down[e.keyCode] = true;
}).keyup(function(e) {
if (down[key0] && down[key1] && down[key2] && down[key3] && down[key4] && down[key5]) {
funcName.apply(this, args);
}
down[e.keyCode] = false;
});
break;
}
}
Near the top of the function I have commented out a loop that would create a string with the necessary keys but I couldnt pass that as a condition because a string will be a truthy value. Therefore I resorted to a long switch statement. This currently works but I was wondering if there was a way to clean it up or if there are any potential problems.
Thanks

You're on the right track, you just need to think about using arrays.
function multiKeyPress(funcName, parms) {
var keysPressed = Array.prototype.slice.call(arguments, 2);
var down = [];
$(window).keydown(function(e) {
down[e.keyCode] = true;
}).keyup(function(e) {
var allPressed = keysPressed.every(function (key) {
return down[key];
});
if (allPressed) {
funcName.apply(this, args);
}
down[e.keyCode] = false;
});
}
That gets any number of keys passed into the function by treating the arguments like an array. Then the keyup handler uses the every method of Array to make sure all of the entries in the array have been pressed.
I should warn you I haven't tested this in a working application, since none was provided, but I'm pretty sure it will function as a replacement.
If you want help with sorting out this string you talk about in the question, do include it in the question, or add a new question specifically about that code.

creating a javascript recursive filter function

Is there any way of making this function recursive so that I do not need to create a switch for each length of filter criteria ?
var data = [
{a:'aaa',b:'bbb',c:'ccc',d:'ddd',e:'eee'},
{a:'aaa',b:'bbb',c:'ccc',d:'eee',e:'fff'},
{a:'xxx',b:'bbb',c:'ccc',d:'ddd',e:'fff'}
]
function select(data,where){
return data.filter(function(e){
var k = Object.keys(where);
switch(k.length){
case 1: return (e[k[0]] == where[k[0]]);
case 2: return (e[k[0]] == where[k[0]] && e[k[1]] == where[k[1]]);
case 3: return (e[k[0]] == where[k[0]] && e[k[1]] == where[k[1]] && e[k[2]] == where[k[2]]);
case 4: return (e[k[0]] == where[k[0]] && e[k[1]] == where[k[1]] && e[k[2]] == where[k[2]] && e[k[3]] == where[k[3]]);
case 5: return (e[k[0]] == where[k[0]] && e[k[1]] == where[k[1]] && e[k[2]] == where[k[2]] && e[k[3]] == where[k[3]] && e[k[4]] == where[k[4]]);
}
})
}
var where = {a:'aaa',b:'bbb'}
console.log(select(data,where));

It doesn't need to be recursive (I'm not sure you understand what that means), you just need to loop on the elements in where:
function select(data, where) {
return data.filter(function(e) {
var k = Object.keys(where);
return k.every(function(key) {
return e[key] == where[key];
});
})
}
var data = [
{a:'aaa',b:'bbb',c:'ccc',d:'ddd',e:'eee'},
{a:'aaa',b:'bbb',c:'ccc',d:'eee',e:'fff'},
{a:'xxx',b:'bbb',c:'ccc',d:'ddd',e:'fff'}
]
var where = {a:'aaa',b:'bbb'}
console.log(select(data,where));

Try this code:
function select(data, where) {
return data.filter(function (e) {
for (var key in where) {
if (where.hasOwnProperty(key)) {
if (e.hasOwnProperty(key)) {
if (e[key] != where[key]) {
return false;
}
}
else {
return false
}
}
}
return true;
})
}

How to move an element in javascript automatically with while loop?

I am making a Snake game so I'm trying to move my snake. It is moving with keys but it should move automatically on the screen. I tried doing that with while loops like in the code below but because of break; I have to press a key every time I want it to move. How can I make it move automatically? I tried removing break; an using an if statement but I didn't succeed.
Any other solutions or something else?
I'm new to programming so any advices would be helpful.
var main = function() {
var i = 0;
var j = 0;
$(document).keyup(function(event) {
var e = event.which;
while(i == 1) {
$('.snake').animate({left: '+=10px'}, 10);
break;
}
while(i == 2) {
$('.snake').animate({left: '-=10px'}, 10);
break;
}
while(i == 3) {
$('.snake').animate({top: '-=10px'}, 10);
break;
}
while(i == 4) {
$('.snake').animate({top: '+=10px'}, 10);
break;
}
//Which key is preesed
//D
if(e == 68) {
i = 1;
}
//A
else if(e == 65) {
i = 2;
}
//W
else if(e == 87) {
i = 3;
}
//S
else if(e == 83) {
i = 4;
}
//Any other key
else {
i = 0;
}
});
};
$(document).ready(main);

I think you just have to organize a little bit your code.
First. You must put your code inside a function. You really don't need a while. You can use a simple if.
function move(i) {
if(i == 1) {
$('.snake').animate({left: '+=10px'}, 10);
break;
}
if(i == 2) {
$('.snake').animate({left: '-=10px'}, 10);
break;
}
if(i == 3) {
$('.snake').animate({top: '-=10px'}, 10);
break;
}
if(i == 4) {
$('.snake').animate({top: '+=10px'}, 10);
break;
}
}
Now you have to change the event, using keydown instead of keyup
function main() {
var interval;
$(document).keydown(function(event) {
if(interval) clearInterval(interval); // Clear the previous interval
var e = event.which;
var i;
//Which key is pressed
//D
if(e == 68) {
i = 1;
}
//A
else if(e == 65) {
i = 2;
}
//W
else if(e == 87) {
i = 3;
}
//S
else if(e == 83) {
i = 4;
}
//Any other key
else {
i = 0;
}
interval = setInterval(function() {
move(i)
},1000); // repeat every 1 second
});
}
$(document).ready(main);

Passing string to javascript function results in value

Something really odd going on here, and I have gone round in circles trying to figure out what is going on...I have a couple of input boxes, with onchange events firing for them, the event being loaded with a JS function that takes the value ( name of another item ) and actions the function accordingly. Only thing is, when the value of the string arrives at the other function, it has somehow been assigned a numeric value, specifically that of the input box.
My php that helps build the form:
$filterfield = '"p_delweek"';
print "<span class='filter'>Del Week<input class='menulink spin-button' id='weekno' type='text' value='".$weekno."' onKeyUp='doFilter($filterfield)' onChange='doFilter($filterfield)' data-filtered='0'/><input type='button' value='Clear' onClick='doUnfilter()'></span>";
$filterfield = '"p_seedweek"';
print "<span class='filter'>Sow Week<input class='menulink spin-button' id='sowweekno' type='text' value='".$weekno."' onKeyUp='doFilter($filterfield)' onChange='doFilter($filterfield)' data-filtered='0'/><input type='button' value='Clear' onClick='doUnfilter()'></span>";
Resulting HTML in source:
<span class="filter">Del Week<input style="width: 50px; height: 22px;" class="menulink spin-button smartspinner" id="weekno" value="26" onkeyup='doFilter("p_delweek")' onchange='doFilter("p_delweek")' data-filtered="0" type="text"><input value="Clear" onclick="doUnfilter()" type="button"></span><span class="filter">Sow Week<input style="width: 50px; height: 22px;" class="menulink spin-button smartspinner" id="sowweekno" value="26" onkeyup='doFilter("p_seedweek")' onchange='doFilter("p_seedweek")' data-filtered="0" type="text"><input value="Clear" onclick="doUnfilter()" type="button"></span>
Javascript function that is called:
function doFilter(filterfield) {
console.log("DoFilter:"+filterfield);
var filterInfo=[
{
fieldName : filterfield,
logic : "equal",
value : Sigma.Util.getValue("weekno")
}
]
// the next lines action the filtering
var grid=Sigma.$grid("myGrid1");
console.log("filterinfo="+filterInfo);
var rowNOs=grid.applyFilter(filterInfo);
}
It all goes fine until we get to the console.log("DoFilter:"+filterfield) , which results in DoFilter:25; 25 happens to be the value of the input box.
How is it grabbing that value? How to pass the real one?

TBH — I'm not sure if I got what you're after. However, if you must call a function inline (I recommend that you don’t), you can pass a reference to the input field as parameter and make it available in the methods’s body:
<input onchange="doFilter('p_delweek', this)" type="text">
​
function doFilter(filterfield, field) {
console.log(filterfield);
// field is a reference to the input field, hence
console.log(field.value);
// will print the current value for this field
}

This is not the answer, this file is the problem:
(function($) {
$.fn.extend({
spinit: function(options) {
var settings = $.extend({ min: 0, max: 100, initValue: 0, callback: doFilter, stepInc: 1, pageInc: 10, width: 50, height: 15, btnWidth: 10, mask: '' }, options);
return this.each(function() {
var UP = 38;
var DOWN = 40;
var PAGEUP = 33;
var PAGEDOWN = 34;
var mouseCaptured = false;
var mouseIn = false;
var interval;
var direction = 'none';
var isPgeInc = false;
var value = Math.max(settings.initValue, settings.min);
var el = $(this).val(value).css('width', (settings.width) + 'px').css('height', settings.height + 'px').addClass('smartspinner');
raiseCallback(value);
if (settings.mask != '') el.val(settings.mask);
$.fn.reset = function(val) {
if (isNaN(val)) val = 0;
value = Math.max(val, settings.min);
$(this).val(value);
raiseCallback(value);
};
function setDirection(dir) {
direction = dir;
isPgeInc = false;
switch (dir) {
case 'up':
setClass('up');
break;
case 'down':
setClass('down');
break;
case 'pup':
isPgeInc = true;
setClass('up');
break;
case 'pdown':
isPgeInc = true;
setClass('down');
break;
case 'none':
setClass('');
break;
}
}
el.focusin(function() {
el.val(value);
});
el.click(function(e) {
mouseCaptured = true;
isPgeInc = false;
clearInterval(interval);
onValueChange();
});
el.mouseenter(function(e) {
el.val(value);
});
el.mousemove(function(e) {
if (e.pageX > (el.offset().left + settings.width) - settings.btnWidth - 4) {
if (e.pageY < el.offset().top + settings.height / 2)
setDirection('up');
else
setDirection('down');
}
else
setDirection('none');
});
el.mousedown(function(e) {
isPgeInc = false;
clearInterval(interval);
interval = setTimeout(onValueChange, 250);
});
el.mouseup(function(e) {
mouseCaptured = false;
isPgeInc = false;
clearInterval(interval);
});
el.mouseleave(function(e) {
setDirection('none');
if (settings.mask != '') el.val(settings.mask);
}); el.keydown(function(e) {
switch (e.which) {
case UP:
setDirection('up');
onValueChange();
break; // Arrow Up
case DOWN:
setDirection('down');
onValueChange();
break; // Arrow Down
case PAGEUP:
setDirection('pup');
onValueChange();
break; // Page Up
case PAGEDOWN:
setDirection('pdown');
onValueChange();
break; // Page Down
default:
setDirection('none');
break;
}
});
el.keyup(function(e) {
setDirection('none');
});
el.keypress(function(e) {
if (el.val() == settings.mask) el.val(value);
var sText = getSelectedText();
if (sText != '') {
sText = el.val().replace(sText, '');
el.val(sText);
}
if (e.which >= 48 && e.which <= 57) {
var temp = parseFloat(el.val() + (e.which - 48));
if (temp >= settings.min && temp <= settings.max) {
value = temp;
raiseCallback(value);
}
else {
e.preventDefault();
}
}
});
el.blur(function() {
if (settings.mask == '') {
if (el.val() == '')
el.val(settings.min);
}
else {
el.val(settings.mask);
}
});
el.bind("mousewheel", function(e) {
if (e.wheelDelta >= 120) {
setDirection('down');
onValueChange();
}
else if (e.wheelDelta <= -120) {
setDirection('up');
onValueChange();
}
e.preventDefault();
});
if (this.addEventListener) {
this.addEventListener('DOMMouseScroll', function(e) {
if (e.detail > 0) {
setDirection('down');
onValueChange();
}
else if (e.detail < 0) {
setDirection('up');
onValueChange();
}
e.preventDefault();
}, false);
}
function raiseCallback(val) {
if (settings.callback != null) settings.callback(val);
}
function getSelectedText() {
var startPos = el.get(0).selectionStart;
var endPos = el.get(0).selectionEnd;
var doc = document.selection;
if (doc && doc.createRange().text.length != 0) {
return doc.createRange().text;
} else if (!doc && el.val().substring(startPos, endPos).length != 0) {
return el.val().substring(startPos, endPos);
}
return '';
}
function setValue(a, b) {
if (a >= settings.min && a <= settings.max) {
value = b;
} el.val(value);
}
function onValueChange() {
if (direction == 'up') {
value += settings.stepInc;
if (value > settings.max) value = settings.max;
setValue(parseFloat(el.val()), value);
}
if (direction == 'down') {
value -= settings.stepInc;
if (value < settings.min) value = settings.min;
setValue(parseFloat(el.val()), value);
}
if (direction == 'pup') {
value += settings.pageInc;
if (value > settings.max) value = settings.max;
setValue(parseFloat(el.val()), value);
}
if (direction == 'pdown') {
value -= settings.pageInc;
if (value < settings.min) value = settings.min;
setValue(parseFloat(el.val()), value);
}
raiseCallback(value);
}
function setClass(name) {
el.removeClass('up').removeClass('down');
if (name != '') el.addClass(name);
}
});
}
});
})(jQuery);
Why and where does this alter the passing value of a function attached to the < INPUT > ?