Delete element with a specific value from an array - javascript

I use vue.js and I want to delete elements of an array that have specific id value.
For example :
I want to delete elements that have id of 0. I tried to use the findindex and then delete the element but I couldn't implement that, and to use the splice method you have to know the index before deleting.
"Options": [
{
"id": 0,
"option": "A",
"value": "2"
},
{
"id": 0,
"option": "B",
"value": "1"
},
{
"id": 0,
"option": "C",
"value": "3"
},
{
"id": 1,
"option": "A",
"value": "1"
}

One more (polyfill):
var array = [{id:1},{id:0},{id:0},{id:2}];
array = array.filter(x => x.id != 0);
console.log(array);
x => x.id != 0 is the same as function (x) { return x.id != 0; }.

Related

How to set object value as key to other value of object [duplicate]

This question already has answers here:
How to convert array of key–value objects to array of objects with a single property?
(5 answers)
How to Set a Javascript Object Key to Be Another Object's Value
(2 answers)
Closed 7 months ago.
current data
[
{
"id": 0,
"name": "Active",
"value": "Y",
z"
},
{
"id": 1,
"name": "controls",
"value": "N",
}
]
result data
{"Active":"Y",
"controls":"N"}
how to map value of one item in object as another item key ( as one object)
x = [{
"id": 0,
"name": "Active",
"value": "Y",
},
{
"id": 1,
"name": "controls",
"value": "N",
}
]
a = x.reduce((a, b) => ({...a, [b.name]: b.value }), {})
console.log(a)
s = x.map(item => ({ [item.name]: item.value }))
console.log(s)
const data = [
{ "id": 0, "name": "Active", "value": "Y" },
{ "id": 1, "name": "controls", "value": "N" },
]
const result = data.map(item => {
return {
[item.name]: item.value
}
})
console.log(result)
I think you want this:
let elements = [ { "id": 0, "name": "Active", "value": "Y"},
{ "id": 1, "name": "controls", "value": "N"},
]
let new_element = Object()
elements.forEach(element=>{
new_element[element.name] = element.value
})
console.log(new_element)

How can I filter the array of objects by: if object ids are consective

I have a JSON file with data inside.
I have to filter the data by : if user has more than two names, and if user ids are consecutive.
The JSON file :
[
{
"_id": "62bd5fba34a8f1c90303055c",
"index": 0,
"email": "mcdonaldholden#xerex.com",
"nameList": [
{
"id": 0,
"name": "Wendi Mooney"
},
{
"id": 2,
"name": "Holloway Whitehead"
}
]
},
{
"_id": "62bd5fbac3e5a4fca5e85e81",
"index": 1,
"nameList": [
{
"id": 0,
"name": "Janine Barrett"
},
{
"id": 1,
"name": "Odonnell Savage"
},
{
"id": 2,
"name": "Patty Owen"
}
]
}, ...
I have managed to find an a solution to filter if the users have more than two names : userData.filter((names,i) => { return names?.nameList?.filter(names => { return names.name;}).length > 2 ; })
But I cant seem to grasp myself around the concept of filtering the consecutive ids.
Also I was advised to not use any for loops at all. Only ES6 array loops like map, forEach and filter.
Here's a solution that uses every() to compare the ID of every element with the previous ID:
const result = data.filter(({nameList}) =>
nameList.length > 2 &&
nameList.every(({id}, i, a) => !i || id === a[i - 1].id + 1)
);
Complete snippet:
const data = [{
"_id": "62bd5fba34a8f1c90303055c",
"index": 0,
"email": "mcdonaldholden#xerex.com",
"nameList": [{
"id": 0,
"name": "Wendi Mooney"
}, {
"id": 2,
"name": "Holloway Whitehead"
}]
}, {
"_id": "62bd5fbac3e5a4fca5e85e81",
"index": 1,
"nameList": [{
"id": 0,
"name": "Janine Barrett"
}, {
"id": 1,
"name": "Odonnell Savage"
}, {
"id": 2,
"name": "Patty Owen"
}]
}];
const result = data.filter(({nameList}) =>
nameList.length > 2 &&
nameList.every(({id}, i, a) => !i || id === a[i - 1].id + 1)
);
console.log(result);

Copy second nested array of objects into first nested array of objects

How can I assign key value from array of object to another array object
I would like to assign the key:value pair to the existing array of object from the another array of objects.
I have check this thread but it is not working in my case.
I have tried something like this but that is not returning the desired output that I am looking for.
const DataA = {
"id": 57,
"status": true,
"options": [{ "id": 1, "name": "Type A" },
{ "id": 2, "name": "Type B" },
{ "id": 3, "name": "Type C" }]
}
const DataB = {
"id": 57,
"status": true,
"options": [{ "id": 1, "value": 10 },
{ "id": 2, "value": 20 },
{ "id": 3, "value": 30 }]
}
let result;
var A1 = DataA.options.map((v) => {
console.log(v);
result = v;
})
var A2 = DataB.options.map(v => {
result.options = v;
console.log("result",result);
})
let arr3 = DataA.options.map((item, i) => Object.assign({}, item, DataB[i]));
console.log(arr3);
Result will be I need as below:
const DataA = {
"id": 57,
"status": true,
"options": [{ "id": 1, "name": "Type A", "value": 10 },
{ "id": 2, "name": "Type B", "value": 20 },
{ "id": 3, "name": "Type C", "value": 30 }]
}
I need to merge the deep clone of the array that is slightly different from this thread.
The linked duplicate does actually address your question, but you need to adjust it to your situation and not just copy paste.
DataA.options = DataA.options.map((item, i) => Object.assign({}, item, DataB.options[i]));
but since this mutates the original DataA object anyway, you may as well just use forEach() and avoid creating the intermediate array from .map().
DataA.options.forEach((item, i) => Object.assign(item, DataB.options[i]));
Both of the above assume that the options arrays of both objects are a. of the same length, and b. sorted by id. To avoid these assumptions you can use .find() to look for matching elements instead of relying on index.
DataA.options.forEach(item =>
Object.assign(item, DataB.options.find(({ id }) => id === item.id)));
const DataA = {
"id": 57,
"status": true,
"options": [
{ "id": 1, "name": "Type A" },
{ "id": 2, "name": "Type B" },
{ "id": 3, "name": "Type C" }]
}
const DataB = {
"id": 57,
"status": true,
"options": [
{ "id": 1, "value": 10 },
{ "id": 2, "value": 20 },
{ "id": 3, "value": 30 }]
}
DataA.options.forEach(item =>
Object.assign(item, DataB.options.find(({ id }) => id === item.id)));
console.log(DataA)
.as-console-wrapper { max-height: 100% !important; top: 0; }

Make v-card selectable/toggle-able and pass an object to an array in Vue

I currently have some cards that each hold a value. I want to basically make each card act like a toggle button and when the card is toggled on I want that cards value to be added to the array.
I currently use:
#click="selectableCards( {Group: `${user.GroupHex}`, UserID: user.UserIDInt, SuperID: `${user.SuperID}`} )"
to pass the data to my function:
selectableCards(x) {
if(this.array.includes(x)) {
console.log('prop already exists inside array')
} else {
this.array.push(x)
}
console.log(this.array)
}
Whenever I use this the object is added to the array but it will allow me to add the same object over and over again. It doesn't detect that the object is already in the array.
So again basically I want the #click on the card to act like a toggle button to add or remove the data inside the card.
An example of 3 cards values into an array:
[ { "Group": "10", "UserID": 6, "SuperID": "2566" }, { "Group": "10", "UserID": 5, "SuperID": "2565" }, { "Group": "20", "UserID": 9, "SuperID": "5129" } ]```
You cannot cannot compare objects same way as primitives in javascript:
const objects = [ { "Group": "10", "UserID": 6, "SuperID": "2566" }, { "Group": "10", "UserID": 5, "SuperID": "2565" }, { "Group": "20", "UserID": 9, "SuperID": "5129" } ]
console.log(objects.includes({ "Group": "10", "UserID": 6, "SuperID": "2566" }))
For more information about that take a look here: Object comparison in JavaScript
However what you can do is to search for an element in an array based on some conditions for example with array.find() -method like so:
const objects = [ { "Group": "10", "UserID": 6, "SuperID": "2566" }, { "Group": "10", "UserID": 5, "SuperID": "2565" }, { "Group": "20", "UserID": 9, "SuperID": "5129" } ];
const matchedObject = objects.find((object) => {
return object.Group === "10" &&
object.UserID === 6 &&
object.SuperID === "2566"
});
console.log(matchedObject);
If you just need to know if a card is selected send a string/number to selectableCards instead of an object and your function doesn't have to change.
#click="selectableCards(user.UserID)"
OR
#click="selectableCards(user.SuperID)"
If however you need to store the object I would recommend using findIndex instead of includes
if(this.array.findIndex(temp => {
return temp.Group == x.Group && temp.UserID == x.UserID && temp.SuperID == x.SuperID
})>-1)
...the rest of the code is unchanged

Getting the key in every JSON object

I am fairly new to Vue and JS but I am making API calls and getting a JSON response then sending the response to an empty array. How do I get the ID of each object in the array?
The array that the response is being pushed to is structured like this
groups: [
{
"id": "0",
"name": "a",
"price": 5
},
{
"id": "1",
"name": "b",
"price": 5
},
{
"id": "2",
"name": "c",
"price": 5
}
]
I'd like to pull the Id of each object and push the values to an empty array
for(var group in this.groups) {
if (this.groups.hasOwnProperty(0)) {
this.group = this.groups[0];
this.groupsId.push(this.innerObj);
}
}
The error I'm getting is saying Cannot read property '0' of undefined at eval
Ideally I'd like an array that has all the Ids of each object.
this.groups.hasOwnProperty(0) should be group.hasOwnProperty('id')
Use Array.prototype.map() to iterate over an array of objects and collect every ID into a new array:
const res = {
groups: [{
"id": "0",
"name": "a",
"price": 5
},
{
"id": "1",
"name": "b",
"price": 5
},
{
"id": "2",
"name": "c",
"price": 5
}
]
};
const ids = res.groups.map(obj => { // you use this.groups
if(obj.hasOwnProperty('id')) return obj.id;
});
console.log(ids)
There is the Array.map() method:
this.groupsId = this.groups.map(i => i.id);
If you already have elements in this.groupsId you can append the ids using Array.concat():
this.groupsId = this.groupsId.concat(this.groups.map(i => i.id));
You can use Array.prototype.reduce to loop and check if there's id.
const groups = [
{"name": "a","price": 5},
{"id": "1","name": "b","price": 5},
{ "id": "2","name": "c","price": 5}
];
const list = groups.reduce((groupIds, group) => group.id ? [...groupIds, group.id] : groupIds, []);
console.log(list);

Categories