Develop Reference

Looping through an object only returns the first object

I am trying to reshape some data to be used in a table. To do this I am mapping over an array and then looping over an object inside of it to create a new object with the data I want in it. The issue Im having is if the object contains more than one object inside of it I only get a new object for the first item.
I am trying to get a new object for each of the objects held inside changedProperties
Can anyone help? / Explain?
Here is a working example:
const MOCK_DATA = [
{
triggeredByID: "d5ae18b7eb6f",
triggeredByName: "name",
changedProperties: {
LastName: {
__oldValue: "Mallory",
__newValue: "Mallorie",
},
Suffix: {
__oldValue: "DO",
__newvValue: "NP",
},
},
createdAt: "2022-06-01T10:20:21.329337652Z",
},
{
triggeredByID: "d5ae18b7eb6f",
triggeredByName: "John",
changedProperties: {
State: {
__oldValue: ["TX", "AL"],
__newValue: ["TX", "AL", "FL"],
},
City: {
__oldValue: "Austin",
__newValue: "San Antonio",
},
},
createdAt: "2022-06-01T10:20:21.329337652Z",
},
];
const changedProperties = MOCK_DATA.map((item, idx) => {
for (const [key, value] of Object.entries(item.changedProperties)) {
return {
field: key,
old: item.changedProperties[key].__oldValue,
new: item.changedProperties[key].__newValue,
name: item.triggeredByName,
createdAt: item.createdAt,
};
}
});
console.log(changedProperties)

Yes, if you return inside a for-loop, its scoped to the function. Meaning you will return from the entire function on the first iteration of your loop. Try this instead:
const changedProperties = MOCK_DATA.map((item, idx) => {
return Object.entries(item.changedProperties).map(([key, value]) => {
return {
field: key,
old: item.changedProperties[key].__oldValue,
new: item.changedProperties[key].__newValue,
name: item.triggeredByName,
createdAt: item.createdAt,
};
}
});
console.log(changedProperties)

Return true if an array within an array contains specific key

I have the following the object:
items: [
{
object_a {
id: "1",
value: "somevalue1"
}
},
{
object_b {
id: "2"
value: "somevalue2"
items:[
{
nested_object_a {
id: "3"
value: "somevalue3"
},
nested_object_b {
id: "4"
value: "somevalue4"
},
}
]
}
},
]
I can check if the value key exists in the initial items array:
items.some(item => item.hasOwnProperty("value"));
To see if the value key exists in the nested object_b item array I can do the following:
items[1].object_b.items.some(item => item.hasOwnProperty("value"));
Instead of specifying which number in the array to look in I need to make the final expression dynamic. I'm certain I need to do a find or a filter on the top level items, but I've had no luck with it so far.

I found that using an every function on the items allowed me to return the boolean value I required form the array. The problem this created is any array item that didn't have the object_b key on was returning null and breaking my app. It turns out I needed to use an optional chaining operator to get around this (.?).
Thanks to #ikhvjs for linking that stackedoverflow article.
Working code:
items.every(item => {
item.object_b?.items.some(item => item.hasOwnProperty("value"));
});

Trying to create array of strings to use in a destructuring function for removing object properties, only single string value works

I have an array of objects as part of a data response that I am grouping together using lodash's groupBy via each object's groupName key.
Some of the items that come back have a groupName value of null, undefined or an empty string and lodash creates separate groups for each of those values.
I combine all of the falsey groups into a single group name "Uncategorized" and attempt to remove the original falsey groups to only return "Uncategorized" and all other truthy groups.
The problem I'm running into is that I'm trying to use the rest operator to remove the original falsy objects with undefined, null, and empty string keys by assigning them to a variable like let groupKeysToRemove = ['undefined', 'null', ''] and then trying to remove them like let { [groupKeysToRemove]: removed, ...groups } = initialGroups; but it returns the same Object with nothing removed. I'm not sure if my syntax is wrong or what but I am stumped.
Code via sandbox:
const resources = [
{
groupName: undefined,
name: "color organizer"
},
{
groupName: null,
name: "Bart_Simpson_200px"
},
{
groupName: "Spread Sheets",
name: "Backflow"
},
{
groupName: "Spread Sheets",
name: "220px-Marge_Simpson"
},
{
groupName: "",
name: "212px-Homer_Simpson_2006"
},
{
groupName: "Spread Sheets",
name: "Product 6"
},
{
groupName: "Warranties",
name: "Warranty Bart Simpson"
},
{
groupName: "Warranties",
name: "Warranty Product 2"
},
{
groupName: "Warranties",
name: "Warranty Product 3"
}
];
let initialGroups = groupBy(resources, "groupName");
let uncategorizedGroups = [];
uncategorizedGroups.push(...initialGroups[undefined], ...initialGroups[null], ...initialGroups[""]);
const renameGroups = uncategorizedGroups.map((object) => {
object.groupName = "Uncategorized";
return object;
});
const renamedGroups = groupBy(renameGroups, "groupName");
console.log('RENAMED GROUPS: ', renamedGroups)
const groupKeysToRemove = "undefined"
let { [groupKeysToRemove]: removed, ...groups } = initialGroups;
groups = { ...groups, ...renamedGroups };

Think of the brackets syntax [] for the destructing operation as an index to a property of an object, not an array that you pass in. It's analogous to calling for example obj["a"] vs obj.a to access the a field on obj.
So knowing this, you need to pass in 3 arguments to extract the values that you want to remove. For null and undefined I had to put them in separate variables, it wasn't working when putting them directly in the brackets:
const nullKey = null;
const undefinedKey = undefined;
let {
[nullKey]: nullGroup,
[undefinedKey]: undefinedGroup,
[""]: emptyStringGroup,
...groups } = initialGroups;
groups = { ...groups, ...renamedGroups };
console.log("initialGroups: ", initialGroups);
console.log("GROUPS: ", groups);
console.log("null group", nullGroup)
console.log("undef group", undefinedGroup)
console.log("emptyStringGroup group", emptyStringGroup)

Best way to to pass the output of a function to child components in Vue

I have a parent component with a data object config as below:
data() {
return {
config: {
Groups: [
{
name: "A",
Types: [
{ mask: 1234, name: "Alice", type: 1},
{ mask: 5678, name "Bob", type: 1},
]
},
{
name: "B",
Types: [
{ mask: 9876, name: "Charlie", type: 2},
{ mask: 5432, name "Drake", type: 2},
]
}
],
},
Defaults: {
dummyBoolean: false,
dummyNumber: 1
}
}
}
}
There are also 2 child components that for each of them, I want to pass the Types array (within each elements of the Groups object) if each_element.name == child component's name.
What I've done so far is having a computed function for each of the components as follows (which is highly inefficient):
computed: {
dataSender_A() {
let array= []
this.config.Groups.forEach( element => {
if (element.name === "A") array = element.Types
});
return array
},
dataSender_B() {
let array= []
this.config.Groups.forEach( element => {
if (element.name === "B") array = element.Types
});
return array
},
}
I'm looking for a better alternative to make this happen (as I might have more child components) and two approaches I tried so far have failed.
Having only one computed function that takes the component's name as argument and can be passed like <child-component-A :types="dataSender('A')" /> <child-component-B :types="dataSender('B')" /> (As it throws error dataSender is not a function)
computed: {
dataSender: function(groupName) {
let array= []
this.config.Groups.forEach( element => {
if (element.name === groupName) array = element.Types
});
return array
},
}
Having the above function in methods and pass that as props to child components (As it passes the function itself, not the outputted array)
I'd appreciate any help on this.

