Angular 1 and Javascript offer a different approach than using lodash omit and the delete operator

I am facing an issue with a child component where I need to remove properties from an object.

Normally, using Lodash, it should work with the following code snippet:

this.current.obj = omit(this.current.obj, ['sellerSupportWeb', 'sellerSupportAgency', 'sellerSupportAgent'])

However, the model of current.obj does not correspond to the parent component.

Interestingly, if I simply use the delete operator to remove the properties from the object, it works fine:

   delete this.current.obj.sellerSupportAgency
   delete this.current.obj.sellerSupportWeb
   delete this.current.obj.sellerSupportAgent

Is there another alternative that achieves the same outcome as delete and omit?

Just for reference, in order to make it work with omit, I am accessing the parent object (parent component) within the child component. However, I am exploring other solutions since the current.obj situation is complex.

for (const [index] of this.current.parent.items.entries()) {
  this.current.parent.items[index] = omit(this.current.parent.items[index], ['sellerSupportWeb', 'sellerSupportAgency', 'sellerSupportAgent'])
}

Answer №1

It seems that you are looking to make changes to the shared object between a component and its parent. This object is within an array in the parent component, likely being iterated over using an ng-repeat. Without seeing your component definition or how it's instantiated in the parent component template, I can't provide specific advice.

When you modify the local object reference (using omit), the parent component's array remains unaffected. However, if you directly edit the local object (with delete), the changes will reflect in both places since they're pointing to the same object.

In summary, you need to decide whether to alter the array in the parent component or remove fields from the local object (where delete comes into play). The former approach aligns more with Angular principles, especially when utilizing event handlers like '&' to communicate field removal requests to the parent component.

angular.component(...
    bindings: {
        filterObjectHandler: '&onFilterObject'
(...)

this.filterObjectHandler(['sellerSupportWeb', 'sellerSupportAgency', 'sellerSupportAgent']);

You might also find this article series on component structure in AngularJS 1.5+ helpful.

If you simply want a quick method to delete fields from the object using an array of fields, consider using:

var obj = this.current.obj;

['sellerSupportWeb', 'sellerSupportAgency', 'sellerSupportAgent'].forEach(function(field) {
    delete obj[field];
});

Alternatively, try this one-liner using reduce:

['sellerSupportWeb', 'sellerSupportAgency', 'sellerSupportAgent'].reduce(function(obj, field) {
    delete obj[field];
    return obj;
}, this.current.obj);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to retrieve object in Javascript

I retrieved this data object from a JSON file source. { "Apple": "Red", "Orange": "Orange", "Guava": "Green", } Afterward, I transformed it into an Object using: var data = JSON.parse(dataFromJson); which resulted in a JavaScript object ...

Retrieve a single element from each array stored in MongoDB

Can someone help me with a query in MongoDB? I have a document structure like this, and I am looking to utilize the $addToSet operator to add a value to one of the items within the 'votes' field. However, I also need to remove that value from all ...

I'm having difficulty implementing a vue-awesome icon on my project

I am attempting to utilize the standard window-close icon from vue-awesome. I have imported my vue-awesome using the following code: import 'vue-awesome/icons'; import Icon from 'vue-awesome/components/Icon.vue'; Vue.component('i ...

What is the process for dynamically updating a variable's state within a render function?

I'm currently working on a project for my class where we are tasked with creating a website using React. Unfortunately, neither myself nor my group members have been able to figure out how to render a function in a variable state and make it dynamic. ...

Ensure Safari sends the Origin header in jQuery GET requests

When I send a request from https://app.example.com, the following code is executed: $.get('https://api.example.com', { foo: 'bar' }) .success(getSuccess) .error(getError); This script runs smoothly on Chrome and Firefox, however, ...

Handling errors in chained promises and routes in Node.js/ExpressJS

I'm currently dealing with some confusion regarding how to handle errors when making function calls. To demonstrate this, I'll be using sequelizeJS as an example. Usually: First.Ctrl var second_ctrl = require( '../ctrl/second'); testC ...

Defining the TypeScript interface for the onClick event in ReactJS

If you're looking to dive into React development, the tutorial on reactjs.org is a great place to start. While the tutorial code is in JavaScript, I've been working on converting it to TypeScript. I've successfully translated most of the c ...

Implementing jQuery selector for CSS and properly handling special characters in the code

I've been attempting to use jQuery to change the background color of a radio button. I provided the CSS code below, but even after escaping special characters in jQuery as shown below, the solution still isn't working. #opt5 > [type="radio"]: ...

What causes the body onload = javascript function to run repeatedly?

Greetings for the absolute beginners out there, just dipping your toes in AJAX. I'm curious to know what exactly triggers the continuous change in divMessage content when the text "myName" is altered. 1) It appears that the Javascript function proce ...

Cease hover effect animation

Whenever I hover over the main span, the animation works perfectly. However, once I move the cursor away from it, the animation continues to run. How can I make it stop, and why does it persist? $('#menu span:first').hover(function (){ functi ...

Access external link without leaving current page

Dear webmasters, I am seeking advice, tools, or guidance to solve a simple problem. I have my own HTTP server that responds to HTTP requests. Example: If I visit the link: http://ip_server/link1, it performs a specific functionality If I visit the lin ...

Extract token from the URL and then use Axios in Vue.js to send it to the POST API

Hey there, I'm in need of extracting a token from the URL http://192.168.178.25:8080/register?token=eyJhbGciOiJIUzI... and then making a POST request to the API to confirm the account. I've attempted this but encountered a SyntaxError on the ...

When a block is clicked, jQuery will reveal that block while hiding the others sequentially, starting with the second block, then the third, and finally the fourth

Creating a navigation menu with 4 blocks can be a bit tricky, especially when trying to show one block at a time upon click. Here is my code attempt, but unfortunately it's not working as expected. I would greatly appreciate any help or suggestions on ...

Purge all previous page visits within a specified domain upon user logout using JavaScript

On my website, abc.xyz.com, an individual named A logs in from the login page and is directed to the home page. Then, when user A clicks on the profile button, they are taken to a page displaying their information. User A logs out, prompting the site to ...

Make the checkbox font-weight bold when it is checked

Attempting to apply custom CSS to enhance the appearance of checkboxes using input and label elements. The goal is to make the font-weight bold when a user clicks on the checkbox, and then revert it back to regular if clicked again. Currently stuck on this ...

Encountered an issue while attempting to load the required module

I'm having trouble setting up Stripe for my app and getting errors when trying to implement the module. Typically, I would require the module at the top of the file in order to use it, but when I do this in the paymentCtrl file, it doesn't work a ...

Using ReactJS to incorporate events with an external DOM element

I am using ReactJS version 16.13.1 and I have the need to display an external DOM element along with its events. Let's consider having a <button type="button" id="testBtnSiri" onclick="alert('Functionality exists');">Testbutton Sir ...

What are some tips for increasing your points on the journey using Here Maps?

While plotting a route, I noticed that the segments on highways are quite far apart. Is there a way to get a more detailed routing with finer points along the journey? $.ajax({ url: 'https://route.cit.api.here.com/routing/7.2/calculateroute ...

Ways to make webpack load the umd bundle of a library

Currently, I am working on a hybrid application that combines Angular1 and Angular2, utilizing webpack as the package bundler. Within my code, I import the library (@angular/upgrade) using the following syntax: import { UpgradeModule } from '@angula ...

Display a list of items using ReactJS by mapping through an array of objects and rendering based on

How can I render a set of <div> </div> based on the items in an object without having to specify their names? In the code snippet below, I want the display of WorkObjectID and WorkObjectVal to be dynamic rather than static. If I include TempOb ...