Remove each element of array from subarrays of objects?
up vote
3
down vote
favorite
I have an array of objects with this structure
const arr = [{
id: 0,
name: 'string'
}, {
id: 1,
name: 'string'
}]
I also have main array
const mainArray = [{
items: [{
id: 0,
name: 'string'
}]
},
{
items: [{
id: 5,
name: 'string'
},
{
id: 3,
name: 'string'
}
]
}
];
I'm displaying every item in items arrays from mainArray
on the screen.
What I want to do is remove every item of arr
from every items
array of mainArray
and show updated mainArray
on the screen.
I was thinking doing something like this
mainArray = mainArray.map((e) => {
e.items = e.items.filter((el) => {
return !arr.includes( el );
});
});
This returns an error Cannot read property 'items' of undefined
Or something like this
mainArray = mainArray.filter((e) => {
return !arr.includes( e.items );
});
But this also doesn't work.
All the help will be appreciated.
javascript
add a comment |
up vote
3
down vote
favorite
I have an array of objects with this structure
const arr = [{
id: 0,
name: 'string'
}, {
id: 1,
name: 'string'
}]
I also have main array
const mainArray = [{
items: [{
id: 0,
name: 'string'
}]
},
{
items: [{
id: 5,
name: 'string'
},
{
id: 3,
name: 'string'
}
]
}
];
I'm displaying every item in items arrays from mainArray
on the screen.
What I want to do is remove every item of arr
from every items
array of mainArray
and show updated mainArray
on the screen.
I was thinking doing something like this
mainArray = mainArray.map((e) => {
e.items = e.items.filter((el) => {
return !arr.includes( el );
});
});
This returns an error Cannot read property 'items' of undefined
Or something like this
mainArray = mainArray.filter((e) => {
return !arr.includes( e.items );
});
But this also doesn't work.
All the help will be appreciated.
javascript
1
can you add an example of your desired output? Also side node: Your map function doesn't return anything so you would end up with an empty mainArray
– noa-dev
Nov 20 at 13:50
1
You cannot domainArray = ...
since you used theconst
keyword to define that variable. it is a constant and cannot be overridden.
– vsync
Nov 20 at 13:51
example output?
– Oscar Zarrus
Nov 20 at 13:52
add a comment |
up vote
3
down vote
favorite
up vote
3
down vote
favorite
I have an array of objects with this structure
const arr = [{
id: 0,
name: 'string'
}, {
id: 1,
name: 'string'
}]
I also have main array
const mainArray = [{
items: [{
id: 0,
name: 'string'
}]
},
{
items: [{
id: 5,
name: 'string'
},
{
id: 3,
name: 'string'
}
]
}
];
I'm displaying every item in items arrays from mainArray
on the screen.
What I want to do is remove every item of arr
from every items
array of mainArray
and show updated mainArray
on the screen.
I was thinking doing something like this
mainArray = mainArray.map((e) => {
e.items = e.items.filter((el) => {
return !arr.includes( el );
});
});
This returns an error Cannot read property 'items' of undefined
Or something like this
mainArray = mainArray.filter((e) => {
return !arr.includes( e.items );
});
But this also doesn't work.
All the help will be appreciated.
javascript
I have an array of objects with this structure
const arr = [{
id: 0,
name: 'string'
}, {
id: 1,
name: 'string'
}]
I also have main array
const mainArray = [{
items: [{
id: 0,
name: 'string'
}]
},
{
items: [{
id: 5,
name: 'string'
},
{
id: 3,
name: 'string'
}
]
}
];
I'm displaying every item in items arrays from mainArray
on the screen.
What I want to do is remove every item of arr
from every items
array of mainArray
and show updated mainArray
on the screen.
I was thinking doing something like this
mainArray = mainArray.map((e) => {
e.items = e.items.filter((el) => {
return !arr.includes( el );
});
});
This returns an error Cannot read property 'items' of undefined
Or something like this
mainArray = mainArray.filter((e) => {
return !arr.includes( e.items );
});
But this also doesn't work.
All the help will be appreciated.
javascript
javascript
asked Nov 20 at 13:43
Allan
376213
376213
1
can you add an example of your desired output? Also side node: Your map function doesn't return anything so you would end up with an empty mainArray
– noa-dev
Nov 20 at 13:50
1
You cannot domainArray = ...
since you used theconst
keyword to define that variable. it is a constant and cannot be overridden.
– vsync
Nov 20 at 13:51
example output?
– Oscar Zarrus
Nov 20 at 13:52
add a comment |
1
can you add an example of your desired output? Also side node: Your map function doesn't return anything so you would end up with an empty mainArray
– noa-dev
Nov 20 at 13:50
1
You cannot domainArray = ...
since you used theconst
keyword to define that variable. it is a constant and cannot be overridden.
– vsync
Nov 20 at 13:51
example output?
– Oscar Zarrus
Nov 20 at 13:52
1
1
can you add an example of your desired output? Also side node: Your map function doesn't return anything so you would end up with an empty mainArray
– noa-dev
Nov 20 at 13:50
can you add an example of your desired output? Also side node: Your map function doesn't return anything so you would end up with an empty mainArray
– noa-dev
Nov 20 at 13:50
1
1
You cannot do
mainArray = ...
since you used the const
keyword to define that variable. it is a constant and cannot be overridden.– vsync
Nov 20 at 13:51
You cannot do
mainArray = ...
since you used the const
keyword to define that variable. it is a constant and cannot be overridden.– vsync
Nov 20 at 13:51
example output?
– Oscar Zarrus
Nov 20 at 13:52
example output?
– Oscar Zarrus
Nov 20 at 13:52
add a comment |
2 Answers
2
active
oldest
votes
up vote
1
down vote
As I've said in the comments, you cannot use const
keyword and override the variable later. but, you don't event need to, since you can modify the inner properties without a problem:
const arr = [
{ id:0, name:'string' },
{ id:1, name:'string' }
]
const mainArray = [{
items: [{ id:0, name:'string' },]
},
{
items: [
{ id:5, name:'string' },
{ id:3, name:'string' },
{ id:1, name:'string' },
]
}
];
// for each "items" item, check if its "id" exists in the "arr" Array, so
// I like to use "some" Array method for that:
mainArray.map((e) => {
e.items = e.items.filter(el => !arr.some(needle => needle.id == el.id))
});
console.log( mainArray )
add a comment |
up vote
0
down vote
I would map the used ids into an array for easier look up. That it is a foreach loop over the main array items, and than filter using includes to see if the item is in the array.
const arr = [{
id: 0,
name: 'string'
}, {
id: 1,
name: 'string'
}]
const mainArray = [{
items: [{
id: 0,
name: 'string'
}]
},
{
items: [{
id: 5,
name: 'string'
},
{
id: 3,
name: 'string'
}
]
}
];
// map ids into a look up array so we do not
// have to loop over objects every time
const usedIds = arr.map(o => o.id);
// Loop over main array so we can access each object
mainArray.forEach(sa => {
// replace items with a filtered array
// filter checks to see if the id is not used
sa.items = sa.items.filter(o => !usedIds.includes(o.id))
})
console.log(mainArray)
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53394377%2fremove-each-element-of-array-from-subarrays-of-objects%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
1
down vote
As I've said in the comments, you cannot use const
keyword and override the variable later. but, you don't event need to, since you can modify the inner properties without a problem:
const arr = [
{ id:0, name:'string' },
{ id:1, name:'string' }
]
const mainArray = [{
items: [{ id:0, name:'string' },]
},
{
items: [
{ id:5, name:'string' },
{ id:3, name:'string' },
{ id:1, name:'string' },
]
}
];
// for each "items" item, check if its "id" exists in the "arr" Array, so
// I like to use "some" Array method for that:
mainArray.map((e) => {
e.items = e.items.filter(el => !arr.some(needle => needle.id == el.id))
});
console.log( mainArray )
add a comment |
up vote
1
down vote
As I've said in the comments, you cannot use const
keyword and override the variable later. but, you don't event need to, since you can modify the inner properties without a problem:
const arr = [
{ id:0, name:'string' },
{ id:1, name:'string' }
]
const mainArray = [{
items: [{ id:0, name:'string' },]
},
{
items: [
{ id:5, name:'string' },
{ id:3, name:'string' },
{ id:1, name:'string' },
]
}
];
// for each "items" item, check if its "id" exists in the "arr" Array, so
// I like to use "some" Array method for that:
mainArray.map((e) => {
e.items = e.items.filter(el => !arr.some(needle => needle.id == el.id))
});
console.log( mainArray )
add a comment |
up vote
1
down vote
up vote
1
down vote
As I've said in the comments, you cannot use const
keyword and override the variable later. but, you don't event need to, since you can modify the inner properties without a problem:
const arr = [
{ id:0, name:'string' },
{ id:1, name:'string' }
]
const mainArray = [{
items: [{ id:0, name:'string' },]
},
{
items: [
{ id:5, name:'string' },
{ id:3, name:'string' },
{ id:1, name:'string' },
]
}
];
// for each "items" item, check if its "id" exists in the "arr" Array, so
// I like to use "some" Array method for that:
mainArray.map((e) => {
e.items = e.items.filter(el => !arr.some(needle => needle.id == el.id))
});
console.log( mainArray )
As I've said in the comments, you cannot use const
keyword and override the variable later. but, you don't event need to, since you can modify the inner properties without a problem:
const arr = [
{ id:0, name:'string' },
{ id:1, name:'string' }
]
const mainArray = [{
items: [{ id:0, name:'string' },]
},
{
items: [
{ id:5, name:'string' },
{ id:3, name:'string' },
{ id:1, name:'string' },
]
}
];
// for each "items" item, check if its "id" exists in the "arr" Array, so
// I like to use "some" Array method for that:
mainArray.map((e) => {
e.items = e.items.filter(el => !arr.some(needle => needle.id == el.id))
});
console.log( mainArray )
const arr = [
{ id:0, name:'string' },
{ id:1, name:'string' }
]
const mainArray = [{
items: [{ id:0, name:'string' },]
},
{
items: [
{ id:5, name:'string' },
{ id:3, name:'string' },
{ id:1, name:'string' },
]
}
];
// for each "items" item, check if its "id" exists in the "arr" Array, so
// I like to use "some" Array method for that:
mainArray.map((e) => {
e.items = e.items.filter(el => !arr.some(needle => needle.id == el.id))
});
console.log( mainArray )
const arr = [
{ id:0, name:'string' },
{ id:1, name:'string' }
]
const mainArray = [{
items: [{ id:0, name:'string' },]
},
{
items: [
{ id:5, name:'string' },
{ id:3, name:'string' },
{ id:1, name:'string' },
]
}
];
// for each "items" item, check if its "id" exists in the "arr" Array, so
// I like to use "some" Array method for that:
mainArray.map((e) => {
e.items = e.items.filter(el => !arr.some(needle => needle.id == el.id))
});
console.log( mainArray )
edited Nov 20 at 14:06
answered Nov 20 at 14:01
vsync
45.1k35157217
45.1k35157217
add a comment |
add a comment |
up vote
0
down vote
I would map the used ids into an array for easier look up. That it is a foreach loop over the main array items, and than filter using includes to see if the item is in the array.
const arr = [{
id: 0,
name: 'string'
}, {
id: 1,
name: 'string'
}]
const mainArray = [{
items: [{
id: 0,
name: 'string'
}]
},
{
items: [{
id: 5,
name: 'string'
},
{
id: 3,
name: 'string'
}
]
}
];
// map ids into a look up array so we do not
// have to loop over objects every time
const usedIds = arr.map(o => o.id);
// Loop over main array so we can access each object
mainArray.forEach(sa => {
// replace items with a filtered array
// filter checks to see if the id is not used
sa.items = sa.items.filter(o => !usedIds.includes(o.id))
})
console.log(mainArray)
add a comment |
up vote
0
down vote
I would map the used ids into an array for easier look up. That it is a foreach loop over the main array items, and than filter using includes to see if the item is in the array.
const arr = [{
id: 0,
name: 'string'
}, {
id: 1,
name: 'string'
}]
const mainArray = [{
items: [{
id: 0,
name: 'string'
}]
},
{
items: [{
id: 5,
name: 'string'
},
{
id: 3,
name: 'string'
}
]
}
];
// map ids into a look up array so we do not
// have to loop over objects every time
const usedIds = arr.map(o => o.id);
// Loop over main array so we can access each object
mainArray.forEach(sa => {
// replace items with a filtered array
// filter checks to see if the id is not used
sa.items = sa.items.filter(o => !usedIds.includes(o.id))
})
console.log(mainArray)
add a comment |
up vote
0
down vote
up vote
0
down vote
I would map the used ids into an array for easier look up. That it is a foreach loop over the main array items, and than filter using includes to see if the item is in the array.
const arr = [{
id: 0,
name: 'string'
}, {
id: 1,
name: 'string'
}]
const mainArray = [{
items: [{
id: 0,
name: 'string'
}]
},
{
items: [{
id: 5,
name: 'string'
},
{
id: 3,
name: 'string'
}
]
}
];
// map ids into a look up array so we do not
// have to loop over objects every time
const usedIds = arr.map(o => o.id);
// Loop over main array so we can access each object
mainArray.forEach(sa => {
// replace items with a filtered array
// filter checks to see if the id is not used
sa.items = sa.items.filter(o => !usedIds.includes(o.id))
})
console.log(mainArray)
I would map the used ids into an array for easier look up. That it is a foreach loop over the main array items, and than filter using includes to see if the item is in the array.
const arr = [{
id: 0,
name: 'string'
}, {
id: 1,
name: 'string'
}]
const mainArray = [{
items: [{
id: 0,
name: 'string'
}]
},
{
items: [{
id: 5,
name: 'string'
},
{
id: 3,
name: 'string'
}
]
}
];
// map ids into a look up array so we do not
// have to loop over objects every time
const usedIds = arr.map(o => o.id);
// Loop over main array so we can access each object
mainArray.forEach(sa => {
// replace items with a filtered array
// filter checks to see if the id is not used
sa.items = sa.items.filter(o => !usedIds.includes(o.id))
})
console.log(mainArray)
const arr = [{
id: 0,
name: 'string'
}, {
id: 1,
name: 'string'
}]
const mainArray = [{
items: [{
id: 0,
name: 'string'
}]
},
{
items: [{
id: 5,
name: 'string'
},
{
id: 3,
name: 'string'
}
]
}
];
// map ids into a look up array so we do not
// have to loop over objects every time
const usedIds = arr.map(o => o.id);
// Loop over main array so we can access each object
mainArray.forEach(sa => {
// replace items with a filtered array
// filter checks to see if the id is not used
sa.items = sa.items.filter(o => !usedIds.includes(o.id))
})
console.log(mainArray)
const arr = [{
id: 0,
name: 'string'
}, {
id: 1,
name: 'string'
}]
const mainArray = [{
items: [{
id: 0,
name: 'string'
}]
},
{
items: [{
id: 5,
name: 'string'
},
{
id: 3,
name: 'string'
}
]
}
];
// map ids into a look up array so we do not
// have to loop over objects every time
const usedIds = arr.map(o => o.id);
// Loop over main array so we can access each object
mainArray.forEach(sa => {
// replace items with a filtered array
// filter checks to see if the id is not used
sa.items = sa.items.filter(o => !usedIds.includes(o.id))
})
console.log(mainArray)
answered Nov 20 at 13:55
epascarello
150k13131179
150k13131179
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53394377%2fremove-each-element-of-array-from-subarrays-of-objects%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
can you add an example of your desired output? Also side node: Your map function doesn't return anything so you would end up with an empty mainArray
– noa-dev
Nov 20 at 13:50
1
You cannot do
mainArray = ...
since you used theconst
keyword to define that variable. it is a constant and cannot be overridden.– vsync
Nov 20 at 13:51
example output?
– Oscar Zarrus
Nov 20 at 13:52