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.










share|improve this question


















  • 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 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















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.










share|improve this question


















  • 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 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













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.










share|improve this question













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






share|improve this question













share|improve this question











share|improve this question




share|improve this question










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 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














  • 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 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








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












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 )








share|improve this answer






























    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)








    share|improve this answer





















      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
      });


      }
      });














      draft saved

      draft discarded


















      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 )








      share|improve this answer



























        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 )








        share|improve this answer

























          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 )








          share|improve this answer














          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 )






          share|improve this answer














          share|improve this answer



          share|improve this answer








          edited Nov 20 at 14:06

























          answered Nov 20 at 14:01









          vsync

          45.1k35157217




          45.1k35157217
























              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)








              share|improve this answer

























                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)








                share|improve this answer























                  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)








                  share|improve this answer












                  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)






                  share|improve this answer












                  share|improve this answer



                  share|improve this answer










                  answered Nov 20 at 13:55









                  epascarello

                  150k13131179




                  150k13131179






























                      draft saved

                      draft discarded




















































                      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.




                      draft saved


                      draft discarded














                      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





















































                      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







                      Popular posts from this blog

                      404 Error Contact Form 7 ajax form submitting

                      How to know if a Active Directory user can login interactively

                      TypeError: fit_transform() missing 1 required positional argument: 'X'