Deleting elements from an array of objects in Angular Would you like help with

I have a JSON structure and I need to remove the entire StartGeotag object from the array.

[{
    CreatedDate: "2022-02-17T10:30:07.0442288Z"
    DeletedDate: null ProjectId: "05b76d03-8c4b-47f4-7c20-08d9e2990812"
    StartGeotag: {
        Type: 'Point',
        Latitude: '33.6607231',
        CreatedDate: '2022-02- :34:46.5389961Z'
    }
    StartTime: "2022-02-17T10:30:05.828Z"
}]

Answer №1

Utilizing the ES6 Spread Operator allows you to accomplish this task: To remove specific keys, simply provide those keys as arguments, and ...rest will return the remaining arguments.

var data = [{ CreatedDate: "2022-02-17T10:30:07.0442288Z", 
DeletedDate: null, 
ProjectId: "05b76d03-8c4b-47f4-7c20-08d9e2990812",
StartGeotag: {Type: 'Point', Latitude: '33.6607231', 
CreatedDate: '2022-02- :34:46.5389961Z'},
StartTime: "2022-02-17T10:30:05.828Z"}]

const res= data.map(({StartGeotag, ...rest}) => ({...rest})); 

console.log(res);

Answer №2

To utilize object destructuring assignment introduced in ES6, you can destructure objects easily.

See the code snippet below for a demonstration :

let jsonObj = [{
    CreatedDate: "2022-02-17T10:30:07.0442288Z",
    DeletedDate: null,
    ProjectId: "05b76d03-8c4b-47f4-7c20-08d9e2990812",
    StartGeotag: {
        Type: 'Point',
        Latitude: '33.6607231',
        CreatedDate: '2022-02- :34:46.5389961Z'
    },
    StartTime: "2022-02-17T10:30:05.828Z"
}];

let res = jsonObj.map(({StartGeotag, ...remainingItems}) => remainingItems)

console.log(res);

Answer №3

To easily extract specific data from your object, you can use object destructuring.

[{ CreatedDate: "2022-02-17T10:30:07.0442288Z" , DeletedDate: null, ProjectId: "05b76d03-8c4b-47f4-7c20-08d9e2990812",
    StartGeotag: {Type: 'Point', Latitude: '33.6607231', CreatedDate: '2022-02- :34:46.5389961Z'},
    StartTime: "2022-02-17T10:30:05.828Z"}].map(({StartGeotag, ...item}) => item)

If you specifically need only the StartGeoTag object, you can achieve that like so:

 [{ CreatedDate: "2022-02-17T10:30:07.0442288Z" , DeletedDate: null, ProjectId: "05b76d03-8c4b-47f4-7c20-08d9e2990812",
    StartGeotag: {Type: 'Point', Latitude: '33.6607231', CreatedDate: '2022-02- :34:46.5389961Z'},
    StartTime: "2022-02-17T10:30:05.828Z"}].map(({StartGeotag}) => StartGeotag)

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

The typescript-eslint-parser does not officially support this version of TypeScript

I recently acquired an outdated AngularJs application that still relies on the legacy tools: bower and grunt. Upon executing grunt serve --reload, I encounter the following warning message: WARNING: You are currently running a version of TypeScript which ...

The date in the JSON response does not align correctly

