Eliminating an element from an object containing nested arrays

Greetings, I am currently working with an object structured like the following:

var obj= {
     _id: string;
    name: string;
    loc: [{
         locname: string;
         locId: string;
         locadd: [{
             st: string;
             zip: string;
         }]
     }]
}

Within TypeScript in Angular 2, my goal is to delete a specific row from this object.

deleterow(i, j) {
  // i represents the index of loc 
  // j represents the index of locadd
  this.obj.loc.splice(i, 1) // works correctly 
  this.obj.loc[i].locadd.splice(j, 1) // encountering issues as the row is not being removed without any error message.
}

I've attempted a solution similar to one provided in this answer on Stack Overflow, but it hasn't been successful.

If you have any insights on how I can successfully remove an item from locadd, I would greatly appreciate your assistance. Thank you.

Answer №1

You have removed the ith location item, and then you attempted to reference the ith location which is now the next item after the one you deleted.

In my opinion, the locadd should be deleted before deleting the loc.

this.obj.loc[i].locadd.splice(j,1)
this.obj.loc.splice(i, 1)

Update:

I've created a snippet that appears to be functioning correctly.

var obj = {
            loc: [{
                locadd: [{
                    st: '1',
                    zip: '1',
                },{
                    st: '2',
                    zip: '2',
                },{
                    st: '3',
                    zip: '3',
                }]
            }]
        };

        function deleterow(i, j) {
            // i represents the index of the location 
            // j represents the index of locadd
            // this.obj.loc.splice(i, 1) //works fine 
            this.obj.loc[i].locadd.splice(j, 1) //doesn't work. I don't get any error, the row just isn't removed.
        }

        console.log(this.obj.loc)
        deleterow(0, 1)
        console.log(this.obj.loc)

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

What are some ways to incorporate JQuery with getElementById?

i am trying to retrieve all input elements within a form using JavaScript formEditable = document.getElementById("formid").getElementsByTagName("input"); However, I would like to achieve the same result using jQuery instead formEditable = $("#formid").f ...

Sorting Tables through the Power of Drag and Drop

While utilizing both the Jquery Tablesorter plugin and the Drag and Drop plugin together, everything seems to be functioning correctly. However, when attempting to use the serialize function of the tableDnD, an error message stating "empty string getElemen ...

Converting an Angular JSON encoded array to PHP format

I need to send a JS array to the server in this format: "['id' => ['users'=>[] ]]" In my Angular code, I have an id: var id = '3534534543535'; How can I convert my id to the expected PHP format? ...

Create a drag-and-drop interface and link elements together using a custom JavaScript library

Seeking a solution or Javascript library to create a scientific modeling application, similar to flowchart software such as Visio. The ability to add elements and connect them by clicking and dragging is essential. https://i.stack.imgur.com/vSZpB.png The ...

byte sequence displays as binary data (angular + express)

I've been working on pulling files from a back-end Node.js / Express server and displaying them in an Angular front-end. Despite trying different methods, I keep facing the same issue - the data displayed at the front-end appears as a bytestring. Even ...

I attempted to implement an AJAX partial refresh for my HTML, but unfortunately, it did not have the

I've been attempting to implement Ajax to locally load the page, but unfortunately, the code below isn't functioning as expected. My intention is to transmit the 'MSG' information from 'views' to Ajax and refresh the page loca ...

What is the best way to apply a class for styling my JavaScript code in CSS? I'm having trouble getting classList

I am having trouble adding a class to my JavaScript script in order to animate the images created in JavaScript to fall off the page. I have tried using the code element.classList.add("mystyle");, but every time I insert it, my JavaScript stops working. T ...

Tips for importing an external JavaScript file and accessing its data within a ReactJS project?

Currently, I am working on a React project using create-react-app. My objective is to load an external JavaScript file (hosted in IIS) and utilize the data it contains. To fetch this file, I am including a script in my index.html like so: <script type ...

Is it possible to update input form fields in an Angular application?

I am currently designing a straightforward web page featuring a modal for creating a new object named Partner and sending it to the server. The page also includes multiple input fields to showcase the newly created data. In this project, I am utilizing Ang ...

Initiate node and PM2 application using a batch file

Currently, I have a chat-bot application running on Node.js, which I always keep active using pm2. I am looking to streamline the process of launching the application. Instead of having to run the start command from the console every time, I would like to ...

Combining two arrays by finding common elements

Currently, I am working on a project where I retrieve data from the server, and each piece of data has to adhere to a specific format: const DATA = [ { title: {title: 'Main dishes'}, data: [ {_id: 1, type: 'Pizza'}, ...

The communication between my Angular 2 application and the NodeJS server seems to be experiencing issues as I

I am a beginner in the world of MEAN stack development and could really use some assistance in troubleshooting an issue. app.js const express = require('express'); const app = express(); const path = require('path'); app.use(express. ...

Firebase Promise not running as expected

Here is a method that I am having trouble with: async signinUser(email: string, password: string) { return firebase.auth().signInWithEmailAndPassword(email, password) .then( response => { console.log(response); ...

What could be causing this TypeScript class to not perform as anticipated?

My goal with this code snippet is to achieve the following: Retrieve a template using $.get(...), Attach an event listener to the input element within the template I am using webpack to transpile the code without encountering any issues. The actual cod ...

Tips for displaying an element for each item chosen in a multi-select box

I currently have a situation where I am rendering for every selected element within my multiselect angular material selectbox. The rendering process functions correctly when I select an element, but the issue arises when I try to deselect one - it just ke ...

Retrieving JSON data by key through ajax does not show the expected output

I'm currently working with JSON data in the form of an array, and I'm facing some issues. Here's how the data looks: [ { "id": 1, "name": "Leanne Graham", "username": "Bret", ...

The innerHTML of null cannot be set in Vue JS

I am attempting to showcase my array and its modifications after applying various methods <template> <div> <div id="example"></div> <div id="example1"></div> </div> </template> <s ...

Upon initial page load, React JS is unable to fetch the data but it functions correctly when triggered by a click

Here is the code I am working with: var CommonHeader = require('./header/CommonHeader.jsx'); var ListOptions = require('./header/ListOptions.jsx'); var SortableTable = require('../shared/SortableTable.jsx'); var ColumnDefinit ...

Unable to assign a default value to an Angular input field

My web page utilizes an Angular form to display user data fetched from a MongoDB database. The information includes the user's name, phone number, email, etc. I want the default value of the input field to be set as the placeholder text, allowing user ...

Combining Mocha, BlanketJS, and RequireJS has resulted in the error message "No method 'reporter'."

While using Mocha with RequireJS, my tests are running smoothly. However, I encountered an issue when trying to incorporate blanket code coverage. The error Uncaught TypeError: Object #<HTMLDivElement> has no method 'reporter' keeps popping ...