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

Disregard the popstate triggered by Safari's Initial Page Load

Utilizing pushState, I am able to generate the page view on popstate events based on the history.state of the current page. In cases where there is no history.state present, my intention is to reload the document (hopefully). window.onpopstate = function ...

Prevent unnecessary clicks with Vue.js

In my vue.js application, there is a feature to remove items. The following code snippet shows the div element: <div class="ride-delete" @click="delete"> <p>Delete</p> </div> This is the function used to handle the click ...

Forge: Securely encrypting massive files

I rely on the forge framework for implementing PGP functionality, specifically for encrypting large files (2gb or larger) while minimizing RAM usage. What would be the most efficient approach to achieve this? ...

Adding a class-matched element with a corresponding ID

Despite finding similar questions, I am still unable to achieve the desired outcome. Here is a list: <ul> <li class="class1"></li> <li class="class2"></li> <li class="class3"></li> <li class="class4"&g ...

What is the mechanism behind image pasting in Firefox's imgur integration?

Start by launching an image editing software and make a copy of any desired image. Avoid copying directly from a web browser as I will explain the reason later on. Navigate to "http://imgur.com" using Firefox. To paste the copied image, simply press Ctrl+V ...

Is there a way to automatically execute this function when the React component is loaded, without the need for a button click?

After spending a few days trying to figure this out, I'm hitting a wall. This ReactJS project is new for me as I usually work with C#. The goal is to create a print label component that triggers the print dialog when a link in the menu is clicked. Cu ...

Generating binary payload with Node-RED

Recently started with node-red and javascript. I am looking to establish a connection with a relay controller for status using the TCP input. I have configured a function node to create a two-byte request which will be sent through the TCP input node to th ...

Stopping form submission on a jQuery form

I am in the process of implementing a password control feature on a login form using jQuery and ajax. This is the current script I have: $(document).ready(function() { $("#login-form").submit(function(e) { var csrftoken = getCookie('csr ...

Error in Passport JS: Trying to use an undefined function

I've been struggling with debugging my code in Express and Passport. I've tried following solutions from others but can't seem to get it right. Any help or useful links would be greatly appreciated. Here is the error message along with the ...

Executing JavaScript function by clicking on <img>

I've been developing a website similar to YouTube, and I'm facing difficulties with the Like/Dislike feature for comments. Currently, I have implemented it in the following way: when a user clicks on an image (thumbsUp.png or thumbsDown.png), a ...

Uploading an image along with additional information to Strapi using React

Can you assist me with allowing users to post data on Strapi, such as their name, URL, description, and image? I attempted to add an input type file but encountered a 500 error. I suspect this could be due to the need to call localhost:1337/upload, but I& ...

What is the proper way to disable asynchronous behavior in JavaScript?

Can someone provide assistance on how to make the following jQuery ajax function asynchronous in this code? $.post(base_url+"search/questionBox/"+finalTopic+"/"+finalCountry+'/'+findSearchText+'/'+ID,function(data){ if (data != "") { ...

How can filters be effectively utilized alongside transclusion within directives?

Seeking advice on applying a filter to the transcluded text within my directive. Struggling to determine the best approach, I currently have a working version that utilizes the compile function to access the transcluded text. Take a look at this JSFiddle ...

Basic jQuery request for JSON data

In an effort to send user data to a PHP script and display the results in an element, I am utilizing JSON. The process works smoothly until reaching the response stage. Despite receiving the correct results when logging to the console, attempting to append ...

Inverted Scrolling Problem in Firefox

I am facing an issue with a script that inverts mouse movement for horizontal scrolling. It works fine in most browsers except Firefox. I could use some advice on how to troubleshoot this problem! $("body").mousewheel(function(event, delta) { ...

Unpredictable Behavior of CSS Transition with JS createElement() Function

I'm using JavaScript to create a div element and I'm adding the CSS property transition: .5s linear top; When the user clicks on the element (onmousedown event), it is supposed to smoothly move to the top of the screen and then be deleted using ...

Complete my search input by utilizing ajax

It's only been 30 minutes since my last post, but I feel like I'm making progress with my search posts input: I've developed a model that resembles this: function matchPosts($keyword) { $this->db->get('posts'); ...

What is required to create a basic application that can function offline while featuring an HTML/CSS user interface?

Newbie inquiry: I am interested in creating a small application that can run offline on a desktop computer. The amount of data to be saved is minimal, so I have the option to use a file or some type of database. However, my main question is: What languag ...

why is my angular listing malfunctioning when I try to compare two fields?

<div ng-controller="SamsungServicesCtrl"> <ion-content> <li class="item item-checkbox" ng-repeat="item in items" > <img src="{{item.icon}}" style="float:left;height:30px;width:30px;padding-right:5px;" & ...

Unable to access complete map using ngmap and AngularJS

I am currently working with ngmap and encountered the issue shown in this screenshot https://i.stack.imgur.com/WchKT.png Here is my code: var app = angular.module('dv', ['ngMap']) app.controller('MC', function($scope){ ...