Lodash map with function: how to pass to function another parameter? - javascript

I'm using lodash map in this way
const newCollection = _.map(
responseJson.OldCollection,
AddDetailsToSingleItems
);
having
function AddDetailsToSingleItems (item ) {
...
}
I ask you, please, what's the right syntax to pass a parameter to this function.
I'd like to have
function AddDetailsToSingleItems (item, myNewParam ) {
...
}
(note the myNewParam).
I don't kow how to tell to loadsh map to pass every single item to my function and to pass one more param when calling AddDetailsToSingleItems

You haven't explained where myNewParam is coming from, but I assume you have that data somewhere.
Lodash map (just like normal JavaScript map) accepts a function as its second argument to be run on all elements of the supplied list. You can just pass an anonymous function:
_.map(
responseJson.OldCollection,
item => AddDetailsToSingleItems(item, myNewParam)
);

You can create a function that knows the value of myNewParam, but only accepts the item parameter like this:
var myNewParam = 'param_value';
var AddDetailsFn = function(m) {
return function(item) {
return AddDetailsToSingleItems(item, m);
};
};
const newCollection = _.map(
responseJson.OldCollection,
AddDetailsFn(myNewParam)
);
This way, _.map only sees a function that takes a single parameter. The AddDetailsFn returns a function that takes a single parameter, but already has the value of myNewParam captured. You can also be more succinct with:
const newCollection = _.map(
responseJson.OldCollection,
function(item) { return AddDetailsToSingleItems(item, myNewParam); }
);

Related

best way to handle callback initialization and functions that hold data between function calls

I have this code that is called in an ajax callback once the data is fetched:
function onFetchCallback(data) {
onFetchCallback.accumData ??= [];
onFetchCallback.timeLine ??= [];
onFetchCallback.tempValues1 ??= [];
onFetchCallback.tempValues2 ??= [];
onFetchCallback.char;
const hasNulls = data.includes(null);
if (!hasNulls) {
//push values into different arrays
} else {
//push the rest of no nulls if there is any...
}
}
I dont find this clean, bacause I am checking if the arrays that accumulate the data are initialized for every callback call. I think it woull be better to have the callback function initialized, so that the arrays are created, and then call the functions that will store the data in the arrays.
So I did:
function onFetchCallback() {
function init() {
onFetchCallback.accumData ??= [];
onFetchCallback.timeLine ??= [];
onFetchCallback.tempValues1 ??= [];
onFetchCallback.tempValues2 ??= [];
onFetchCallback.char;
}
function store(data) {
const hasNulls = data.includes(null);
if (!hasNulls) {
//push values into different arrays
} else {
//push the rest of no nulls if there is any...
}
}
onFetchCallback.init = init;
onFetchCallback.store = store;
}
So then when I need to use my callback I do:
onFetchCallback();
onFetchCallback.init();
myWhateverFunc(onFetchCallback.store);
Being myWhateverFunc the one calling the callback:
function myWhateverFunc(callback) {
$.ajax({
//whatever
})
.done(function (data) {
callback(data); //CALL
});
}
This works and I find it super javasScriptic so I do it all the time. Meaning the onFetchCallback initialization + other methods call to handle the function members. I do not know js in depth so I would like to know of there are any flaws with this pattern, or if there is any other better/cooler/javaScriptStylish way to do this.
The pattern you're using has a lot of resemblence with the function constructor which is more commonly used in JavaScript.
An implementation of your code in the function constructor pattern would like like this:
function FetchCallback() {
this.accumData = [];
this.timeLine = [];
this.tempValues1 = [];
this.tempValues2 = [];
this.char;
}
FetchCallback.prototype.store = function(data) {
const hasNulls = data.includes(null);
if (!hasNulls) {
// push values into different arrays
} else {
// push the rest of no nulls if there is any...
}
};
It enables you to create an object with properties and methods which are predefined. This removes the hassle of repetition when you need multiple instances of this same object.
To use the constructor you'll need to create a new instance with the new keyword. This will return an object with all the properties and methods set.
const fetchCallback = new FetchCallback();
// Note the .bind() method!
myWhateverFunc(fetchCallback.store.bind(fetchCallback));
Edit
You'll need to specifically set the value of this to the created instance that is stored in fetchCallback. You can do this with the bind() method. This methods explicitly tells that this should refer to a specific object.
The reason to do this is that whenever you pass the store method as the callback to the myWhateverFunc, it loses it's context with the FetchCallback function. You can read more about this in this post
The main difference between this and your code is that here the FetchCallback function will be unaltered, where your function is reassigned every time you call onFetchCallback() and onFetchCallback.init(). The constructor pattern will result in more predictable behavior, albeit that the this keyword has a learning curve.

calling a smart contract functons as a a string in javascript web3

Here is my question: Instead of calling a smart contract function like this
//assuming the name of the contract function is called "balanceOf"
contract.methods.balanceOf("0x", "0x").call(err, balance) => {
console.log({err, balance});
})
i want to know if it is possible to call like this:
var funcName = "balanceOf";
var parameter = "0x, 0x";
contract.methods.funcName(parameter).call(err, balance) => {
console.log({err, balance}];
})
Thank You.
The objects in javascript can be accessed like an array by using the keys as indexes. So in your case it would be:
var funcName = "balanceOf";
var parameter = "0x, 0x";
contract.methods[funcName]("0x", "0x").call(err, balance) => {
console.log({err, balance}];
})
But the way you passing the parameter is not going to work like that. You are just passing a string as a parameter. Think of it like passing parameters to any other function.

