I'm trying to parse some JSON that is sent to me and it's all in the format of
[{key:value},{key2:value2}, ... ]
What would be the best way to get the value of key2 in this? Is there a way to do it without doing a for loop?
You could use the Select function from the Underscore.js library.
Not really, but it wouldn't be hard to create a function to do that. However, it would indeed involves a for loop.
For the sake of completion, that would be the function:
function selectWhere(data, propertyName) {
for (var i = 0; i < data.length; i++) {
if (data[i][propertyName] !== null) return data[i][propertyName];
}
return null;
}
Usage:
var key2value = selectWhere(data, "key2");
Javascript Array comes with methods that do just what you are asking for - find entries without you having to code a for-loop.
You provide them with the condition that you want. A compact and convenient way to do that is with an arrow (or "lambda") function. In your case, you are looking for array entries that have a specific key, so the arrow function could look something like this:
e => e.hasOwnProperty("key2")
Following the lead of some of the others, let's start with the assumption
var arr = [{key:"value"}, {key2:"value2"}, {key3:"value3"}]
If you expect that at most one member of the array has the key you want, you can use the find() function. It will test each array member until it finds one where your condition is true, and return it. If none are true, you'll get undefined.
var foundentry = arr.find(e => e.hasOwnProperty("key2"))
Either foundentry will be undefined or it will be the {key2:"value2"} that you are looking for, and can extract value2 from it.
If arr can have more than one entry with the key that you are looking for, then instead of find() use filter(). It gives back an array of entries that meet your criteria.
var foundarray = arr.filter(e => e.hasOwnProperty("key2"))
jQuery grep() is a good analog for a Where clause:
var array = [{key:1},{key:2}, {key:3}, {key:4}, {key:5}];
var filtered = jQuery.grep(array, function( item, index ) {
return ( item.key !== 4 && index > 1 );
});
Your filtered array will then contain two elements,
[{key:3}, {key:5}]
You can't do it with an array, but you can make an associative array like object with it. Once you make it, you can use it like hash.
var arr = [{key:value},{key2:value2}, ... ], obj = {};
for (var i = 0, len = arr.length; i < len; i++) {
$.extend(obj, arr[i]);
}
console.log(obj.key2); // value2
Here's an example that prototype's the Array object. Note: this is shown for example - find is not a good name for this function, and this probably will not be needed for all arrays
Instead, consider just using the function definition and creating a function like getObjVal, calling like getObjVal(arr,'propName'), similar to LaurenT's answer.
Given
var arr = [{key:'value'},{key2:'value2'}];
Definition
// for-loop example
Array.prototype.find = function (prop){
for(var i=this.length; i--; )
if (typeof this[i][prop] !== 'undefined')
return this[i][prop];
return undefined;
}
// for-each loop example
Array.prototype.find = function (prop){
for (var i in this)
if ( this.hasOwnProperty(i) && typeof this[i][prop] !== "undefined" )
return this[i][prop];
return undefined;
}
Usage
console.log( arr.find('key2') ); // 'value2'
console.log( arr.find('key3') ); // undefined
Use .filter() method for this object array, for example in your case:
var objArray = [{key:"Hello"},{key2:"Welcome"} ];
var key2Value=objArray.filter(x=>x.key2)[0].key2;
Regex - no for loop:
var key2Val = jsonString.match(/\{key2:[^\}]+(?=\})/)[0].substring("{key2:".length);
Top answer does the job. Here's a one liner version of it using lodash (same as underscore for the most part):
var result = _.filter(data, _.partialRight(_.has, 'key2'));
In lodash, select is just an alias for filter. I pass it the data array filled with objects. I use _.has as the the filter function since it does exactly what we want: check if a property exists.
_.has expects two args:
_.has(object, path)
Since _.has expects two arguments, and I know one of them is always constant (the path argument). I use the _.partialRight function to append the constant key2. _.partialRight returns a new function that expects one argument: the object to inspect. The new function checks if obj.key2 exists.
Heyas. You can use the lodash library's .reduce() or .transform() functions to implement this. Lodash is more modular than underscore (Underscore around 5kb, Lodash around 17kb), but is generally lighter because you only include the specific modules you need
(please see: https://news.ycombinator.com/item?id=9078590 for discussion). For this demonstration I will import the entire module (generally not an issue on the backend):
I wrote these snippets for either scenario which handle both numeric and non-numeric arguments.
https://lodash.com/docs#reduce
https://lodash.com/docs#transform
Pull in lodash:
var _ = require('lodash');
_.reduce() to where clause:
var delim = ' WHERE ', where = _.isEmpty(options) ? '' : _.reduce(options, function(r, v, k) {
var w = r + delim + k + '=' + (_.isNumber(v) ? v : ("'" + v + "'"));
delim = ' AND ';
return w;
}, '');
_.transform() to where clause:
var where = _.isEmpty(options) ? '' : ' WHERE ', delim = '';
_.transform(options, function(r, v, k) {
where = where + delim + k + '=' + (_.isNumber(v) ? v : ("'" + v + "'"));
delim = ' AND ';
});
Hope that helps.
Try this:
var parsedJSON = JSON.parse(stringJSON);
var value = parsedJSON['key2'];
Related
All:
I want to build a string from a JS object( like build a toString method but like operator overload), for example:
var info = {name:"username",age:20};
var fmtinfo = info.join("||");
the fmtinfo will be a string with format:
"name(username)||age(20)"
I wonder if anyone can give me a simple way to do that?
Thanks
To avoid any explicit iteration, you can use Object.keys with map to transform each key into the corresponding entry, then simply join them together:
function fancyString(obj) {
return Object.keys(obj).map(function (k) {
return "" + k + "(" + obj[k] + ")";
}).join("||");
}
var foo = {name: "username", age: 20};
console.log(fancyString(foo));
To offer some explanation of how this work:
The call to Object.keys() returns an array of the object's own enumerable keys, effectively combining the for (f in o) and o.hasOwnProperty() checks. Object.keys is relatively well-supported, by everything except IE9 (although polyfills are not complicated).
That array of keys are transformed via Array.prototype.map(), using the desired string formatting. This is pretty simple, but do not that obj[k] will call its .toString() method (if available) to transform it into a string. This allows excellent handling of custom objects, as you can simply define a toString method on each and it will be picked up by the VM. Again, this is supported by IE9 and better, but polyfills are trivial.
Finally, we join the resulting strings with Array.prototype.join(), which takes care of making sure we don't append the separator to the end or anything like that. All browsers support this.
For curiosity, the ES6 equivalent would be:
let fancyString = o => Object.keys(o).map(k => "" + k + "(" + o[k] + ")").join("||");
You can use for..in statement and helper array:
var info = {name:"username",age:20};
var helperArray = [];
for( var key in info ) {
if( info.hasOwnProperty( key ) ) {
helperArray.push( key + '(' + info[key] + ')' );
}
}
alert(helperArray.join('||'));
You could iterate over the object's keys to get both the key names and their corresponding values. Not incredibly elegant but since the desired format of your string is uncommon, it requires a little work.
var info = {name:"username",age:20};
var keys = Object.keys(info);
var returnVal = ""
for(var i = 0; i < keys.length; i++) {
if(returnVal.length > 0)
returnVal += "||";
returnVal += keys[i] + "(" + info[keys[i]] + ")";
}
alert(returnVal)
Here is a jsfiddle of the solution: http://jsfiddle.net/pstricker/ec1oohsk/
It took a while, but I might have got it working as intended with help of two existing Stackoverflow answers related to: Object iteration and checking if JavaScript variable is function type. I hope this helps :-)
Object.prototype.join = function join(param) {
var helperArray = []
for (var key in this) {
//check that function is not printed -> join: function
if (typeof (this[key]) != "function")
helperArray.push(key + "(" + this[key] + ")")
}
return helperArray.join(param);
}
var info = {
name: "username",
age: 20
};
console.log(info.join('||'));
console.log(info.join('<>'));
console.log(info.join('%'));
Object.prototype.fancyString = function(){
var a = []
for(var prop in this) {
if(this.hasOwnProperty(prop)) {
a.push(prop + '(' + this[prop] + ')' );
}
}
return a.join('||');
}
Then you can just do:
var info = {name:"username",age:20};
info.fancyString();
// outputs: "name(username)||age(20)"
Looked around SO and didn't find anything that seemed to match what I am trying to do..
I am trying to reference an object by a string representation, though everywhere I look I see that using eval() is bad - though can't find a way to do this without using eval()
So my use case:
I have a data attribute on a button;
data-original-data-object="window.app.myData.originalData"
When the button is clicked I need to access the actual object held at window.app.myData.originalData
Now, I know I can do:
var dataObj = eval($(this).data('original-data-object'));
Though is there any other way to do this?
If it helps, the data that is stored at window.app.myData.originalData is a JSON object.
Like this:
var obj = (function(str){
var arr = str.split('.');
if (arr[0] === 'window'){
arr.shift();
}
return arr.reduce(function(a, b){
return a[b];
}, window);
}("window.app.myData.originalData"))
A couple of solutions come to mind. The first solution is hinted at in #CD..'s answer. The second is to restrict that string via a regex to just property names so you can safely use eval.
Traversing the window object to get the value (no eval)
function getValue(s) {
var keys = s.split("."), o = window, key, i, length, undef;
if (keys[0] === "window") {
keys.shift();
}
for (i = 0, length = keys.length; i < length; i++) {
key = keys[i];
if (!(key in o) || o[key] === null || o[key] === undef) {
throw new Error("Could not get value of " + s);
}
o = o[key];
}
return o;
}
Restricting the string to valid property names:
function getValue(s) {
var regex = /^[\w$][\w.]+$/, value;
if (regex.test(s)) {
try {
value = eval(s);
}
catch (error) {
throw new Error("Could not get value of " + s + " (" + error.message + ")");
}
}
else {
throw new Error("Could not get value of " + s);
}
return value;
}
To use:
var x = getValue(this.getAttribute("data-original-data-object"));
You want to avoid using eval because it can arbitrarily execute JavaScript that you may or may not have control of. In this particular case, you know the exact kind of string you want. In my opinion, I'd use a regular expression to make sure the string just contains property names separated by dots. Security speaking, there is no difference between these two lines of code:
var x = eval("window.foo");
var x = window.foo;
Provided that you can ensure that the attribute cannot be modified in anyway that can cause harm to the site/project that this is being implemented on, I don't see any problems.
I'm not sure if this will work for your situation, but a simple solution that avoids eval may be to add "window.app.myData.originalData" with its JSON data as the property of an object that will remain in scope.
Something like:
var exampleData = { id:1, content:"..." };
var dataStore = { "window.app.myData.originalData": exampleData };
Then, in your click handler:
var retrievedData = dataStore[$(this).data('original-data-object')]; // uses "window.app.myData.originalData" to retrieve exampleData
In this case, you will need to access the data using bracket notation because of the . character in the property name. This approach should be faster and safer than trying to use eval, however.
In my web app, I would like to accept arbitrary JavaScript objects as GET parameters. So I need to parse location.search in a way similar to eval, but I want to create self-contained objects only (object literals, arrays, regexps and possibly restricted-access functions):
var search =
location.search ?
decodeURIComponent(location.search).substring(1).split('&') :
['boo=alert(1)', 'filter={a: /^t/, b: function(i){return i+1;}}']
;
var params = {};
for (var i = 0, temp; i < search.length; i++){
temp = search[i].split('=');
temp = temp[1] ? temp : [temp[0], null];
params[temp[0]] = saferEval(temp[1]);
};
console.log(params);
I came up with a version of saferEval function that blocks access to global variables, but it does not block access to built-in functions like alert():
var saferEval = function(s) {
'use strict';
var deteleGlobals =
'var ' +
Object.getOwnPropertyNames(window)
.join(',')
.replace(/(?:eval|chrome:[^,]*),/g, '') +
';'
;
try {
return eval(deteleGlobals + '(' + s + ');') || s;
} catch(e) {
return s;
};
};
See my jsFiddle - alert(1) code is executed.
Note that top.location is not accessible to jsFiddle scripts, you have to run the code locally if you want to fiddle with actual query parameters like ?filter={a: /%5Cd+/g}.
I would use JSON, but I need to have regular expressions at arbitrary places inside arrays and objects. I do not send any of these object back to the server, so using eval for this shouldn't harm the security so much...
How can I convert a string (that encodes JavaScript object) into object without giving it access to global namespace and built-in functions?
UPDATE - only useful "arbitrary" objects turned out to be regexp literals...
Per your comment that you'd be interested in seeing a solution that just solves the issue of having regex values in your JSON, then you could encode all regex values as strings in normal JSON like this:
"/this is my regex/"
Then, process the JSON normally into a javascript object and then call this function on it which will recursively walk through all objects and arrays, find all items that are strings, check them for the above format and, if found, convert those items to regular expressions. Here's the code:
function isArray(obj) {
return toString.call(obj) === "[object Array]";
}
function isObject(obj) {
return Object.prototype.toString.call(obj) === '[object Object]'
}
var regexTest = /^\/(.*)\/([gimy]*)$/;
function convertRegex(item) {
if (isArray(item)) {
// iterate over array items
for (var i = 0; i < item.length; i++) {
item[i] = convertRegex(item[i]);
}
} else if (isObject(item)) {
for (var prop in item) {
if (item.hasOwnProperty(prop)) {
item[prop] = convertRegex(item[prop]);
}
}
} else if (typeof item === "string") {
var match = item.match(regexTest);
if (match) {
item = new RegExp(match[1], match[2]);
}
}
return item;
}
And a sample usage:
var result = convertRegex(testObj);
Test environment that I stepped through the execution in the debugger: http://jsfiddle.net/jfriend00/bvpAX/
Until there is better solution, I will add alert (and the like) into my list of local variables which would overshadow global/built-in functions within the eval scope:
var deteleGlobals =
'var ' +
Object.getOwnPropertyNames(window)
.join(',')
.replace(/(?:eval|chrome:[^,]*),/g, '') +
',alert,confirm,prompt,setTimeout;'
;
jsFiddle
Im using this 'map' on js:
var myMap = new Object();
myMap[key1]=value1; //like this n times...
but i want to use the key as some combination of two strings meaning:
function getMapValue(str1,str2){...}
i dont mind joining the two strings into one long string and use the function with the long string
any ideas?
You can make a map of maps (just be sure to check that the intermediate map exists when accessing it)
var myMap = {}; //dont use "new Object()". It is evil.
function insert(k1, k2, v){
if(!(k1 in myMap)){ myMap[k1] = {}; }
myMap[k1][k2] = v;
}
function get(k1, k2){
return myMap[k1] && myMap[k1][k2];
}
And if you want to join two substrings into a single one you can use the plus operator to concatenate things.
var customKey = k1 + '|' + k2;
Just be sure your separator can't be used in a normal key to avoid conflicts.
If I got you right, the following should help:
var myMap = {"key1" : "something1", "key2" : "something2"};
to get value for a key, you you use, either: return myMap.key1;
Or: return myMap.["key1"];
If you had/did: myMap["key1key2"] = "MagicHappens!";
you could use myMap.key1key2 to get the value or myMap["key1key2"], or even: return myMap["key1"+"key2"];
Or:
var x = "key1";
var y = "key2";
return myMap[x+y];
in your getter function, you get the two variables for the keys which you can then directly use.
I'm doing very frequent searches in arrays of objects and have been using jQuery.inArray(). However, I'm having speed and memory issues and one of the most called methods according to my profiler is jQuery.inArray(). What's the word on the street about its performance? Should I switch to a simple for loop?
My specific function is:
function findPoint(point, list)
{
var l = list.map(function anonMapToId(p) { return p.id });
var found = jQuery.inArray(point.id, l);
return found;
}
Is perhaps list.map() is more to blame?
Well internally inArray makes a simple loop, I would recommend you to check if there is a native Array.prototype.indexOf implementation and use it instead of inArray if available:
function findPoint(point, list) {
var l = list.map(function anonMapToId(p) { return p.id });
var found = ('indexOf' in Array.prototype) ? l.indexOf(point.id)
: jQuery.inArray(point.id, l);
return found;
}
The Array.prototype.indexOf method has been introduced in browsers that implement JavaScript 1.6, and it will be part of the ECMAScript 5 standard.
Native implementations are way faster than non native ones.
What you really want is a Array.prototype.filter.
function findPoint(point, list)
{
return list.filter(function anonFilterToId(p) {
return p.id === point.id;
}).length > 0;
}
Even is the inArray function were slow, you're still creating a full new array for every search. I suppose it would be better to redesign this search, by e.g. creating the id-list before finding the points, and using that one to search into:
I'm doing a join of the array to turn it into a string and avoid the loop section like this :
var strList = ","+array.join(",")+",";
return strList.indexOf(","+search+",") !== -1 ? true : false;
if the array is huge, it can hurt, but for a small list it's much faster than the loop solution
PS I'm adding an ending coma to avoid look a like
I always use lastIndexOf when I want to know if there's a string in my array.
So, its something like this:
var str = 'a';
var arr = ['a','b','c'];
if( arr.lastIndexOf(str) > -1){
alert("String " + str + " was found in array set");
} else {
alert("String " + str + " was not found");
}
If you just want to find a string in array, I do believe this might be the best practice.