This question already has answers here:
How do I remove a property from a JavaScript object?
(37 answers)
Loop through an array in JavaScript
(46 answers)
Closed 4 years ago.
I have an array of json objects.
var user =[ { id: 1, name: 'linto', img: 'car' },
{ id: 2, name: 'shinto', img: 'ball' },
{ id: 3, name: 'hany', img: 'kite' } ]
From this is want to remove attribute img from all the elements of the array, so the output looks like this.
var user =[ { id: 1, name: 'linto' },
{ id: 2, name: 'shinto' },
{ id: 3, name: 'hany' } ]
Is there a way to do this in java script.
You can use .map() with Object Destructuring:
let data =[
{ id: 1, name: 'linto', img: 'car' },
{ id: 2, name: 'shinto', img: 'ball' },
{ id: 3, name: 'hany', img: 'kite' }
];
let result = data.map(({img, ...rest}) => rest);
console.log(result);
Array.prototype.map()
The map() method creates a new array with the results of calling a provided function on every element in the calling array.
You can use map() in the following way:
var user =[ { id: 1, name: 'linto', img: 'car' },
{ id: 2, name: 'shinto', img: 'ball' },
{ id: 3, name: 'hany', img: 'kite' } ]
user = user.map(u => ({id: u.id, name: u.name}));
console.log(user);
Related
This question already has an answer here:
To access property of object nested in array using destructuring
(1 answer)
Closed 12 months ago.
Let's say we have the object below:
const page = {
name: 'Page 1',
page_category: [
{
postId: 1,
catId: 1,
category: {
id: 1,
name: 'category 1'
}
},
{
postId: 3,
catId: 2,
category: {
id: 2,
name: 'category 2'
}
},
]
}
To get the first object in the page_category array, in a destructuring manner, We would do this:
const { page_category: [first] } = page
But what would it be if we wanted to get the first object's category field?
You can destructure the object within the array destructuring:
const { page_category: [{category}] } = page;
const page = {
name: 'Page 1',
page_category: [{
postId: 1,
catId: 1,
category: {
id: 1,
name: 'category 1'
}
},
{
postId: 3,
catId: 2,
category: {
id: 2,
name: 'category 2'
}
},
]
};
const { page_category: [{category}] } = page;
console.log(category);
The destructuring assignment syntax is analogous to the syntax of creating the object literal, the below formatting shows how they have the same shape. You can use this idea to assist with your destructuring patterns:
const {
page_category: [
{
category
}
]
} = page;
To destructure the first object's category field.
const {page_category: [ {category} ]} = page;
console.log("category ==>", category);
This way you will find the first category object.
This question already has answers here:
Merge two array of objects based on a key
(23 answers)
Closed last year.
I have two Objects one of them has the Store Name and the other object has the Price for an item along with the Store ID on both objects. Such as;
obj1 = [
{id: 1,name: "Store1"},
{id: 2,name: "Store2"},
{id: 3,name: "Store3"}
];
obj2= [
{ id: 1, price: 100 },
{ id: 2, price: 200 },
{ id: 3, price: 300 }
];
What I want to achieve is that compare obj1 id with obj2 id if they are the same get the price and the store name from the same id. What is the best way to achieve this? I have been trying to use Array.map or filter but can't really make it work. Thank you!
You can use map & find
const obj1 = [{
id: 1,
name: "Store1"
},
{
id: 2,
name: "Store2"
},
{
id: 3,
name: "Store3"
},
{
id: 4,
name: "Store3"
}
];
const obj2 = [{
id: 1,
price: 100
},
{
id: 2,
price: 200
},
{
id: 3,
price: 300
}
];
const newData = obj1.map((item, index) => {
return {
...item,
// if the item exist in obj2 then get the price else assign empty string
price: obj2.find(elem => elem.id === item.id) ? .price || ''
}
});
console.log(newData)
I am trying to find duplicate objects in a list of objects and add new parameters to the duplicate one.
Below snipped code is what I implemented so far. The problem is that it adds desired parameters to every object in the list.
const list = [{
id: 1,
name: 'test1'
},
{
id: 2,
name: 'test2'
},
{
id: 3,
name: 'test3'
},
{
id: 2,
name: 'test2'
}
];
const newList = list.reduce(
(unique, item) => (unique.includes(item) ? unique : [...unique, {
...item,
duplicated: true,
name: `${item.name}_${item.id}`
}]), []
);
console.log(newList);
Since there are two duplicate objects by id, the duplicated one should have duplicated and new name parameters. What part is wrong in my implementation?
By using findIndex method:
const list = [{
id: 1,
name: 'test1'
},
{
id: 2,
name: 'test2'
},
{
id: 3,
name: 'test3'
},
{
id: 2,
name: 'test2'
}
];
const newList = list.reduce(
(unique, item) => (unique.findIndex(x => x.id === item.id) > -1 ? [...unique, {
...item,
duplicated: true,
name: `${item.name}_${item.id}`
}] : [...unique, item]), []);
console.log(newList);
It can be written simply:
const
list = [
{ id: 1, name: 'test1' },
{ id: 2, name: 'test2' },
{ id: 3, name: 'test3' },
{ id: 2, name: 'test2' }
],
uniqueList = list.reduce((arr, { id, name }) =>
arr.concat({
id,
name,
...arr.some(item => id === item.id) && { duplicate: true, name: `${name}_${id}` }
}), []);
console.log(uniqueList);
The problem was that when you called includes you were actually looking for an object whose pointer exists in the array.
In order to find an object which has property are the same as a requested property, you have no choice but to use functions such as some or every that is different from includes - you can send them a callback and not just an object.
I am trying to swap out all the values of an array of objects in state with a whole new array of objects. However, nothing seems to be working. I've tried the following:
const list1 = [
{ id: 1, name: 'item1' },
{ id: 2, name: 'item1' },
{ id: 3, name: 'item1' },
{ id: 4, name: 'item1' },
]
const list2 = [
{ id: 1, name: 'newItem1' },
{ id: 2, name: 'newItem2' },
{ id: 3, name: 'newItem3' },
{ id: 4, name: 'newItem4' },
]
class FindTab extends Component {
state = {
status: 'loading',
location: null,
view: this.props.view,
map: this.props.map,
locationValues: list1,
}
}
this.setState(prevState => ({
locationValues: [ ...prevState.locationValues, list2 ],
}))
or just simpler:
this.setState(locationValues: list2)
Neither seem to work. Is there any guidance as to how one should replace an array of objects with another array for a state property?
You could spread the array in a new one like:
const locationValues = [ ...state.locationValues, ...list2 ]
this.setState({ locationValues })
This question already has answers here:
ECMAScript 6 arrow function that returns an object
(6 answers)
Closed 6 years ago.
I have an array of objects:
[
{
id: 1,
name: 'bill'
},
{
id: 2,
name: 'ted'
}
]
Looking for a simple one-liner to return:
[
{
value: 1,
text: 'bill'
},
{
value: 2,
text: 'ted'
}
]
So I can easily pump them into a react dropdown with the proper keys.
I feel like this simple solution should work, but I'm getting invalid syntax errors:
this.props.people.map(person => { value: person.id, text: person.name })
You just need to wrap object in ()
var arr = [{
id: 1,
name: 'bill'
}, {
id: 2,
name: 'ted'
}]
var result = arr.map(person => ({ value: person.id, text: person.name }));
console.log(result)