How would I programmatically call an object method? Like MyObject.XVariable(//some function)

I have an object, that takes input from an API call to fill it up.
let MyDog = {
Name: 'Dog',
}
let arrayFunctions;
fetchDogsFunctions(dogAPIUrl).then(res => {
//results is an array that has a list of functions the dog has, like //getStats(), or walkDog()
arrayFunctions = res;
})
Now I want to map through the array results and call the function on my dog like...
arrayFunctions.map(item => {
await MyDog.item(//Params)
})
How can I do this??
Where MyDog is set up from a file, and then depending on the array functions, for each function it programmatically fills in the call to the new function like MyDog.item where item is a variable in an array called "Walk()"
I assumed how your data might have structured. Pls take a look below and you might get the idea of how to call functions dynamically using "await"
const MyDog = {
funA(a) { return Promise.resolve('Function A called with parameter ' + a) }
, funB(b) { return Promise.resolve('Function B called with parameter ' + b) }
}
const arrayFunctions = ['funA', 'funB']
Promise.all(arrayFunctions.map(async (item, i) =>
await MyDog[item](++i))
)
.then(console.log)
I can't see any property name "item" in your MyDog Object
The answer is to do :
MyDog[item]()
within the loop.
I was asking the correct syntax to perform this operation

inside Array.push without a function call

I want to perform more logic before writing an element to an array:
tempDatensatz.push( () => {
var current = window.dataForDataTable[i].outbounds[key].updatedAt;
if (current) {
return current.toString();
} else {
return "".toString();
}
});
Getting the value from that array will be achieved like this:
tempDatensatz[0]()
But I want the same logic in it without having a function to call. I need a normal array, where I get a value like this:
tempDatensatz[0]
What can I do instead?
Updated
I published my project to gitHub, you can take a look if you need a better understanding :)
https://github.com/te2020/GoEuro/blob/master/GoEuro/Views/Home/Index.cshtml
Use an immediately invoked function instead of just a function:
tempDatensatz.push( (function(){
var current = window.dataForDataTable[i].outbounds[key].updatedAt;
if (current) {
return current.toString();
} else {
return "".toString();
}
})());
The function will be executed immediatly after it definition, returning the result. So push won't push a reference to that function but instead it will push it returned value (the result).
You can write a proxy as follows:
function makeProxy(array) {
return new Proxy(array, {
get(target, property) {
return !isNaN(property) ? target[property]() : target[property];
}
});
}
const tempDatensatz = [];
const useThisOne = makeProxy(tempDatensatz);
useThisOne.push(() => alert("Hi, Jane!"));
useThisOne[0];
Pushing/writing to the array will work as expected, but retrieving its elements will go through the get handler, which will execute the function.
You could just use an expression, like:
tempDatensatz.push(
(window.dataForDataTable[i].outbounds[key].updatedAt || '').toString();
);
For more complex expressions you can often use the ternary operator. For the above that would look like this:
tempDatensatz.push(
window.dataForDataTable[i].outbounds[key].updatedAt
? window.dataForDataTable[i].outbounds[key].updatedAt.toString()
: ''
);
Your code
When looking at the github code you linked to, you can do all that pushing with this "oneliner":
var tempDatensatz =
['companyId', 'mode', 'duration', 'outboundId', 'journeyId', 'departureTime',
'arrivalTime', 'stops', 'price', 'updatedAt', 'segments']
.map( prop => (window.dataForDataTable[i].outbounds[key][prop] || '').toString() );

How to extract data from this object?

I am working on some legacy code for my workplace and cannot figure out how to process data from a data object that is returned. The retrieveThis function is supposed to retrieve the object data:
myObj.retrieveThis(new myObj.getThisData({num : 10, page : 1, sorting : "stampDescending"}), function () {myCallback(this);});
var myObj = function () {
var getThisData = {
// this function populates an array and returns it to the retrieveThis function
}
var theObject = {
retrieveThis: function(a, b) {
var OBJ = {};
// OBJ is populated by the data from var getThisData...I checked
setTimeout(function () {
b(OBJ);
}, 1000);
}
}
return theObject;
})();
I am having trouble getting the data ("theObject") to my callback function (or at all). I pass this to myCallback(), where myCallback is:
function myCallback(obj) {
alert(Object.keys(obj));
}
The alert box shows a list of keys including document, jQuery, and myObj. It looks like the data from OBJ is populated from the array allTheData, but I can't seem to pass this back (as return theObject;) to process it. Where am I going wrong here?
Note - I cannot modify this legacy code. I need to process "theObject".
You pass wrong callback function
inside you call it with parameters, so you should define it with parameters
myObj.retrieveThis(
new myObj.getThisData({num : 10, page : 1, sorting : "stampDescending"}),
myCallback);
in this case in first param to myCallback passed OBJ object

Categories