I have certain objects that I have to delete certain properties ie:
objA = { firstAttrA: 'fooA', secondAttrA: 'barA' }
objB = { firstAttrB: 'fooB', secondAttrB: 'barB' }
I want to pass these objects in a function that will delete the firstAttrA and firstAttrB based on the following properties file:
{
"objA":"firstAttrA",
"objB":"firstAttrB"
}
The method needs to be robust, I need to avoid excessive looping and anything that will affect performance since the amount of objects that will essentially be passed is great and their properties numerous.
Essentially i suppose I need to do a delete objA.firstAttrA; delete objB.firstAttrB; but driven by a JSON properties file.
Well if defined in the global scope then your method would look like this:
var objRef = {
"objA":"firstAttrA",
"objB":"firstAttrB"
};
for (var item in objRef) {
if (window.hasOwnProperty(item)) {
if (window[item].hasOwnProperty(objRef[item])) {
delete window[item][objRef[item]];
}
}
}
Related
I'm new to vue.
I'm now trying to update a couple of variables based on the change of another computed variable.
This computed variable is taking the values from a Vuex store and works as should. I see the values change.
In order to calculate the derived variables I've created a watch that watches the computed variable and then updates these derived values.
This watch is called two times during start-up and then no longer, although the computed values keeps updating.
What am I doing wrong.
This is working:
...
computed: {
lastAndMarkPrice() {
return store.getters.getLastAndMarkPriceByExchange(
"deribit",
store.getters.getAsset
);
},
...
this part is not working:
...
data: () => ({
lastPriceUp: false,
lastPriceDn: false,
markPriceUp: false,
markPriceDn: false,
}),
...
watch: {
lastAndMarkPrice (newValue, oldValue) {
console.log(newValue, oldValue);
this.lastPriceUp = newValue.lastPrice > oldValue.lastPrice;
this.lastPriceDn = newValue.lastPrice < oldValue.lastPrice;
this.markPriceUp = newValue.markPrice > oldValue.markPrice;
this.markPriceDn = newValue.markPrice < oldValue.markPrice;
},
},
...
By default a watch is shallow. If a new object is assigned to lastAndMarkPrice then the handler will be called but it won't check for mutations of properties within that object.
To create a deep watcher you'd do something like this:
watch: {
lastAndMarkPrice: {
deep: true,
handler (newValue, oldValue) {
// ...
}
}
}
https://v2.vuejs.org/v2/api/#watch
Usually that would be the correct solution but your use-case is slightly more complicated because you need access to the old values. Using a deep watcher won't help with that as you'll just be passed the same object.
To get around that problem you'll need to take copies of the old values somewhere so that you still have them available to compare with the new values. One way to do that would be to have the computed property take a copy:
computed: {
lastAndMarkPrice() {
const prices = store.getters.getLastAndMarkPriceByExchange(
"deribit",
store.getters.getAsset
);
// I'm assuming that prices is initially null or undefined.
// You may not need this bit if it isn't.
if (!prices) {
return null;
}
return {
lastPrice: prices.lastPrice,
markPrice: prices.markPrice
}
}
}
With the code above, each time the values of lastPrice or markPrice change it will re-run the computed property and create a new object. That will trigger the watch handler and, importantly, you'll get two different objects passed as the old and new values. You don't need to use deep in this case as the object itself is changing, not just the properties within it.
You could also shorten it a little with...
return { ...prices }
...rather than explicitly copying the two properties across.
This is not for use in my project, Only for learning purposes.
In jQuery,
When we call $('h1'). it simply returns all the h1 elements from the document. Again when we make some action on an element like $('h1').hide(), it simply hides all the elements(cool ah?)
I want to learn this similar functionality, for example:
function app(elm){
const x = (typeof elm !== 'object') ? document.querySelectorAll(elm) : elm
return {
hide : function(){
x.forEach( target =>{
target.style.display = 'none';
});
}
}
}
This is a simple code here. So, If I call it like app('h1').hide(); it will hide all the h1 elements from the document. But if I call it like app('h1') it returns the object what I return that's normal.
In here I need all h1 elements from the document like jQuery. I mean It should work like this,
$('h1') === app('h1') //JQuery is equal to myCFunction (problem)
$('h1').hide === app('h1').hide() //jQuery is equal to myCFunction (solved)
[NOTE] Here is an article that is similar to my question but it's not my question answer.
Article Link
You can return x instead of a custom object, but before returning inject the hide function into x object's prototype like x.prototype.hide = function(){/*...*/}.
I think $("h1") does not return selected elements. It stores the selected elements. Instead we can have new function(getElement) to get select elements.Hope this code helps.
var App = function() {
var x ;
this.app = function (elem) {
x = document.querySelectorAll(elem);
return this;
}
this.hide = function(){
x.forEach(target => {
target.style.display = 'none';
});
return;
}
this.getElement = function(){
return x;
}
}
var $ = new App();
$.app("h1").hide();
console.log($.app("h1").getElement());
I've got a mostly working solution, but you still have to fix one small but annoying problem (see caveat 3). It's mostly done so I'll put it here anyway.
I think this is what you are looking for:
function app(selector) {
const retArr = document.querySelectorAll(selector); // The array to return
// Add proxies for all prototype methods of all elements
for (let e of retArr) {
let methods = getProtoMethods(e);
for (let mKey in methods) {
// Skip if the proxy method already exists in retArr
if (retArr[mKey] !== undefined) continue;
// Otherwise set proxy method
Object.defineProperty(retArr, mKey, {
value: function(...args) {
// Loop through all elements in selection
retArr.forEach(el => {
// Call method if it exists
if (el[mKey] !== undefined) el[mKey](...args);
});
}
});
}
}
return retArr;
// Gets all prototype methods for one object
function getProtoMethods(obj) {
let methods = {};
// Loop through all prototype properties of obj and add all functions
for (let pKey of Object.getOwnPropertyNames(Object.getPrototypeOf(obj))) {
// Skip properties that aren't functions and constructor
if (pKey !== "constructor" && typeof obj[pKey] === "function") {
methods[pKey] = obj[pKey];
}
}
return methods;
}
}
The idea is to put all the selected objects in an array, then define additional methods on the array. It should have all the method names of the selected objects, but those methods are actually proxies of those original methods. When one of these proxy methods is called, it calls the original method on all (see caveat 1) the selected objects in the array. But otherwise the returned object can just be used as a normal array (or more accurately, NodeList in this case).
However it's worth mentioning that there are several caveats with this particular implementation.
The list of proxy methods created is the union of the methods of all selected objects, not intersection. Suppose you selected two elements - A and B. A has method doA() and B has method doB(). Then the array returned by app() will have both doA() and doB() proxy methods. However when you call doA() for example, only A.doA() will be called because obviously B does not have a doA() method.
If the selected objects do not have the same definition for the same method name, the proxy method will use their individual definitions. This is usually desired behaviour in polymorphism but still it's something to bear in mind.
This implementation does not traverse the prototype chain, which is actually a major problem. It only looks at the prototypes of the selected elements, but not the prototypes of prototypes. Therefore this implementation does not work well with any inheritance. I did try to get this to work by making getProtoMethods() recursive, and it does work with normal JS objects, but doing that with DOM elements throws weird errors (TypeError: Illegal Invocation) (see here). If you can somehow fix this problem then this would be a fully working solution.
This is the problematic recursive code:
// Recursively gets all nested prototype methods for one object
function getProtoMethods(obj) {
let methods = {};
// Loop through all prototype properties of obj and add all functions
for (let pKey of Object.getOwnPropertyNames(Object.getPrototypeOf(obj))) {
// Skip properties that aren't functions and constructor
// obj[pKey] throws error when obj is already a prototype object
if (pKey !== "constructor" && typeof obj[pKey] === "function") {
methods[pKey] = obj[pKey];
}
}
// If obj's prototype has its own prototype then recurse.
if (Object.getPrototypeOf(Object.getPrototypeOf(obj)) == null) {
return methods;
} else {
return {...methods, ...getProtoMethods(Object.getPrototypeOf(obj))};
}
}
Sorry I cannot solve your problem 100%, but hopefully this at least somewhat helpful.
I'm wondering what is the best way of copying object property's from/to another object using AngularJS/JavaScript
Below is the Json object I'm getting:
{
"application":{
"number":"323-23-4231",
"amount":"234.44",
"ref_name":"Thomas Edison"
},
"borrower":{
"prefix":"Mr",
"first_name":"Eric",
"middle_name":"E",
"last_name":"Schulz",
"date_of_birth":"09/29/1975",
"email_address":"myemail#HOTMAIL.COM",
"phones":[
{
"number":"(555)555-5555",
"type":"Mobile"
}
]
}
}
Using the above Json object I want the new JSON object data to be looks like this:
{
"number":"323-23-4231",
"amount":"234.44",
"ref_name":"Thomas Edison",
"prefix":"Mr",
"first_name":"Eric",
"middle_name":"E",
"last_name":"Schulz",
"date_of_birth":"09/29/1975",
"email_address":"myemail#HOTMAIL.COM",
"phones":[
{
"number":"(555)555-5555",
"type":"Mobile"
}
]
}
If you have the original object in a variable called oldObj, you could do something like this (untested):
newObj = {}
newObj = angular.extend(newObj, oldObj.application)
newObj = angular.extend(newObj, oldObj.borrower)
There are lots of ways to copy the properties of one object to another in different frameworks. Angular has the built-in angular.extend which you can read about here
You could even do this without using any fancy methods:
newObj.number = oldObj.application.number
newObj.amount = oldObj.application.amount
newObj.ref_name = oldObj.application.ref_name
newObj.prefix = oldObj.borrower.prefix
...
But that'd be kinda silly :)
I have an object model that I want to be able to save. I am going to export it to JSON and then read it back in as JSON.
Saving to JSON is easy. Just use this: JSON.stringify(this).
Loading from JSON isn't as simple.
We can't just use this = JSON.parse(someJson) because the methods wont be attached.
Using something like lang.mixin(this, JSON.parse(someJson)) will get the functions but objects that are
Photo Class:
define([...], function(...){
return declare(null, {
name: ..., // String
url:..., // String
complexProperty:..., // Some other class
someFunction1: function(...){..},
someFunction2: function(...){..},
someFunction2: function(...){..}
}
));
Photo Album Class:
define([...], function(...){
return declare(null, {
photos: [], /* Array of type Photo (see above) */
someOtherProperty: ...,
someOtherProperty: ...,
someFunction1: function(...){..},
someFunction2: function(...){..},
someFunction2: function(...){..},
toJson: function(){
return JSON.stringify(this); // From dojo/json
}
loadFromJson: function(jsonIn){
// How to do this?
},
/* This doesn't work because methods will be overridden */
loadFromJson1: function(jsonIn){
this = JSON.parse(someJson);
},
/* This insures that my methods are kept intact but my childrens methods arn't (ie: the array of photos) */
loadFromJson2: function(jsonIn){
lang.mixin(this, JSON.parse(someJson));
},
/* This seems like an aweful lot of work. Any better ways to do this? */
loadFromJson3: function(jsonIn){
this.someOtherProperty = jsonIn.someOtherProperty;
this.someOtherProperty = jsonIn.someOtherProperty;
foreach(jsonIn.photos: photoJson){
var newPhoto = new Photo();
newPhoto.loadfromJson(photoJson);
this.photos.add(newPhoto);
}
... All other properties set recursively. All things in model now need this method ...
}
}
));
I think you would be better off returning a JSON object that contains just the data you need to serialize, not the whole class. Then your loadFromJson method would be a little easier to implement, and you wont be sending unnecessary data over the network. Example toJson():
toJson: function() {
return JSON.stringify({
photos: this.photos,
someImportantProp: this.someImportantProp,
anotherProp: this.anotherProp
});
}
JSON is not the same thing as a JavaScript object, in fact, it's only a subset. JSON only allows arrays, objects and of course basic types like Strings, booleans, numbers and null. You can find the entire specification here.
If you really want to keep the functions you can use the eval() function, but this is not really recommended, because it indeed parses those functions. If the evaluated content contains malicious input, then that is being executed as well.
For example:
eval("myObj = { getSum: function getSum(a, b) { return a + b; } }");
myObj.getSum(1, 2); // Returns 3
You can better attempt to save the state of the object (name and url for example) and rebuild it once you parse it again, that is what happens in other programming languages as well. For example, if you're serializing/deserializing an object in Java.
Hi I'm trying to author a jQuery plugin and I need to have methods accessible to elements after they are initialized as that kind of object, e.g.:
$('.list').list({some options}); //This initializes .list as a list
//now I want it to have certain methods like:
$('.list').find('List item'); //does some logic that I need
I tried with
$.fn.list = function (options) {
return this.each(function() {
// some code here
this.find = function(test) {
//function logic
}
}
}
and several other different attempts, I just can't figure out how to do it.
EDIT:
I'll try to explain this better.
I'm trying to turn a table into a list, basically like a list on a computer with column headers and sortable items and everything inbetween. You initiate the table with a command like
$(this).list({
data: [{id: 1, name:'My First List Item', date:'2010/06/26'}, {id:2, name:'Second', date:'2010/05/20'}]
});
.list will make the <tbody> sortable and do a few other initial tasks, then add the following methods to the element:
.findItem(condition) will allow you to find a certain item by a condition (like findItem('name == "Second"')
.list(condition) will list all items that match a given condition
.sort(key) will sort all items by a given key
etc.
What's the best way to go about doing this?
If you want these methods to be available on any jQuery object, you will have to add each one of them to jQuery's prototype. The reason is every time you call $(".list") a fresh new object is created, and any methods you attached to a previous such object will get lost.
Assign each method to jQuery's prototype as:
jQuery.fn.extend({
list: function() { .. },
findItem: function() { .. },
sort: function() { .. }
});
The list method here is special as it can be invoked on two occasions. First, when initializing the list, and second when finding particular items by a condition. You would have to differentiate between these two cases somehow - either by argument type, or some other parameter.
You can also use the data API to throw an exception if these methods are called for an object that has not been initialized with the list plugin. When ('xyz').list({ .. }) is first called, store some state variable in the data cache for that object. When any of the other methods - "list", "findItem", or "sort" are later invoked, check if the object contains that state variable in its data cache.
A better approach would be to namespace your plugin so that list() will return the extended object. The three extended methods can be called on its return value. The interface would be like:
$('selector').list({ ... });
$('selector').list().findOne(..);
$('selector').list().findAll(..);
$('selector').list().sort();
Or save a reference to the returned object the first time, and call methods on it directly.
var myList = $('selector').list({ ... });
myList.findOne(..);
myList.findAll(..);
myList.sort();
I found this solution here:
http://www.virgentech.com/blog/2009/10/building-object-oriented-jquery-plugin.html
This seems to do exactly what I need.
(function($) {
var TaskList = function(element, options)
{
var $elem = $(element);
var options = $.extend({
tasks: [],
folders: []
}, options || {});
this.changed = false;
this.selected = {};
$elem.sortable({
revert: true,
opacity: 0.5
});
this.findTask = function(test, look) {
var results = [];
for (var i = 0,l = options.tasks.length; i < l; i++)
{
var t = options['tasks'][i];
if (eval(test))
{
results.push(options.tasks[i]);
}
}
return results;
}
var debug = function(msg) {
if (window.console) {
console.log(msg);
}
}
}
$.fn.taskList = function(options)
{
return this.each(function() {
var element = $(this);
if (element.data('taskList')) { return; }
var taskList = new TaskList(this, options);
element.data('taskList', taskList);
});
}
})(jQuery);
Then I have
$('.task-list-table').taskList({
tasks: eval('(<?php echo mysql_real_escape_string(json_encode($tasks)); ?>)'),
folders: eval('(<?php echo mysql_real_escape_string(json_encode($folders)); ?>)')
});
var taskList = $('.task-list-table').data('taskList');
and I can use taskList.findTask(condition);
And since the constructor has $elem I can also edit the jQuery instance for methods like list(condition) etc. This works perfectly.
this.each isn't needed. This should do:
$.fn.list = function (options) {
this.find = function(test) {
//function logic
};
return this;
};
Note that you'd be overwriting jQuery's native find method, and doing so isn't recommended.
Also, for what it's worth, I don't think this is a good idea. jQuery instances are assumed to only have methods inherited from jQuery's prototype object, and as such I feel what you want to do would not be consistent with the generally accepted jQuery-plugin behaviour -- i.e. return the this object (the jQuery instance) unchanged.