Develop Reference

react adding new array method to return array's object item by it's key

I have some enum objects and i want to get its lebel by it's value.
Let's say this is my enum list
const enumList = {
businessType: [
{ value: "b", label: "B2B" },
{ value: "s", label: "SAAS" },
{ value: "c", label: "C2C" },
],
userType: [
{ value: "A", label: "Admin" },
{ value: "s", label: "Super User" },
{ value: "t", label: "trainer" },
]
}
So now I want to get a particular object label by its key.
like this,
enumList.userType.getLabel('s')'
// super user
I mean, i want to make it re-usable, currently i am doing like this and i dont like it
index = enumList.userType.findIndex(x => x.value ==="s");
enumList.userType[index].label
// super user
Does anyone know how can i make it re-usable to access it from globally like this enumList.userType.getLabel('s) ?

This custom Array method will allow you to do this enumList.userType.getLabel('s') and receive 'Super User'
Array.prototype.getLabel = function(val) {
return this.find(({value}) => value === val).label
}

See Why is extending native objects a bad practice?
It looks like you want a one-liner, so just use find
const { label } = enumList.userType.find(userType => userType.value === 's');

Returning the ids from the object within the arrays

I have a multidimensional javascript array of objects that I am trying to use to simply collate the Unit id into a new array as shown below.
What is the best solution for returning the id within the inner value so I just get an array of the ids whatever I try seems to not work
[
{
units: [
{
id: 10000282,
name: "Group 1",
},
{
id: 10000340,
name: "Group 2",
},
{
id: 10000341,
name: "Group 3",
},
],
},
{
units: [
{
id: 10000334,
name: "Group 4",
},
],
},
]
Expected output - just return an array with simply the ids
e.g
ids = [ 10000282, 10000340, 10000341, 10000334 ]

Assuming that data is in variable data:
> data.map(o => o.units.map(u => u.id)).flat()
[ 10000282, 10000340, 10000341, 10000334 ]
This assumes you're in an environment where .flat() is a thing.
If that's not the case, the longer way around is
const ids = [];
data.forEach(o => {
o.units.forEach(u => {
ids.push(u.id);
});
});

Creating a Object with same Structure than received json

Hola Developers im trying to create a product in my shopping card , but still im stacked in one issue :
Can't find the proper way to design a object just on the same way i receive it from my json (back-end).
Lets say the part is causing the issue is this:
JSON RECEIVED
"product_category": [
{
"categories_of_product": "Good"
},
{
"categories_of_product": "Danger"
},
{
"categories_of_product": "Homer"
}
],
"people_buying_this_product": "Jack Ripper"
},
]
then on my building-product-processs , on the data return is a section that have to do with this, where in then using checkboxes i get which checkbox is checked or not , in order to build a array of categories similar to the former one i have shown:
DATA RETURN
ProductAdded: {
description: "",
upload_image3: "",
upload_image2: "",
upload_image1: "",
unities: 0,
price: 0,
name: "",
Categories: [
{ id: 1, value: "Miscellaneous", selected: false },
{ id: 2, value: "Homer", selected: false },
{ id: 3, value: "Electronic", selected: false },
{ id: 4, value: "Internet", selected: true },
{ id: 5, value: "Kids", selected: false },
{ id: 6, value: "Donas", selected: true },
{ id: 7, value: "Sports", selected: true },
{ id: 8, value: "Horror", selected: false }
],
METHOD that dispatches de action in vuex
addProductOnSale(thisCurrent) {
this.$store.dispatch("addProductSale", this.ProductAdded);
}
then being already in the VUEX state management , on the action in fact , trying to build the new product for this product category, i set this:
addProductSale({commit,getters},currentProduct){
product_category: currentProduct.Categories.filter(option =>
option.selected).map(option => {categories_of_product: option.value})
}
------------------->this one gives me undefined like:
"product_category":
[
undefined
],
"product_category":
[
undefined
],
"product_category":
[
undefined
],
]
or tried this other :
addProductSale({commit,getters},currentProduct){
product_category:currentProduct.Categories.forEach( option.selected,() =>
option.value).map(option => option.selected),...
}
and gave me error , not even showing a result.
Basically cant find the way to design the same structure im receiving for json , nor even reaching to values.
Is weird ,but if i only set the query like this:
addProductSale({commit,getters},currentProduct){
product_category:currentProduct.Categories.filter(option => option.selected)
}
Indeed filters and gives back the objects inside Categories which commit the condition of selected true , but with its plain format just as the data returns , but that's not the idea.
Any advice or help?
Thanks in advance!!!!

