We Keep Coding

How to use the filter method to remove an object from an array

For example:
const array = [
{
name: JB,
age: 28,
dob: '12-17-1996'
}
{
name: Jamey,
age: 57
dob: '9-13-1965'
}
{
name: Jayla,
age:30,
dob: '11-18-1992'
}
]
How would I use the filter method (and without any arrow syntax involved) to remove one of these objects from the array and iterate the updated array in Javascript?
I tried it in a for loop but it just keeps giving me undefined.

You can use Array#filter to obtain all elements whose name do not match the name of the object you want removed.
const array=[{name:"JB",age:28,dob:"12-17-1996"},{name:"Jamey",age:57,dob:"9-13-1965"},{name:"Jayla",age:30,dob:"11-18-1992"}];
let remove = 'Jamey';
let filtered = array.filter(function(obj){
return obj.name !== remove;
});
for (const obj of filtered) console.log(obj);

Render nested string inside of object

I'm trying to render a dynamic list of fields from a JSON file.
Some fields have to go through this accountFieldMap object I created for key renaming purposes.
For example it finds the key userFirstName1 from the JSON and renders the value of it as firstName at the component.
const accountFieldMap = {
firstName: "userFirstName1",
lastName: "userLastName1",
ID: "userID",
location: `userLocation.city`,
};
The only issue is with the location field.
How can I let JavaScript know that it should render that city nested field and show it as location?

If I understand you correctly, location.city is a path to some value in object.
There are some libraries for this like lodash, which have inbuilt functions that can resolve that, but if you want to do it in vanilla js, you can do it by splitting this string by dot and going through that array to get a value.
const getByPath = (path, obj) => {
const splittedPath = path.split(".");
return splittedPath.reduce((acc, curr) => {
acc = obj[curr];
return acc;
}, obj)
}
So in this case if you have object like
const testObj = {
location: {city: "Kyiv"},
firstName: "Oleg"
}
It will return you "Kyiv" if you will pass into getByPath "location.city" as path. And it will also work in case if there is no nesting, so
getByPath("firstName", testObj)
will return you "Oleg"

you only have to map the array and create a new object;
import fileData from "../path/to/json";
const people = fileData.arrayName.map(person => ({
firstName: person.userFirstName1,
lastName: person.userLastName1,
ID: person.userID,
location: person.userLocation.city,
}));

Javascript Map() object has confusing behaviour [duplicate]

This question already has answers here:
Object copy using Spread operator actually shallow or deep?
(4 answers)
Closed 6 months ago.
I have a use case that I thought the Map object would be perfect for but there is confusing behaviour that appears to me as a bug, but Im after any information as to why this happens and possibly a solution to the behaviour.
For instance, say I have 2 objects:
const obj1 = { name: "John" };
const obj2 = { name: "Jane", age: 35 };
And I have defined and extra object for extra properties to add to both objects later:
const extProps = { gender: "unspecified", children: [] };
Create a new Map object and add the 2 objects:
const map = new Map();
map.set(obj1.name, obj1);
map.set(obj2.name, obj2);
Due to the objects being reference types I can assign the extra props like so:
Object.assign(obj1, { ...extProps });
Object.assign(obj2, { ...extProps });
Now I can get the values from the map using the keys like:
const johnObj = map.get("John");
const janeObj = map.get("Jane");
And the object have all the extra props like expected. The following statements update the individual objects in the map:
janeObj.gender = "female";
johnObj.age = 45;
Here is where the confusing behaviour I see is happening...
If I add an entry to the children array of either objects, it updates both
johnObj.children.push("jack");
obj2.children.push("jenny");
name: "John"
gender: "unspecified"
children: ["jack", "jenny"]
age: 45
name: "Jane"
age: 35
gender: "female"
children: ["jack", "jenny"]
What am I missing??

