Removing a Child Object from a JSON Object in AngularJS

Encountering an error while attempting to remove a Child object

Error Message: TypeError: ctrl.otsact.tests.splice is not a function

HTML :

<tr ng-repeat="act in ctrl.otsact.tests" ng-if="ctrl.editToggle">
    <td><span ng-click="ctrl.removeOTSACT(act.id)"> Delete </span></td>
</tr>

Script : I am using the splice method to remove the child object from the JSON object

function removeOTSACT(index) {
    ctrl.otsact.tests.splice(index, 1);
}

Json Object

{  
   "ACT":{  
      "name":"ACT",
      "tests":{  
         "73":{  
            "id":73,
            "official_test_id":1,
            "student_id":165888,
            "test_date":"2017-05-12",
            "score":"0.0",
            "created_at":"2017-05-23 13:50:40",
            "created_by_id":2766,
            "updated_at":"2017-05-23 13:50:40",
            "updated_by_id":2766,
            "subjects":[  
               {  
                  "id":1,
                  "official_test_id":1,
                  "student_id":165888,
                  "official_test_subject_id":1,
                  "score":1,
                  "student_score_id":73,
                  "name":"English",
                  "is_consider":1
               },
               {  
                  "id":2,
                  "official_test_id":1,
                  "student_id":165888,
                  "official_test_subject_id":2,
                  "score":1,
                  "student_score_id":73,
                  "name":"Math",
                  "is_consider":1
               },
               {  
                  "id":3,
                  "official_test_id":1,
                  "student_id":165888,
                  "official_test_subject_id":3,
                  "score":1,
                  "student_score_id":73,
                  "name":"Reading",
                  "is_consider":1
               },
               {  
                  "id":4,
                  "official_test_id":1,
                  "student_id":165888,
                  "official_test_subject_id":4,
                  "score":1,
                  "student_score_id":73,
                  "name":"Science",
                  "is_consider":1
               },
               {  
                  "id":5,
                  "official_test_id":1,
                  "student_id":165888,
                  "official_test_subject_id":5,
                  "score":1,
                  "student_score_id":73,
                  "name":"Writing",
                  "is_consider":0
               }
            ]
         },
         "74":{  
            "id":74,
            "official_test_id":1,
            "student_id":165888,
            "test_date":"2017-05-12",
            "score":"0.0",
            "created_at":"2017-05-23 13:50:40",
            "created_by_id":2766,
            "updated_at":"2017-05-23 13:50:40",
            "updated_by_id":2766,
            "subjects":[  
               {  
                  "id":1,
                  "official_test_id":1,
                  "student_id":165888,
                  "official_test_subject_id":1,
                  "score":2,
                  "student_score_id":74,
                  "name":"English",
                  "is_consider":1
               },
               {  
                  "id":2,
                  "official_test_id":1,
                  "student_id":165888,
                  "official_test_subject_id":2,
                  "score":2,
                  "student_score_id":74,
                  "name":"Math",
                  "is_consider":1
               },
               {  
                  "id":3,
                  "official_test_id":1,
                  "student_id":165888,
                  "official_test_subject_id":3,
                  "score":2,
                  "student_score_id":74,
                  "name":"Reading",
                  "is_consider":1
               },
               {  
                  "id":4,
                  "official_test_id":1,
                  "student_id":165888,
                  "official_test_subject_id":4,
                  "score":2,
                  "student_score_id":74,
                  "name":"Science",
                  "is_consider":1
               },
               {  
                  "id":5,
                  "official_test_id":1,
                  "student_id":165888,
                  "official_test_subject_id":5,
                  "score":2,
                  "student_score_id":74,
                  "name":"Writing",
                  "is_consider":0
               }
            ]
         }
      }
   }
}

Identifying the mistake made in the above script

Appreciate any help on this matter.

javascriptangularjsjsonremovechild

Answer №1

When dealing with an object rather than an array, splicing is not applicable. Replace the following code:

ctrl.otsact.tests.splice(index, 1);

with this alternative:

delete ctrl.otsact.tests[index];

Answer №2

The JSON you provided does not include an array for ctrl.otsact.ACT.tests. To make splice function properly, please modify the JSON to include "tests" as an array.

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

Issue with the datepicker not toggling properly in Angular-UI 0.11.0, only opens

I am struggling with implementing 2 datepickers using Angular UI version 0.11.0. Here is my HTML code: <span ng-if="periods.period == 10"> <input type="text" datepicker-popup="dd-MMMM-yyyy" ng-model="cdate.customStartDate" is-open="opened1" ...

javascriptangularjsdatepickerangular-uiangular-ui-bootstrap

Is there a way to obtain a compressed file using an archiver from a POST request?

Currently, I am developing a NodeJS API using Express where upon sending a POST request, it should create a TAR file based on the body of that request. Issue: While I can access and manipulate the body of the request during a POST endpoint, I am unable ...

node.jsjsonexpressapi-designarchiverjs

Sending a POST request from a React application to a Node server and processing the JSON

I'm a beginner in React and I'm working on understanding how everything comes together. Is there a way to switch the rendering component for another one after receiving a status 200 response from a node server? For instance, if I make a POST re ...

javascriptnode.jsreactjsexpressreact-router

