I have the following (simplified) object literal. The icons method uses closure to hide the icons variable, which I'd like to have as an associative array for later lookups.
var MapListings = {
icons: function () {
var allIcons = [] ;
return {
add: function (iconType, iconImage) {
var icon = new GIcon(MapListings.baseIcon);
icon.image = iconImage;
allIcons[iconType] = icon; // fails, but this is what I want
// allIcons.push(icon); // works, but this is not what I want
},
get: function () {
return allIcons;
}
};
} ()
}
I add items to the to the icons object like so:
MapListings.icons.add("c7", "/images/maps/blue.png");
MapListings.icons.add("c8", "/images/maps/red.png");
The following doesn't work:
allIcons[iconType] = icon;
But this does:
allIcons.push(icon);
Outside of the closure the associative array style works fine, so perhaps there is a conflict with jQuery? The error I get in firebug a is undefined looks to come from the library. I'd like to maintain the associative array style.
Any ideas?
Update
It looks like this conflict is coming from google maps. Odd, not sure of a way around this.
Dumbass Update
The part of my object literal that returned a base GIcon() object wasn't returning an object at all. So, the object didn't have the right properties.
baseIcon: function () {
var base = new GIcon();
base.shadow = '/images/maps/shadow.png';
base.iconSize = new GSize(12, 20);
base.shadowSize = new GSize(22, 20);
base.iconAnchor = new GPoint(6, 20);
base.infoWindowAnchor = new GPoint(5, 1);
return base;
}
And MapListings.baseIcon is NOT the same as MapListings.baseIcon()! D'oh
if you want a lookup table, just do var allIcons = {}
EDIT: Though technically it should work either way, as an array IS an object. Are you sure there isn't more to this?
EDIT #2: Can't you just make allIcons as a property of MapListings?
EDIT #3: I think it's working, but maybe you're not accessing it right? That or it fails creating the object with Google somehow, or the error you posted is happening elsewhere, and not here
function GIcon(){};
var MapListings = {
icons: function () {
var allIcons = [] ;
return {
add: function (iconType, iconImage) {
var icon = new GIcon(MapListings.baseIcon);
icon.image = iconImage;
allIcons[iconType] = icon; // fails, but this is what I want
// allIcons.push(icon); // works, but this is not what I want
window.x = allIcons
},
get: function () {
return allIcons;
}
};
} ()
};
MapListings.icons.add("c7", "/images/maps/blue.png");
MapListings.icons.add("c8", "/images/maps/red.png");
alert( MapListings.icons.get()['c8']['image'] )
You shouldn't loop using .length but instead directly access c7 or c8.
x = MapListings.icons.get();
for ( var prop in x ) {
if ( x.hasOwnProperty(prop ) ) {
alert( x[prop]['image'] )
}
}
So one thing you could do to fix this is change the way you reference the array. Since external to your add method you do this:
MapListings.icons["c7"]
You can also just use this to add to your array inside your add function:
add: function (iconType, iconImage) {
MapListings.icons[iconType] = iconImage;
},
allIcons[iconType] = icon; fails because allIcons is an Array, not an object. Try initializing allIcons to {} instead. That would allow you to place items in the collection by key.
Related
I'm just wondering how to figure this strange security/scope question out:
function vector() {
var array = [];
return {
append: function append(v) {
array.push(v);
},
get: function get(i) {
return array[i];
},
store: function store(i,v) {
array[i] = v;
}
};
}
This is the question asked:
Can you spot any security concerns with this approach? Mainly, can we get access to the array outside of vector? Note*: the issue has nothing to do with prototypes and we can assume that global prototypes cannot be altered. Hint*: Think about using this in a method invocation. Can we override a method of vector?
Example
var v = vector();
v.append(1);
v.append(2);
var internalData = exploitVector(v); // [1, 2]
My attempts + thoughts
Pretty sure I'm supposed to use the this keyword somehow as the hint says.
I'm a beginner at javascript so I don't fully understand the context that well. This code is written in a file with other functions on the text editor Atom, not a browser.
function exploitVector(v) {
v.get = function() {
return this.array;
};
console.log(v.get());
return v.get();
}
Also, this is just a fun exercise I saw on a github repo.
Vector.store() can be abused to modify the array methods (e.g. array.push), followed by a v.append() to trigger the modified array.push method. The modified push method can for example either do something like window.visiblearray=this after which, visiblearray can be accessed globally.
Or as in the example below, store this (Array instance) to visiblearray of local scope, and then return it.
function vector() {
var array = [];
return {
append: function append(v) {
array.push(v);
},
get: function get(i) {
return array[i];
},
store: function store(i,v) {
array[i] = v;
}
};
}
var v = vector();
v.append(1);
v.append(2);
var internalData = exploitVector(v); // [1, 2]
function exploitVector(v) {
var visible_array;
v.store('push', function(x){visible_array=this}) // modify array push
v.append(12) // trigger the modified array push
console.log(visible_array);
return visible_array
}
This seems like a very basic question. But how do I create a class structure within Google Apps Script?
Lets say I want to call: myLibrary.Statistics.StandardDeviation(). I have to instead call: myLibrary.StandardDeviation().
I cannot seem to break it down any further, or organize it into classes.
How can I do this?
I suspect there's something more that you're not telling us about your situation. It is possible to set up a function as a property of an object that is itself a property of an object, and thus support the calling structure you've described.
function test() {
Logger.log( myLibrary.Statistics.StandardDeviation([5.3,5.2,5,2.0,3.4,6,8.0]) ); // 1.76021798279042
};
myLibrary.gs
var myLibrary = {};
myLibrary.Statistics = {}
myLibrary.Statistics.StandardDeviation = function( array ) {
// adapted from http://stackoverflow.com/a/32201390/1677912
var i,j,total = 0, mean = 0, diffSqredArr = [];
for(i=0;i<array.length;i+=1){
total+=array[i];
}
mean = total/array.length;
for(j=0;j<array.length;j+=1){
diffSqredArr.push(Math.pow((array[j]-mean),2));
}
return (Math.sqrt(diffSqredArr.reduce(function(firstEl, nextEl){
return firstEl + nextEl;
})/array.length));
}
I have a problem with the following code:
// At the beginning
var prog = {}
// some attributes of prog and other methods
// ...
prog.stateChange = function(state)
{
var functionOfState =
{
onState1: function()
{
// some code
},
onState2: function()
{
// some code
}
}['on'+state]()
}
Which purpose have these square brackets after the creation of the object functionOfState? Is this an array of possible methods?
Sorry, I'm a total newbie in JS and I haven't found any information about this.
I really appreciate any help.
This code does almost the same as:
var functionOfState =
{
onState1: function()
{
// some code
},
onState2: function()
{
// some code
}
}
functionOfState['on'+state]();
It simply creates an object which stores different functions. Then, it calls one of them according to the current value of state.
Maybe, this one will be even easier:
var functionOfState = {};
functionOfState['onState1'] = function() {
// someCode
};
functionOfState['onState2'] = function() {
// someCode
};
functionOfState['on'+state](); // when state is 'State2', 'onState2' will be called
The difference that in your code it doesn't store this object with functions, but calls it directly.
This is (not the most clear) way to extract field from an object.
in JS, the subscript operator ([]) can extract a property out of an object just like the dot operator (.), so the following expressions are equal:
var obj = { field : value };
obj.field == obj["field"]; //returns true
on your example an object with the fields onState1, onState2 is created. then, using the subscript operator the correct property is extract. it is equivilant on writing
prog.stateChange = function(state)
{
var temp =
{
onState1: function()
{
// some code
},
onState2: function()
{
// some code
}
};
var functionOfState = state == onState1 ? temp.onState1 : temp.onState2;
functionOfState();
}
This is not a legit way to extract a property/method out of an object. basically if someone changes the name of the method, the code breaks. it is much better to simply use a switch case.
I'm trying to make the {{#each}} helper to iterate over an object, like in vanilla handlebars. Unfortunately if I use #each on an object, Ember.js version gives me this error:
Assertion failed: The value that #each loops over must be an Array. You passed [object Object]
I wrote this helper in attempt to remedy this:
Ember.Handlebars.helper('every', function (context, options) {
var oArray = [];
for (var k in context) {
oArray.push({
key : k,
value : context[k]
})
}
return Ember.Handlebars.helpers.each(oArray, options);
});
Now, when I attempt to use {{#every}}, I get the following error:
Assertion failed: registerBoundHelper-generated helpers do not support use with Handlebars blocks.
This seems like a basic feature, and I know I'm probably missing something obvious. Can anyone help?
Edit:
Here's a fiddle: http://jsfiddle.net/CbV8X/
Use {{each-in}} helper. You can use it like like {{each}} helper.
Example:
{{#each-in modelWhichIsObject as |key value|}}
`{{key}}`:`{{value}}`
{{/each-in}}
JS Bin demo.
After fiddling with it for a few hours, I came up with this hacky way:
Ember.Handlebars.registerHelper('every', function(context, options) {
var oArray = [], actualData = this.get(context);
for (var k in actualData) {
oArray.push({
key: k,
value: actualData[k]
})
}
this.set(context, oArray);
return Ember.Handlebars.helpers.each.apply(this,
Array.prototype.slice.call(arguments));
});
I don't know what repercussions this.set has, but this seems to work!
Here's a fiddle: http://jsfiddle.net/CbV8X/1/
I've been after similar functionality, and since we're sharing our hacky ways, here's my fiddle for the impatient: http://jsfiddle.net/L6axcob8/1/
This fiddle is based on the one provided by #lxe, with updates by #Kingpin2k, and then myself.
Ember: 1.9.1, Handlebars: 2.0.0, jQuery 2.1.3
Here we are adding a helper called every which can iterate over objects and arrays.
For example this model:
model: function() {
return {
properties: {
foo: 'bar',
zoo: 'zar'
}
};
}
can be iterated with the following handlebars template:
<ul class="properties">
{{#every p in properties}}
<li>{{p.key}} : {{p.value}}</li>
{{/every}}
</ul>
every helper works by creating an array from the objects keys, and then coordinating changes to Ember by way of an ArrayController. Yeah, hacky. This does however, let us add/remove properties to/from an object provided that object supports observation of the [] property.
In my use case I have an Ember.Object derived class which notifies [] when properties are added/removed. I'd recommend looking at Ember.Set for this functionality, although I see that Set been recently deprecated. As this is slightly out of this questions scope I'll leave it as an exercise for the reader. Here's a tip: setUnknownProperty
To be notified of property changes we wrap non-object values in what I've called a DataValueObserver which sets up (currently one way) bindings. These bindings provide a bridge between the values held by our internal ArrayController and the object we are observing.
When dealing with objects; we wrap those in ObjectProxy's so that we can introduce a 'key' member without the need to modify the object itself. Why yes, this does imply that you could use #every recursively. Another exercise for the reader ;-)
I'd recommend having your model be based around Ember.Object to be consistent with the rest of Ember, allowing you to manipulate your model via its get & set handlers. Alternatively, as demonstrated in the fiddle, you can use Em.Get/Em.set to access models, as long as you are consistent in doing so. If you touch your model directly (no get/set), then every won't be notified of your change.
Em.set(model.properties, 'foo', 'asdfsdf');
For completeness here's my every helper:
var DataValueObserver = Ember.Object.extend({
init: function() {
this._super();
// one way binding (for now)
Em.addObserver(this.parent, this.key, this, 'valueChanged');
},
value: function() {
return Em.get(this.parent, this.key);
}.property(),
valueChanged: function() {
this.notifyPropertyChange('value');
}
});
Handlebars.registerHelper("every", function() {
var args = [].slice.call(arguments);
var options = args.pop();
var context = (options.contexts && options.contexts[0]) || this;
Ember.assert("Must be in the form #every foo in bar ", 3 == args.length && args[1] === "in");
options.hash.keyword = args[0];
var property = args[2];
// if we're dealing with an array we can just forward onto the collection helper directly
var p = this.get(property);
if (Ember.Array.detect(p)) {
options.hash.dataSource = p;
return Ember.Handlebars.helpers.collection.call(this, Ember.Handlebars.EachView, options);
}
// create an array that we will manage with content
var array = Em.ArrayController.create();
options.hash.dataSource = array;
Ember.Handlebars.helpers.collection.call(this, Ember.Handlebars.EachView, options);
//
var update_array = function(result) {
if (!result) {
array.clear();
return;
}
// check for proxy object
var result = (result.isProxy && result.content) ? result.content : result;
var items = result;
var keys = Ember.keys(items).sort();
// iterate through sorted array, inserting & removing any mismatches
var i = 0;
for ( ; i < keys.length; ++i) {
var key = keys[i];
var value = items[key];
while (true) {
var old_obj = array.objectAt(i);
if (old_obj) {
Ember.assert("Assume that all objects in our array have a key", undefined !== old_obj.key);
var c = key.localeCompare(old_obj.key);
if (0 === c) break; // already exists
if (c < 0) {
array.removeAt(i); // remove as no longer exists
continue;
}
}
// insert
if (typeof value === 'object') {
// wrap object so we can give it a key
value = Ember.ObjectProxy.create({
content: value,
isProxy: true,
key: key
});
array.insertAt(i, value);
} else {
// wrap raw value so we can give it a key and observe when it changes
value = DataValueObserver.create({
parent: result,
key: key,
});
array.insertAt(i, value);
}
break;
}
}
// remove any trailing items
while (array.objectAt(i)) array.removeAt(i);
};
var should_display = function() {
return true;
};
// use bind helper to call update_array if the contents of property changes
var child_properties = ["[]"];
var preserve_context = true;
return Ember.Handlebars.bind.call(context, property, options, preserve_context, should_display, update_array, child_properties);
});
Inspired by:
How can I make Ember.js handlebars #each iterate over objects?
http://mozmonkey.com/2014/03/ember-getting-the-index-in-each-loops/
https://github.com/emberjs/ember.js/issues/4365
https://gist.github.com/strathmeyer/1371586
Here's that fiddle again if you missed it:
http://jsfiddle.net/L6axcob8/1/
I'm rather new to jQuery and I don't understand why this loop doesn't display
the object properties.
I would be grateful if you could help me.
var shop_array = ["title","price","img","text"];
var submit = $(".add").find(":submit");
submit.on("click",function(e){
var elements = $(".add").children(':input');
for(var i=0;i<elements.length;i++){
if($(elements[i]).val()!==""){
var object = '\"'+shop_array[i]+'\"';
console.log(shopcart.shop_values[object])//dosen't display shop_value;
console.log(object);
}
}
});
var shopcart= {
shop_values :{
"title":"a",
"price":"b",
"img":"img",
"text":"text"
},
add: function(){
}
}
Your problem is the " you put around the variable you want to use to access the object properties, they should not be there as they are not in the property names
var object = '\"'+shop_array[i]+'\"';
console.log(shopcart.shop_values[object])//dosen't display shop_value;
should just be
console.log(shopcart.shop_values[shop_array[i]])//dosen't display shop_value;
For your current code to have worked the shopcart would need to be defined as
var shopcart= {
shop_values :{
"\"title\"":"a",
"\"price\"":"b",
"\"img\"":"img",
"\"text\"":"text"
},
add: function(){
}
}
which would look just awful.