Delete a particular item from a JSON object in real-time using TypeScript/JavaScript

Upon examining the JSON data provided, it contains a node called careerLevels which includes inner child elements.

input = {
            "careerLevelGroups": [
                {
                    "201801": 58,
                    "201802": 74,
                    "careerLevel": "Analyst",
                    "careerLevels": [
                        {
                            "201801": 29,
                            "201802": 37,
                            "careerID": "10000100"
                        },
                        {

                            "201801": 29,
                            "201802": 37,
                            "careerID": "10000110"
                        }
                    ]
                },
                {

                    "201801": 58,
                    "201802": 74,
                    "careerLevel": "Consultant",
                    "careerLevels": [
                        {

                            "201801": 29,
                            "201802": 37,
                            "careerID": "10000080"
                        },
                        {

                            "201801": 29,
                            "201802": 37,
                            "careerID": "10000090"
                        }
                    ]
                }
]}

My goal is to programmatically remove all instances of the careerLevels node from this JSON and only retain the following information:

output= {
            "careerLevelGroups": [
                {
                    "201801": 58,
                    "201802": 74,
                    "careerLevel": "Analyst"

                },
                {

                    "201801": 58,
                    "201802": 74,
                    "careerLevel": "Consultant"

                }
]}

I initially attempted to achieve this by using the code snippet below:

let strippedJson = copyObject(mergedJson);
    delete strippedJson.careerLevels; // remove careerLevels but this is not doing anything.

Realizing the need for a different approach, I believe that something similar to the following pseudocode might be more suitable:

input.forEach(element => {element.delete}) // something like this

Answer №1

Below is a code snippet you can experiment with:

let result = JSON.parse(JSON.stringify(input));
result.careerLevelGroups.forEach(grp => delete grp.careerLevels);

Answer №2

Utilize the array Map method to loop through the elements in the careerLevelGroups array and then remove the careerLevels property from each object :

var jsonObj = {
"careerLevelGroups": [{
"201801": 58,
"201802": 74,
"careerLevel": "Analyst",
"careerLevels": [{
"201801": 29,
"201802": 37,
"careerID": "10000100"
},
{

"201801": 29,
"201802": 37,
"careerID": "10000110"
}
]
},
{

"201801": 58,
"201802": 74,
"careerLevel": "Consultant",
"careerLevels": [{

"201801": 29,
"201802": 37,
"careerID": "10000080"
},
{

"201801": 29,
"201802": 37,
"careerID": "10000090"
}
]
}
]
};

var res = jsonObj.careerLevelGroups.map(obj => {
delete obj.careerLevels
return obj;
});

console.log(res);

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

Determining the appropriate scenarios for using declare module and declare namespace