Like Konrad said in his comment, "arrays are also objects and are reference types".
The issue is that the spread operator (...) only goes on level deep, so for the array in extProps, is it not copied, it is the same one.
To solve this you can use a recursive function to "deep copy" an object.
Here is an example of a deep copy function:
const deepCopy = objIn => {
if (typeof objIn !== 'object' || objIn === null) return objIn;
let objOut = Array.isArray(objIn) ? [] : {};
for (const key in objIn) {
objOut[key] = deepCopy(objIn[key]);
}
return objOut;
}

Javascript Objects - Check for and loop through arrays in object [duplicate]

This question already has answers here:
Traverse all the Nodes of a JSON Object Tree with JavaScript
(17 answers)
Closed 1 year ago.
I am trying to loop through an object literal and if a property is an array, I want to loop through that as well. The friends property of this object is an array, how would I test to see if it's iterable, then loop through it?
Thanks in advance,
firstName: 'Jonas',
lastName: 'Schmedtmann',
age: 2037 - 1991,
job: 'teacher',
friends: ['Michael', 'Peter', 'Steven'],
};
const myObj = Object.entries(jonas);
for (const [key, val] of myObj) {
//Some conditional statement here testing for an interable
//Then loop through it to the console.
console.log(key, val);
}

All arrays are instance of the Array class in Javascript so you can use var instanceof Array which returns a boolean to check if an element is an array or not, then iterate through it as you wish
const obj = {
firstName: 'Jonas',
lastName: 'Schmedtmann',
age: 2037 - 1991,
job: 'teacher',
friends: ['Michael', 'Peter', 'Steven'],
};
const myObj = Object.entries(obj);
for (const [key, val] of myObj) {
//Some conditional statement here testing for an interable
//Then loop through it to the console.
if (val instanceof Array) {
console.log('element is an array, printing now')
print(val);
} else
console.log(key, val);
}
function print(ar) {
ar.forEach(x => console.log(x));
}

How to create object from another without undefined properties [duplicate]

This question already has answers here:
Remove blank attributes from an Object in Javascript
(53 answers)
Closed 2 years ago.
Is there a better way to accomplish this in Javascript?
const data: any = {};
if (values.email) data.email = values.email;
if (values.password) data.password = values.password;
if (values.username) data.username = values.username;
I don't want the data object to have the properties for the undefined or falsy values.

You could put the potential properties in an array and then .filter() out any which values[prop] has a fasly value for. Then you can .map() each key to an array of [key, value] pairs, and use Object.fromEntries() to build the data object for you:
const values = {
email: 'abc',
username: 'xyz'
};
const props = ['email', 'password', 'username'];
const data = Object.fromEntries(
props.filter(prop => values[prop]).map(prop => [prop, values[prop]])
);
console.log(data);
If you can't support Object.fromEntries(), you could consider using Object.assign(), and then mapping to an array of objects which you then spread into Object.assign():
const values = {
email: 'abc',
username: 'xyz'
};
const props = ['email', 'password', 'username'];
const data = Object.assign({},
...props.filter(prop => values[prop]).map(prop => ({[prop]: values[prop]}))
);
console.log(data);

You can do something along these lines:
const obj1 = {
prop1: true,
prop2: false,
prop3: 4,
}
const obj2 = Object.entries(obj1).reduce((result, [key, value]) => {
if (value) {
result[key] = value
}
return result
}, {})
console.log(obj2)

This simple function will do it, if you want to copy over all properties that don't have a false-y value. If you only want a fixed list, look at the answer from Nick Parsons.
const copyNonNil = (obj) =>
Object .fromEntries (Object .entries (obj) .filter(([k, v]) => v))
const values = {
email: 'foo#bar.baz',
username: 'foobar',
password: '',
another: false
}
console .log (copyNonNil (values))
It's easy to shim Object .fromEntries if you don't have it available. See the answer from theDude, which uses a reduce that serves in the same role.

You could use Object.entries to iterate over the properties of values and perform the true/false check in that to make this more flexible:
for(const [key, value] of Object.entries(values)){
if(values[key]) data[key] = value;
}
This would give you only the truthy values in data for a values object of any size.