Seeking insights into this issue, I am currently utilizing the code below to generate a JSON response through an AJAX request console.log('get_therapist_sessions', response); response.forEach(function(item){ console.log(item); ...

What could be causing my JSON product list to not load properly?

My list is not loading and I can't figure out why. I've included my json, jquery, and HTML below. The console isn't showing any errors, but the list is still blank. Any help would be greatly appreciated as I am new to working with json. Than ...

You cannot convert a function to a string while utilizing axios get in nuxtServerInit

While attempting to connect my app to the backend using Udemy's Nuxt.js course, I encountered a GET http://localhost:3000/ 500 (Internal Server Error) on the client side with the following code: import Vuex from 'vuex'; import axios from &a ...

Is it practical to use JSON.parse for processing large datasets exceeding 50 megabytes in size?

When developing my android app, I initially used Firebase for real-time data storage. However, due to the high pricing, I made the decision to switch over to a NodeJS server. Since I am new to NodeJS... The Firebase real-time database stores data in JSON ...

Having a problem where the Next.js project is functioning in development mode, but encountering a "module not found" error

After following multiple tutorials to integrate Typescript into my existing app, I finally got it running smoothly in dev mode using cross-env NODE_ENV=development ts-node-script ./server/index.js However, when I execute next build, it completes successfu ...

Tips for including subjects in JSON data

I am trying to include the subject in JSON data so that I can fetch it using $.each(data.subject). Below is my API code where I am retrieving all the data encoded in JSON format. Any assistance would be greatly appreciated. [{"id":"79","FirstName":"Elon", ...

Encountering a hiccup when working with Angular and npm

Error: The '@angular-devkit/build-angular:browser' builder's node package could not be located. Upon running npm start, the console displays this error message: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="473 ...

Tips for continuously running a loop function until retrieving a value from an API within a cypress project

Need help looping a function to retrieve the value from an API in my Cypress project. The goal is to call the API multiple times until we receive the desired value. let otpValue = ''; const loopFunc = () => { cy.request({ method: &ap ...

Exploring variables within an Angular2 component's view

Is there a way for me to access and display the coordinates in my template? export class DashboardPage { constructor(public navCtrl: NavController) { Geolocation.getCurrentPosition().then(pos => { console.log(pos.coords.latitude, pos.coor ...

How can I turn off the draggable feature for a specific element in react-beautiful-dnd?

Currently, I am implementing a drag and drop functionality using TypeScript with react-beautiful-dnd. The goal is to allow users to move items between two containers - one containing user names and the other labeled "Unassigned". Here is a snapshot of the ...

The ListView functionality in Android seems to be malfunctioning, as it is throwing a non-null

I am facing an issue with displaying data in my ListView from a website. It seems like there might be an error in my `AsyncTask` implementation. My goal is to only show two specific pieces of text from the JSON file I'm retrieving. I've tried u ...

Issue with clearing subscription upon navigating to another page is not functioning as expected

Currently, I am working on building a basic search screen to gain a better understanding of Angular subscriptions, which I have found to be quite perplexing. On my home page, I have set up two components - one for filtering and the other for displaying sea ...

Customizing data input in ngx chart's bubble chart is essential for creating a unique

For my project, I utilized the ngx-chart bubble chart. However, I encountered an issue when the data was in the following format: multi: any[] = [{ "name": "Kuwait", "series": [{ "name": "a", "waiting time": 24, "real time": 38, "queue size": 31 }, { " ...

Generating JSON using while loops and foreach loops in PHP

Currently, I am in the process of updating a PHP application that generates JSON data on the server side. {"by":"Industrie LLC","dead":false,"descendants":396,"id":"396","kids":[1,396],"score":396,"time":"396","title":"Industrie LLC","type":"comment","url ...

Is it possible to execute "green arrow" unit tests directly with Mocha in IntelliJ IDEA, even when Karma and Mocha are both installed?

My unit tests are set up using Karma and Mocha. The reason I use Karma is because some of the functionality being tested requires a web browser, even if it's just a fake headless one. However, most of my code can be run in either a browser or Node.js. ...

Encountering a service error that results in the inability to read properties of undefined when passing a method as a

Whenever I attempt to pass a service function as a parameter to another function, an error 'Cannot read properties of undefined myService' occurs during execution. However, calling this.myService.method() individually works perfectly fine without ...

Trouble with displaying ChartsJS Legend in Angular11

Despite thoroughly researching various documentation and Stack Overflow posts on the topic, I'm still encountering an odd issue. The problem is that the Legend for ChartsJS (the regular JavaScript library, not the Angular-specific one) isn't appe ...

Capturing the dynamic server response with nested JSON structures

I am in the process of creating a dynamic data-binding function named assemble that requires two input parameters: server response (JSON) - nested JSON object. instruction set (JSON) - a configuration object that dictates the binding. The Issue: The cur ...

Using Python to extract and process JSON data from a specific portion of a line within

Seeking assistance with parsing JSON data from a file. Each line in the file follows this format: some hexadecimal numbers|something else|int|UA info|{'computer': {'os': {'version': 'blabla', 'name': &apos ...