Using JavaScript to listen for events on all dynamically created li elements

Recently, I've created a simple script that dynamically adds "li" elements to a "ul" and assigns them a specific class. However, I now want to modify the class of an "li" item when a click event occurs. Here's the HTML structure: <form class ...

javascripthtmlcss

How can I set the background of specific text selected from a textarea to a div element?

Is it possible to apply a background color to specific selected text from a Text area and display it within a div? let elem = document.getElementById("askQuestionDescription"); let start = elem.value.substring(0, elem.selectionStart); let selection = ...

javascripthtml

Challenges with the Express server console

I have configured an Express Server and everything appears to be functioning correctly. The content I send is rendered in the browser, and my console.log test statements are being displayed in the terminal. However, when I inspect the browser page, nothi ...

javascriptnode.jsexpressserver

What are the methods for accessing data from a local Json file on an html page without using a server?

Looking to access a local Json file from an HTML page, but encountering challenges in reading the file on Chrome and IE. Is there a method to achieve this without relying on a web server? ...

htmlangularjsjson

Tips for concealing scrollbars across various browsers without compromising functionality

Is there a way to hide the scrollbar functionality on a horizontal scrollbar without using "overflow: hidden"? I need to maintain JS functionality and ensure compatibility with all modern browsers. $j = jQuery.noConflict(); var $panels = $j('#primar ...

javascriptjquerycssscrollbar

Error: Unable to access 'target' property as it is undefined in React JS

I am currently working on capturing the value of a select tag that triggered an event, but I am encountering an issue when changing the tag. An error message pops up saying TypeError: Cannot read property 'target' of undefined. It seems to indica ...

javascriptreactjs

The progress bar in Java Script is static and cannot be customized to change colors

Trying to use HTML for image uploads and I've created Java code to monitor the progress of the upload. However, I'm facing an issue where I cannot change the color of the progress loading bar. Below is the code I am currently using for uploading ...

javascriptphphtml

Parsing JSON into a POCO object using the Contentful .NET SDK encounters a Newtonsoft.Json.JsonReaderException

Update 1 8.July.2020: Beginning with the Rich Text field type may not have been the best choice, as it appears to require additional effort to access properly: Update 2 9.July.2020: The serialization of Rich Text to a string seems challenging due to the w ...

json.net-corecontentfulheadless-cms

No styles are appearing on a specific element after running a specific jQuery function on that element within a Vue page

I recently integrated JQuery-AsRange (https://github.com/thecreation/jquery-asRange) into my vue.js project. Everything functions as expected within the .vue page, however, I am facing an issue with css styling not being applied. The css styles should be ...

javascriptjqueryvue.jsvue-componentvuex

Saving an Axios request array to a Laravel controller in Laravel using VueJs

I am working on a laravel 5.7 application that utilizes VueJS 2.0 for the front end. The issue I am facing involves two tables with a many-to-many relationship: 'commandes' and 'produits'. When trying to pass data into my 'commande ...

javascriptphplaravelvue.jsaxios

Error Type: Property 'history' is not defined and cannot be read

My goal is to automatically redirect the user to the login page when they hit the /logout route. The authentication process works as expected (jwt token is removed), but I'm encountering issues with the app failing to redirect to /login upon logout. ...

javascriptreactjsreact-routerreact-router-v4react-router-dom

I'm puzzled as to why I am unable to invoke a class method within this callback function. The error message indicates a TypeError: 'this' is undefined

Currently, I am troubleshooting a challenge in my Angular application that involve TypeScript. The issue lies within a method in a TypeScript class: findArtistBidsAppliedByCurrentWall(bid):Observable<Bid[]> { console.log("findArtistBidsApplied ...

javascripttypescript

AngularJS requires the parameter to be altered with each iteration of the angular-poller

I'm checking out the angular-poller demo located at: I want to customize the factory in order to pass an argument that will help create a dynamic URL, allowing 'greet' to be called with a newTime argument. How can I adjust poller.get() to ...

angularjsfactorypoller

Tips on how to optimize form input mapping without losing focus on updates

I am facing an issue with a form that dynamically renders as a list of inputs. The code snippet looks like this: arrState.map((obj,index)=>{ return( <input type="text" value={obj} onChange{(e) => stateHandler(e,index)}<inpu ...

javascriptreactjs

Utilize a single JavaScript file to handle various views without encountering errors due to undefined functions

My backend editing requires a single JS file. However, I face the challenge of needing different sets of methods for view A and view B — never both at the same time. To streamline this process, I combined all the jQuery functions for both views into one ...

javascriptjquery

What is the technique for using JavaScript to implement styling on a <td> within an HTML table?

Can someone help me with applying JavaScript to an entire column in an HTML table? Here is the script I am currently using: I want to insert a line break after each comma in the Message column of the table. Can anyone point out what I'm doing wrong? ...

javascriptjqueryhtmlangularjs

What is the process for invoking a NodeJS script within a personalized VSCode Extension?

Recently, I created a NodeJS script for one of my projects and now I'm looking to develop a VSCode extension around it. How can I integrate this script as a command within my custom extension? The goal is to have the script packaged along with the e ...

javascriptnode.jsvisual-studio-codenpmvscode-extensions