The computed properties don't accept parameters that are involved in the calculation, In this case you could just use a method like :
methods: {
dataSender: function(groupName) {
let array= []
this.config.Groups.forEach( element => {
if (element.name === groupName) array = element.Types
});
return array
},
}

Array.forEach() and Array.slice() together doesn't work correctly [duplicate]

This question already has answers here:
What is the most efficient way to deep clone an object in JavaScript?
(67 answers)
Closed 6 years ago.
it's supposed to Array.slice() let me to make a copy of an array, and then I can modify that copy without modifying the original array, but when I use Array.forEach() over the copy for delete some values this values also are removed from the original array. Does anybody have an idea why this happens?
Here is the code that I've used:
var originalArray = [
{ id: 1, name: 'Sales', datasources: [
{ id:1 , name: 'datasource1', fields: [] },
{ id:2 , name: 'datasource2', fields: [] },
] },
{ id: 4, name: 'Accounts', datasources: [
{ id:3 , name: 'datasource3', fields: [] },
{ id:4 , name: 'datasource4', fields: [] },
] },
{ id: 123, name: 'my datasources', datasources: [
{ id:1 , name: 'datasource1', fields: [] },
{ id:2 , name: 'datasource2', fields: [] },
{ id:3 , name: 'datasource3', fields: [] },
{ id:4 , name: 'datasource4', fields: [] },
] },
{ id: 12, name: 'shared datasources', datasources: [
{ id:13 , name: 'myshared datasource', fields: [] },
{ id:16 , name: 'hello test', fields: [] },
] },
];
var copyOfOriginalArray = originalArray.slice();
copyOfOriginalArray.forEach((folder, index) => {
folder.datasources = folder.datasources.filter((o) => { return o.name.trim().toLowerCase().includes('hello'); });
});
JSON.stringify(originalArray);
JSON.stringify(copyOfOriginalArray);

Acording to this definition.
The slice() method returns a shallow copy of a portion of an array into a new array object.
Shallow copy is a bit-wise copy of an object. A new object is created that has an exact copy of the values in the original object. If any of the fields of the object are references to other objects, just the reference addresses are copied i.e., only the memory address is copied.
for deep copying any object in javascript you can use this function:
function deepCopy(oldObj) {
var newObj = oldObj;
if (oldObj && typeof oldObj === 'object') {
newObj = Object.prototype.toString.call(oldObj) === "[object Array]" ? [] : {};
for (var i in oldObj) {
newObj[i] = deepCopy(oldObj[i]);
}
}
return newObj;
}

Slice will create a copy of the array itself, but it will not clone the objects in the array (those will still be references).
You will need to recursively clone your array and its contents or use something like Lodash's cloneDeep