I want to replace existing object with new updated fields using spread operator. But I am not getting the correct result.
Below are my two objects.
let obj1 = [
{
"id": 1,
"name": "Michel",
"age": 34,
"email": "michel#gmail.com"
},
{
"id": 2,
"name": "Abby",
"age": 40,
"email": "abby#gmail.com"
},
{
"id": 3,
"name": "Gary",
"age": 40,
"email": "abby#gmail.com"
}
]
let newObj = {
"id": 3,
"name": "Gary",
"age": 23,
"email": "gary#gmail.com"
}
I can do it with .map. Below is my code.
let result = obj1.map(item => {
if (item.id === newObj.id) {
return {...item, ...newObj};
}
return item;
});
But I do not want to run the loop and want to acheive by spread operator only.
Example for spread. Which is not working. It's not replacing the object. Instead creating one more.
[...obj1, newObj];
Can someone help me?
JSBIN CODE SNIPPET
Spread syntax doesn't replace the object within array like you used it. Using map is the simplest and understandable way. However if you want to use spread syntax you would first need to find the index to be replaced and then use slice on array
let obj1 = [
{
"id": 1,
"name": "Michel",
"age": 34,
"email": "michel#gmail.com"
},
{
"id": 2,
"name": "Abby",
"age": 40,
"email": "abby#gmail.com"
},
{
"id": 3,
"name": "Gary",
"age": 40,
"email": "abby#gmail.com"
}
]
let newObj = {
"id": 3,
"name": "Gary",
"age": 23,
"email": "gary#gmail.com"
}
const idx = obj1.findIndex(item => item.id === newObj.id);
obj1 = [...obj1.slice(0, idx), newObj, ...obj1.slice(idx + 1)];
console.log(obj1);
Use Object.assign
The Object.assign() method is used to copy the values of all enumerable own properties from one or more source objects to a target object. It will return the target object.
let obj1 = [
{
"id": 1,
"name": "Michel",
"age": 34,
"email": "michel#gmail.com"
},
{
"id": 2,
"name": "Abby",
"age": 40,
"email": "abby#gmail.com"
},
{
"id": 3,
"name": "Gary",
"age": 40,
"email": "abby#gmail.com"
}
]
let newObj = {
"id": 3,
"name": "Gary",
"age": 23,
"email": "gary#gmail.com"
}
Object.assign(obj1[2], newObj);
console.log(obj1)
Using .find() to get the target obj
let obj1 = [
{
"id": 1,
"name": "Michel",
"age": 34,
"email": "michel#gmail.com"
},
{
"id": 2,
"name": "Abby",
"age": 40,
"email": "abby#gmail.com"
},
{
"id": 3,
"name": "Gary",
"age": 40,
"email": "abby#gmail.com"
}
]
let newObj = {
"id": 3,
"name": "Gary",
"age": 23,
"email": "gary#gmail.com"
}
const targetObj = obj1.find(obj => obj.id === newObj.id)
Object.assign(targetObj, newObj);
console.log(obj1)
you should normalize your data by id this way:
obj1 = {
1: {
"id": 1,
"name": "Michel",
"age": 34,
"email": "michel#gmail.com"
},
2: {
"id": 2,
"name": "Abby",
"age": 40,
"email": "abby#gmail.com"
},
3: {
"id": 3,
"name": "Gary",
"age": 40,
"email": "abby#gmail.com"
}
}
newObj = {
3: {
"id": 3,
"name": "Gary",
"age": 23,
"email": "gary#gmail.com"
}
}
this way you can use spread operator:
{ ...obj1, ...newObj }
in order to normalize you can use the reduce func this way:
const normalized = obj1.reduce((result, obj) => ({ ...result, [obj.id]: obj }), {})
Spread operator is magic but it won't do whatever you want, you will have to loop over and replace the object. Instead of doing a map(), I would prefer find(). The use Object.assign() to achieve what you want.
let obj1 = [
{
"id": 1,
"name": "Michel",
"age": 34,
"email": "michel#gmail.com"
},
{
"id": 2,
"name": "Abby",
"age": 40,
"email": "abby#gmail.com"
},
{
"id": 3,
"name": "Gary",
"age": 40,
"email": "abby#gmail.com"
}
]
let newObj = {
"id": 3,
"name": "Gary",
"age": 23,
"email": "gary#gmail.com"
}
let foundOb = obj1.find(e => e.id === newObj.id);
Object.assign(foundOb, newObj)
console.log(obj1)
You cannot use spread syntax in that way. One solution would be to find index of the object you want to replace by id property and then you could use spread syntax with slice method to create new array with replaced object.
let obj1 = [{"id":1,"name":"Michel","age":34,"email":"michel#gmail.com"},{"id":2,"name":"Abby","age":40,"email":"abby#gmail.com"},{"id":3,"name":"Gary","age":40,"email":"abby#gmail.com"}]
let newObj = {"id":3,"name":"Gary","age":23,"email":"gary#gmail.com"}
const index = obj1.findIndex(({id}) => id == newObj.id)
const result = [...obj1.slice(0, index), newObj, ...obj1.slice(index + 1)]
console.log(result)
I would do something like:
updatedObj = [obj1.map((entry) => entry.id !== newObj.id), newObj]
This would give me the updated object with minimal syntax
Related
I'm attempting to remove an object out of an array nested within my movie object and then copy it to a new variable. So my original object looks like this:
{
"id": 1,
"title": "Avatar",
"movieLength": 162,
"releaseDate": "2009-12-18",
"trailerUrl": "https://www.youtube.com/watch?v=5PSNL1qE6VY",
"genre": {
"id": 1,
"genre": "Action"
},
"rating": {
"id": 3,
"rating": "PG-13"
},
"director": {
"id": 1,
"lastName": "Cameron",
"firstName": "James"
},
"actors": [
{
"id": 2,
"lastName": "Worthington",
"firstName": "Sam"
},
{
"id": 3,
"lastName": "Weaver",
"firstName": "Sigourney"
},
{
"id": 4,
"lastName": "Saldana",
"firstName": "Zoe"
}
],
"comments": []
}
and what I'm doing right now is
const updatedMovie = const updatedMovie = movie.actors.filter((actor) => actor.id !== id);
but as you know that only returns the array of actors I filtered. I want to copy the entire object with the newly filtered actors so the object will come out like this (removing actor id 3):
{
"id": 1,
"title": "Avatar",
"movieLength": 162,
"releaseDate": "2009-12-18",
"trailerUrl": "https://www.youtube.com/watch?v=5PSNL1qE6VY",
"genre": {
"id": 1,
"genre": "Action"
},
"rating": {
"id": 3,
"rating": "PG-13"
},
"director": {
"id": 1,
"lastName": "Cameron",
"firstName": "James"
},
"actors": [
{
"id": 2,
"lastName": "Worthington",
"firstName": "Sam"
},
{
"id": 4,
"lastName": "Saldana",
"firstName": "Zoe"
}
],
"comments": []
}
I've tried reading around but I'm not having any luck getting any solutions to work with me, so if anyone can help or point me in the right direction that would be great!
If you want to mutate the existing object, just assign the result of the .filter to the .actors property.
movie.actors = movie.actors.filter((actor) => actor.id !== id);
console.log(movie);
If you want to keep the existing object unmutated, spread the rest of the properties into a new object while filtering.
const updatedMovie = {
...movie,
actors: movie.actors.filter((actor) => actor.id !== id)
};
console.log(updatedMovie);
const movies = {
"id": 1,
"title": "Avatar",
"movieLength": 162,
"releaseDate": "2009-12-18",
"trailerUrl": "https://www.youtube.com/watch?v=5PSNL1qE6VY",
"genre": {
"id": 1,
"genre": "Action"
},
"rating": {
"id": 3,
"rating": "PG-13"
},
"director": {
"id": 1,
"lastName": "Cameron",
"firstName": "James"
},
"actors": [
{
"id": 2,
"lastName": "Worthington",
"firstName": "Sam"
},
{
"id": 3,
"lastName": "Weaver",
"firstName": "Sigourney"
},
{
"id": 4,
"lastName": "Saldana",
"firstName": "Zoe"
}
],
"comments": []
}
const id = 3; // or any other id you want
const actors = movies.actors.filter(actor => actor.id != id)
const newMovies = Object.assign({}, movies , { actors })
console.log(newMovies)
My data:
{
"rows": [
{
"id": 3,
"code": "airtel121",
"position": "manager",
"salary": "25000",
"login": {
"id": 4,
"username": "sameer",
"firstName": "Mohamed",
"lastName": "Sameer",
"code": "airtel121",
}
},
{
"id": 7,
"code": "airtel121",
"position": null,
"salary": null,
"login": {
"id": 8,
"username": "annamalai",
"firstName": "Anna",
"lastName": "malai",
"code": "airtel121",
}
}
]
}
My expected outcome:
{
"rows": [
{
"id": 4,
"username": "sameer",
"firstName": "Mohamed",
"lastName": "Sameer",
"code": "airtel121",
"staffs": [
{
"id": 3,
"code": "airtel121",
"position": "manager",
"salary": "25000",
}
]
},
{
"id": 8,
"username": "annamalai",
"firstName": "Anna",
"lastName": "malai",
"code": "airtel121",
"staffs": [
{
"id": 7,
"code": "airtel121",
"position": null",
"salary": null",
}
]
}
]
}
I tried, but only i am getting first object, check my fiddle:
http://jsbin.com/qaqehakuwi/edit?js,output
Is this possible to loop using for loop or it can be done by lodash?
Check my above jsbin link for code.
I am using ES6 way of code in my project, so i used spread operator.
You can use map to create the rows array of the new object from the rows array of the old one:
let newObj = {
rows: oldObj.rows.map(row => { // map the rows of the old object into the rows of the new object
let { login, ...rest } = row; // for each object/row get the login object as 'login' and the rest of the props as 'rest'
return { ...login, staffs: [rest] }; // return a new object that has the props of 'login' and an additional prop 'staffs' which is an array containing 'rest'
})
};
Example:
let oldObj = {"rows":[{"id":3,"code":"airtel121","position":"manager","salary":"25000","login":{"id":4,"username":"sameer","firstName":"Mohamed","lastName":"Sameer","code":"airtel121"}},{"id":7,"code":"airtel121","position":null,"salary":null,"login":{"id":8,"username":"annamalai","firstName":"Anna","lastName":"malai","code":"airtel121"}}]};
let newObj = {
rows: oldObj.rows.map(row => {
let { login, ...rest } = row;
return { ...login, staffs: [rest] };
})
};
console.log(newObj);
I have and object db_parsed
when I run console.log(JSON.stringify(db_parsed, null, 4))
the result is:
{
"data": [
[
{
"name": "Me",
"age": 23,
"sex": "M"
},
{
"name": "Wonderwoman",
"age": 22,
"sex": "F"
}
],
[
{
"name": "ALbert The Man",
"age": 22,
"sex": "M"
}
],
[
{
"name": "Leonard Johnson",
"age": 23,
"sex": "M"
}
]
]
}
but when I run console.log(db_parsed.data.filter(obj => obj.age === 22))
the result is []
Why? What am i missing? How do I fix this?
db_parsed.data is an array containing arrays.
That second level of arrays contains objects.
Your filter code is trying to treat those objects and being directly inside db_parsed.data instead of inside db_parsed.data[0], db_parsed.data[1] and db_parsed.data[2].
You could use reduce to concatenate all the second level of arrays into one, and then filter on that.
var db_parsed = {
"data": [
[{
"name": "Me",
"age": 23,
"sex": "M"
},
{
"name": "Wonderwoman",
"age": 22,
"sex": "F"
}
],
[{
"name": "ALbert The Man",
"age": 22,
"sex": "M"
}],
[{
"name": "Leonard Johnson",
"age": 23,
"sex": "M"
}]
]
};
console.log(db_parsed.data.reduce((a,b) => a.concat(b), []).filter(obj => obj.age === 22))
You can do [].concat.apply([], db_parsed.data) and than filter the array of objects:
const db_parsed = {"data": [[{"name": "Me","age": 23,"sex": "M"},{"name": "Wonderwoman","age": 22,"sex": "F"}],[{"name": "ALbert The Man","age": 22,"sex": "M"}],[{"name": "Leonard Johnson","age": 23,"sex": "M"}]]};
const result = [].concat.apply([], db_parsed.data).filter(obj => obj.age === 22);
console.log(result);
I'm trying to find out selected object index from array
But it always return -1 don't know why?
Here is I'm trying to do
I have following array in which their are multiple objects
var data = [{
"name": "abc",
"age": 25,
"school": "xyz pqr"
},
{
"name": "abc1",
"age": 26,
"school": "xyz pqr"
},
{
"name": "abc2",
"age": 27,
"school": "xyz pqr"
}]
And here is my another array that are selected by user
var dList = [{
"name": "abc",
"age": 25,
"school": "xyz pqr",
"isChecked": true
}]
Now I want to find out selected object index from data array and remove this object from that array
if (dList.length > 0) {
for (let i=0; i<dList.length; i++){
delete dList[i]['isChecked']
console.log(dList[i])
console.log(data[0])
console.log(dList[i] == data[0])
let index = data.indexOf(dList[i]);
console.log(index)
data.splice(index, 1);
}
}
Here is just a simple implementation:
if (dList.length > 0) {
for (let i=0; i<dList.length; i++) {
delete dList[i]['isChecked']
console.log(dList[i])
console.log(data[0])
console.log(JSON.stringify(dList[i]) === JSON.stringify(data[0]))
let index = data.findIndex(()=>dList[i]);
console.log(index)
data.splice(index, 1);
}
}
Comparing the objects can be done by just converting it into string using JSON.stringify(ObjectName).
Second instead of using indexOf use findIndex.
Here is the main difference between indexOf and findIndex.
You can only compare two primitive types only so you will not be able to get the index of the object by comparing it.
You should instead compare some primary key which will be unique for each object inside the array.
var data = [{
"name": "abc",
"age": 25,
"school": "xyz pqr"
},
{
"name": "abc1",
"age": 26,
"school": "xyz pqr"
},
{
"name": "abc2",
"age": 27,
"school": "xyz pqr"
}];
var index = data.findIndex(x => x.name=="abc2");
console.log(index);
this is going to meet your demand, a more universal version,if you got unique id,that is going to be the best choice:
var data = [{
"name": "abc",
"age": 25,
"school": "xyz pqr"
},
{
"name": "abc1",
"age": 26,
"school": "xyz pqr"
},
{
"name": "abc2",
"age": 27,
"school": "xyz pqr"
}
];
var dList = [{
"name": "abc",
"age": 25,
"school": "xyz pqr",
"isChecked": true
}];
dList.forEach(function(obj) {
delete obj.isChecked;
data.splice(data.findIndex((o) => {
return Object.getOwnPropertyNames(obj).every(p => obj[p] === o[p]);
}), 1);
});
console.log(data);
another way:
var data = [{
"name": "abc",
"age": 25,
"school": "xyz pqr"
},
{
"name": "abc1",
"age": 26,
"school": "xyz pqr"
},
{
"name": "abc2",
"age": 27,
"school": "xyz pqr"
}
];
var dList = [{
"name": "abc",
"age": 25,
"school": "xyz pqr",
"isChecked": true
}];
dList.forEach(function(obj) {
delete obj.isChecked;
data.splice(data.findIndex((o) => o.name === obj.name && o.age === obj.age && o.school === obj.school && o.school === obj.school), 1);
});
console.log(data);
unrecommended way:
var data = [{
"name": "abc",
"age": 25,
"school": "xyz pqr"
},
{
"name": "abc1",
"age": 26,
"school": "xyz pqr"
},
{
"name": "abc2",
"age": 27,
"school": "xyz pqr"
}
];
var dList = [{
"name": "abc",
"age": 25,
"school": "xyz pqr",
"isChecked": true
}];
dList.forEach(function(obj) {
delete obj.isChecked;
data.splice(data.findIndex((o) => JSON.stringify(o) === JSON.stringify(obj)), 1);
});
console.log(data);
You can use this also
var data = [{
"name": "abc",
"age": 25,
"school": "xyz pqr"
},
{
"name": "abc1",
"age": 26,
"school": "xyz pqr"
},
{
"name": "abc2",
"age": 27,
"school": "xyz pqr"
}];
var dList = [{
"name": "abc",
"age": 25,
"school": "xyz pqr",
"isChecked": true
}]
console.log(data.map(function(d){
return d.name;
}).indexOf(dList[0].name));
You cannot compare two Object Notations(JSON). To compare two JSONs you need to first stringify the object, then JavaScript can compare the two objects for you.
Here is a simple code for you to get what you desire.
if (dList.length > 0) {
for(var i=0; i<data.length; i++){
for(var j=0; j<dList.length; j++){
delete dList[j]['isChecked'];
if(JSON.stringify(data[i]) === JSON.stringify(dList[j])){
let index = data.indexOf(data[i]);//Gets the index of the array
data.splice(index, 1);
console.log(data);
}else{
console.log('Data Not Matched in Array');
}
}
}
}
There is no generic means to determine that an object is equal to another in the sense. Please see Equality comparisons for more information.
You can find and remove objects like below:
Array.prototype.remove = function(elem) {
var indexElement = this.findIndex(el => el.name === elem.name);
console.log(indexElement);
if (indexElement != -1)
this.splice(indexElement, 1);
return this;
};
data.remove(dList[0]);
console.log(data);
Online demo (jsFiddle)
var result= data.filter((item, i, self) => {
if (item.name === 'abc2') {
return { itemIndex: i, obj: item }
}
});
var output = result.map(r => { console.log(r.itemIndex) })
console.log(output);
This will return all objects in which name is abc2. findIndex array method will always return 1 index that might not be the case as people can have the same name.
Let's say I have two deep objects:
var oldData = {
"id": 1,
"first_name": "Eric",
"last_name": "Henry",
"info": {
"email": "ehenry0#smh.com.au",
"gender": "Male",
"ip_address": "7.11.169.150",
"age": 11
}
};
var newData = {
"id": 2,
"first_name": "Tommy",
"last_name": "Henry",
"info": {
"email": "tommy#ghenrry.com",
"gender": "Male",
"ip_address": "7.11.169.150",
"age": 15
}
};
How would I use lodash (or JavaScript) to traverse through each object and get the value of each different value, so in the top case it would be
[
{old: 1, new: 2},
{old: 'Eric', new: 'Tommy'},
{old: 'ehenry0#smh.com.au', new: 'tommy#ghenrry.com'},
{old: 11, new: 15},
]
Here is what I have so far:
var oldData = {
"id": 1,
"first_name": "Eric",
"last_name": "Henry",
"info": {
"email": "ehenry0#smh.com.au",
"gender": "Male",
"ip_address": "7.11.169.150",
"age": 11
}
};
var newData = {
"id": 2,
"first_name": "Tommy",
"last_name": "Henry",
"info": {
"email": "tommy#ghenrry.com",
"gender": "Male",
"ip_address": "7.11.169.150",
"age": 15
}
};
var diffObj = _.difference(_.keys(oldData), _.keys(newData));
console.log(JSON.stringify(diffObj, null, 4));
<script src="https://cdn.jsdelivr.net/lodash/4.17.4/lodash.min.js"></script>
The solution using custom recursive function compareUserData and Object.keys() function:
var oldData = { "id": 1, "first_name": "Eric", "last_name": "Henry", "info": { "email": "ehenry0#smh.com.au", "gender": "Male", "ip_address": "7.11.169.150", "age": 11 }
};
var newData = { "id": 2, "first_name": "Tommy", "last_name": "Henry", "info": { "email": "tommy#ghenrry.com", "gender": "Male", "ip_address": "7.11.169.150", "age": 15 }
};
function compareUserData(oldData, newData, result) {
Object.keys(oldData).forEach(function (k) {
if (typeof oldData[k] !== 'object') {
if (oldData[k] != newData[k]) this.push({'old': oldData[k], 'new': newData[k]});
} else {
compareUserData(oldData[k], newData[k], this);
}
}, result);
return result;
}
var result = compareUserData(oldData, newData, []);
console.log(result);
You may want to iterate through your objects properties, and check manually if something changed.
To see how you can iterate on properties : Iterate through object properties
EDIT : Your object has nested properties, read this post to see how you can check that too : How do I check if an object has a property in JavaScript?