Most efficient way to search through an object and array locating match

i have 2 object/arrays:
var objA = {
Red Chair : "DC10291",
USBDongle : "USKI82322",
}
var arrayB = [
{
field: "Yellow Banana",
id: "Yellow Banana"
},
{
field: "Red Chair",
id: "Red Chair"
},
{
field: "Garden",
id: "Garden"
}
]
What i am trying to do is, that if a KEY from objA, e.g. Red Chair, is present in arrayB, then remove it from arrayB.
I have done this:
var arrayClone = _.cloneDeep(arrayB);
var removeThese = [];
Object.keys(arrayClone).forEach(function(p) {
removeThese.push(p)
});
removeThese.forEach(function(remove) {
arrayB.forEach(function(item) {
if(item.id === remove) {
delete objA[remove];
}
});
});
The above works as expected, however is this the most effieicnt? Reasone i ask is because looping throuhg and array within an array loop doesnt feel the best practice? And will have performance impact

You can simply filter it, like this
_.filter(arrayB, obj => !objA.hasOwnProperty(obj.field))
// [ { field: 'Yellow Banana', id: 'Yellow Banana' },
// { field: 'Garden', id: 'Garden' } ]
This uses ES2015's Arrow function syntax. You can write the same with a normal function like this
arrayB.filter(function(obj) {
return !objA.hasOwnProperty(obj.field);
});
// [ { field: 'Yellow Banana', id: 'Yellow Banana' },
// { field: 'Garden', id: 'Garden' } ]
We are basically filtering out all the objects whose field value is a key in objA.

If you would like to keep the original arrayB and get a reduced version of it according to your condition then Array.prototype.reduce() does that with O(n) time complexity. However if you would like to perform this operation in place then Array.prototype.reduceRight() does that with O(n) time complexity.
var objA = {
"Red Chair" : "DC10291",
"USBDongle" : "USKI82322",
},
arrayB = [
{
field: "Yellow Banana",
id: "Yellow Banana"
},
{
field: "Red Chair",
id: "Red Chair"
},
{
field: "Garden",
id: "Garden"
}
],
arrayC = arrayB.reduce((p,c) => !objA[c.field] ? p.concat(c) : p, []);
console.log(arrayC);
arrayB.reduceRight((p,c,i,a) => (p[c.field] && a.splice(i,1),p),objA);
console.log(arrayB);

Wrap the function into another function

I have the code that sorts an array of objects by the object property using lodash. It’s pretty simple:
_.sortBy(data.cycles, "id");
However, I discovered that data.cycles[].id might be a string, so I have to convert each property to number before passing it to _.sortBy. Is there any elegant way of doing it? I think I should combine _.property and parseInt somehow, but I don’t know how.
data.cycles might look like this:
[
{
"id": "20",
"name": "John"
},
{
"id": "15",
"name": "Sarah"
},
{
"id": "158",
"name": "Bill"
},
{
"id": "-6",
"name": "Jack"
},
{
"id": "59",
"name": "Bob"
}
]

I would compose a sortBy() callback as follows:
var collection = [
{ id: '20', name: 'John' },
{ id: 15, name: 'Sarah' },
{ id: 158, name: 'Bill' },
{ id: '-6', name: 'Jack' },
{ id: 59, name: 'Bob' }
];
_.sortBy(collection, _.flow(_.property('id'), parseInt));
// →
// [
// { id: '-6', name: 'Jack' },
// { id: 15, name: 'Sarah' },
// { id: '20', name: 'John' },
// { id: 59, name: 'Bob' },
// { id: 158, name: 'Bill' }
// ]
The flow() function is useful when you want to compose a callback function out of many functions, it just forwards the output to the next function in line. The property() function returns a function that gets the specified property name from it's argument. This is the id, and that gets passed to parseInt().
We're essentially mapping and sorting at the same time. This has an efficiency advantage, in addition to being a one-liner: it doesn't have to iterate over the whole collection twice. This isn't a big deal with smaller collections, but with larger collections, the impact is noticeable.

You might want to run map first and modify id, then do a sort.
In vanilla JS, it would look something like:
function mapFn(item){
item.id = parseInt(item.id, 10);
return item;
}
var sortedCycles = data.cycles.map(mapFn).sort(sortFn);
In lodash, you could have:
var sortedCycles = _.sortBy(_.map(data.cycles, mapFn), 'id');
// or
var sortedCycles = _.chain(data.cycles).map(mapFn).sortBy('id').value()