Recently, I came across a repository where I was exploring the structure of TypeScript projects. One interesting thing I found was their typings file: /** * react-native-extensions.d.ts * * Copyright (c) Microsoft Corporation. All rights reserved. * Li ...

Ways to return bsDateRangePicker to its default value

I'm currently working on creating reactive forms using Angular 9 and integrating ngx-bootstrap. One issue I am facing is with the daterangepicker functionality. Whenever I utilize the form.reset() function, it clears the input field entirely instead o ...

Having trouble with the date format in the highCharts range selector?

I am encountering an issue while trying to implement the rangefilter feature with HighCharts. The start and end dates are appearing incorrect, indicating that my date is not being recognized properly. My x-axis consists of unique dates as categorical valu ...

Using Ajax and PHP to upload an image

I'm looking to implement an image upload feature triggered by a button click with the id of #myid.save. Below is the code I have so far: HTML Code: <canvas id="cnv" width="500" height="100"></canvas> <input id="myid_save" type="submit ...

Automating button clicks after a component has loaded in Angular 2+ can be achieved by implementing a

Currently, I am working on implementing an automatic search function in Angular that triggers after a component loads. Right now, the function is triggered by a button click, but I want to automate this process. <button mat-raised-button class="mat-whi ...

JS Difficulty with Applying Underline in Contenteditable

Recently, I encountered a glitch with document.execCommand that seems puzzling. Allow me to explain the situation at hand. $("#underline-btn").click(function() { document.execCommand("underline"); }); <script src="https://ajax.googleapis.com/ajax/l ...

Creating a dynamic image slider that smoothly glides across a webpage

I've been working on a carousel (image slider) for my website and I need some help. Specifically, I want to reposition the entire slider slightly to the left on the webpage. You can see the slider in action on this site: and I also created a jsfiddle ...

Managing numerous range sliders in a Django form

My Request: I am looking to have multiple Range sliders (the number will change based on user selections) on a single page. When the sliders are moved, I want the value to be updated and displayed in a span element, as well as updating the model. The Issu ...

Angular nested lists with drag and drop functionality

Recently, I've been working on creating a drag and drop dashboard and stumbled upon an amazing nested list at this link. This particular implementation uses the AngularJs JavaScript framework. However, since I don't have much experience with it, ...

Organizing Results into Divs Based on Column Value Using AngularJs

I've been racking my brain trying to figure out the best way to organize and display my results in separate divs, specifically using Bootstrap col-md-4's. This is for a chat messaging app that I'm in the process of developing. I have rooms a ...

Testing API calls with ReactJS

I'm diving into Reactjs development and have encountered a challenge. I created an App that makes API calls to https://jsonplaceholder.typicode.com/users. However, when testing the API call, I ran into issues. In addition, I built a simple WebApi pro ...

I'm encountering a 404 error on Next.js localhost:3000

Embarking on a fresh project in Next.js, my folder structure looks like this: https://i.stack.imgur.com/HhiJo.png However, upon navigating to localhost:3000, I am greeted with a 404 error screen. It seems there is an issue with the routing, but unfortuna ...

toggle switch for numerical input

Whenever the "Qty" radio button is selected, I need to activate an input box that accepts numbers. Conversely, when the "rate" radio button is clicked, I want to disable this input box. This is how I designed it: <input type="radio" class="radioBtn" ...

Extracting an ID value from a select box in Vue.js

I'm attempting to extract the value of idTipoExame from the following JSON: { "idTipoExame": "11", "mnemonico": "AUR", "exame": "ACIDO URICO" }, { "idTipoExame": "24&qu ...

Letters appear randomly at the conclusion of my phrase?

void splitWord(char phrase[]) { int len, len2, half; char firstHalf[BUF], secondHalf[BUF]; len = strlen(phrase); len2 = len / 2; len -= len2; strncpy(firstHalf, phrase, len-1); strncpy(secondHalf, (phrase + len), len2-1); ...

Troubleshooting the Gutter Problem in jQuery Isotope and Masonry

Currently, I am utilizing the Isotope jQuery plugin. While it is a fantastic tool, I am encountering a minor issue with aligning items in masonry mode. The width of my container is 960px, and I aim to have 4 items perfectly aligned as if they were adhering ...

What is the importance of having references to maintain the existence of mutable objects?

In the documentation for useRef, it is mentioned that this hook is useful for storing mutable values. I've been thinking, why can't we just use a variable in the outer scope of the component to achieve the same result? // the object I want to st ...

How should JSON files stored on the server side be properly utilized in Next.js?

Currently, I have a collection of JSON files that I expose through an API endpoint on my web application for global access. This allows different parts of the application to retrieve the data by sending a fetch request to itself... However, since this inf ...

JavaScript - Merging the two JSON requests into a unified object

Is there a way to merge two different JSON responses into a single object for easy data manipulation? I've explored various solutions, but none seem to align with my current code structure. Given that I'm new to this, it would be incredibly hel ...

What is the best way to trigger a function once all asynchronous calls within a loop have been completed?

The function addData is called asynchronously within a loop every time reader.onloadend is triggered. const uploadFiles = () => { console.log(acceptedFiles) setLoading(true) console.log(loading) let i = 0 let l = acceptedFiles.length ...