Appending or removing a row in the P-Table will result in updates to the JSON

My task involves implementing CRUD (Create, Read, Update, Delete) functionality for my table. While Create, Read, and Update are working fine with the JSON file, I am struggling to figure out how to delete a specific row in the table without using JQuery or AngularJS but only Angular 6. Can anyone provide guidance on this issue?

I need to replicate this process for 4 more arrays similar to this one. If someone can explain the deletion process with one array, I believe I will be able to handle all of them. My primary concern is regarding the delete operation using splice, and if you also have insights on adding a new empty line/object that can be altered within the p-table using editable columns, it would be greatly appreciated.

JSON:

Partijen = [
  {
    "Adressen": [{
        "iAdresID" : "118",
        "iID" : "74",
        "sType" : "Partij",
        "sSoort" : "BezoekAdres",
        "iWijkCode" : "3356",
        "sSraatCode" : "ME",
        "iHuisNr" : "4",
        "sToev" : "",
        "sStraat" : "Boerenschouw",
        "sPlaats" : "PAPENDRECHT",
        "sGemeente" : "PAPENDRECHT",
        "rLatitudeX" : "51,83249",
        "rlongitudeY" : "4,71396",
        "sAdres" : "Boerenschouw 4, 3356ME PAPENDRECHT"
    },
    {
        "iAdresID" : "119",
        "iID" : "74",
        "sType" : "Partij",
        "sSoort" : "PostAdres",
        "iWijkCode" : "3356",
        "sSraatCode" : "ME",
        "iHuisNr" : "4",
        "sToev" : "",
        "sStraat" : "Boerenschouw",
        "sPlaats" : "PAPENDRECHT",
        "sGemeente" : "PAPENDRECHT",
        "rLatitudeX" : "51,83249",
        "rlongitudeY" : "4,713613",
        "sAdres" : "Boerenschouw 4, 3356ME PAPENDRECHT"
        }
      ]
    }
  ]

Part of P-table

<p-tabPanel header="Adressen" leftIcon="pi pi-home">
            <p-table [value]="Partijen" [(selection)]="Adressen">
                <ng-template pTemplate="header">
                    <tr>
                        <th>Soort</th>
                        <th>Straatnaam</th>
                        <th>Huisnummer</th>
                        <th>Wijkcode</th>
                        <th>Straatcode</th>
                        <th>Plaats</th>
                        <th>Verwijderen</th>
                    </tr>
                </ng-template>
                <ng-template pTemplate="body" let-Partij>
                    <tr>
                    <td pEditableColumn>
                        <p-cellEditor>
                            <ng-template pTemplate="input">
                                <input type="text" [(ngModel)]="Partij.Adressen[0].sSoort">
                            </ng-template>
                            <ng-template pTemplate="output">
                                {{Partij.Adressen[0].sSoort}}
                            </ng-template>
                        </p-cellEditor>
                    </td>
                    <td pEditableColumn>
                            <p-cellEditor>
                                <ng-template pTemplate="input">
                                    <input type="text" [(ngModel)]="Partij.Adressen[0].sStraat">
                                </ng-template>
                                <ng-template pTemplate="output">
                                    {{Partij.Adressen[0].sStraat}}
                                </ng-template>
                            </p-cellEditor>
                        </td>
                        <td pEditableColumn>
                            <p-cellEditor>
                                <ng-template pTemplate="input">
                                    <input type="text" [(ngModel)]="Partij.Adressen[0].iHuisNr">
                                </ng-template>
                                <ng-template pTemplate="output">
                                    {{Partij.Adressen[0].iHuisNr}}
                                </ng-template>
                            </p-cellEditor>
                        </td>
                        <td pEditableColumn>
                            <p-cellEditor>
                                <ng-template pTemplate="input">
                                    <input type="text" [(ngModel)]="Partij.Adressen[0].iWijkCode">
                                </ng-template>
                                <ng-template pTemplate="output">
                                    {{Partij.Adressen[0].iWijkCode}}
                                </ng-template>
                            </p-cellEditor>
                        </td>
                        <td pEditableColumn>
                            <p-cellEditor>
                                <ng-template pTemplate="input">
                                    <input type="text" [(ngModel)]="Partij.Adressen[0].sSraatCode">
                                </ng-template>
                                <ng-template pTemplate="output">
                                    {{Partij.Adressen[0].sSraatCode}}
                                </ng-template>
                            </p-cellEditor>
                        </td>
                        <td pEditableColumn>
                            <p-cellEditor>
                                <ng-template pTemplate="input">
                                    <input type="text" [(ngModel)]="Partij.Adressen[0].sPlaats">
                                </ng-template>
                                <ng-template pTemplate="output">
                                    {{Partij.Adressen[0].sPlaats}}
                                </ng-template>
                            </p-cellEditor>
                        </td>
                        <td>
                            <button pButton type="button" label="Verwijder" class="buttonCSS" (click)="on_Verwijderen()"></button>
                        </td>
                    </tr>
                </ng-template>
            </p-table>
        </p-tabPanel>
</p-tabView>
jsonangulartypescriptcrudprimeng

Answer №1

If you want to remove a row, you can utilize the delete method by passing in the row data.

<p-column> 
    <ng-template pTemplate="body" let-row="rowData">
         <button pButton type="button" label="Delete" class="buttonCSS" (click)="on_Delete(row)"></button>
    </ng-template>
</p-column>

Then, within the on_Delete function, target the specific row in the array based on its unique id for removal:

on_Delete(row: any){
            this.Partijen.Adressen.splice(this.Partijen.Adressen.findIndex((r) => (r.iAdresID === row.iAdresID)), 1);
    }

If you already have the row data stored in a variable like Partij, you can simplify the button's click event:

<button pButton type="button" label="Delete" class="buttonCSS" (click)="on_Delete(Partij)"></button>

It seems there may be confusion with your table setup as you're directly accessing the Adressen array by index, which might not be the ideal approach.

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

Utilizing reflection in Unity to dynamically convert a List into JSON format

I'm facing a complex situation and seeking advice to resolve it. Previously, I posted a question on Unity's saving functionalities which can be found here: Unity save everything (snapshot) Currently, I am attempting to serialize everything into ...

c#jsonlistunity-game-enginereflection

Retrieve JSON information from within the Scope

In my JSON data, I have the following values: {"minmax":["0.01","67.00"]} I am trying to retrieve this data using jQuery in the following way: $.getJSON("../../dados/opcoesMinMax.json", function(data) { var getM ...

jqueryjsonfunctioncallback

Executing API call utilizing the Request module within a node.js application

In my node.js app, I have a request call that looks like this: request({ url:chanURL, qs:chanProperties}, function(err, response, body) { if(err) { console.log(err); return; } body = JSON.parse(body); (function (body) { Objec ...

javascriptjsonnode.jsnode-request

Issue encountered in Flutter: jsonData condition failing as List<dynamic>

My current challenge involves retrieving data from a table called Collections in a local MySQL database. Below is the code snippet I am using: class CollectionsPage extends StatefulWidget { @override _CollectionsPageState createState() => _Collectio ...

jsonflutterdartflutter-listview

Using `await` inside an if block does not change the type of this expression

Within my code, I have an array containing different user names. My goal is to loop through each name, verify if the user exists in the database, and then create the user if necessary. However, my linter keeps flagging a message stating 'await' h ...

javascripttypescript

Java: The Art of Juggling JSON Data

After exploring various methods using different JSON libraries, I am struggling to find a convenient solution for converting to and from my JSON file during testing. The structure of the JSON file is as follows: [ { "LonelyParentKey": "Account", ...

javajsonmultidimensional-array

Refreshing MongoDB data by utilizing values from an object

I am facing a challenge with my MongoDB collection structure: [ { "stock": "GOOGLE", "price": 0 }, { "stock": "FACEBOOK", "price": 0 } ] On the other hand, I have a Stock_P ...

javascriptnode.jsmongodbtypescriptmongoose

Version 1.9.3 of Redux Toolkit is encountering an error stating that the 'push' property is not found on the type 'WritableDraft<CartState>'

Currently delving into Redux Toolkit using TypeScript and facing a roadblock that seems deceptively simple. Unfortunately, my current knowledge isn't enough to unravel this puzzle and I'm in need of some guidance. The issue arises with an error ...

typescriptreduxtoolkit

Import information from a SqlServer Database into a jQuery Full Calendar utilizing the capabilities of Codeigniter3

I've been dealing with this issue for quite some time now. I used to work with the same calendar in PHP, but since my project is in Codeigniter, it's not fitting properly. Therefore, I have switched to working with Codeigniter. Controller Code ...

jsonajaxfullcalendarcodeigniter-3fullcalendar-3

Is it possible to customize a VSCode extension to function exclusively with certain programming languages?

Lately, I added a new extension to my VSCode setup that has proven to be quite beneficial for my workflow. If you're interested, you can find this helpful extension at This Repository. It allows you to easily highlight the starting and ending syntax ...

ruby-on-railsrubytypescriptvisual-studio-code

Generate a commitment from the function

I know the basics of JavaScript Promise and promise chain, but I'm looking to deepen my understanding. For example, take a look at the method provided below. It's in TypeScript, but can be adjusted for JavaScript ES6. private InsertPersonInDB(p ...

javascriptangulartypescriptpromisees6-promise

Unexpected behavior with Angular Material's date validation functionality

Currently, I am working on a project involving the mat-datepicker component. The functionality allows users to enter a value and select a date using my code, which is functioning correctly. One key feature of this project is an update button that is initia ...

angularangular-materialangular8mat-datepicker

The interfaced JSON object did not return any defined value

I am working on implementing a pipe in Angular 9 that will handle the translation of my table words into different languages. To achieve this, I have set up a JSON file with key-value pairs for translation services and created corresponding interfaces for ...

jsonangular

Looking for a JSON Schema validation tool that works seamlessly in both browser and Node.js environments?

It appears that many libraries do not provide easy browser support for JSON Schema validation. Is there a dependable JSON Schema validator library that can be seamlessly loaded into the browser like other libraries? Additionally, it would be fantastic if ...

jsonjsonschemajson-schema-validatorajv

Can optional properties or defaults have a specific type requirement defined for them?

When defining a type for a function's input, I want to designate certain properties as required and others as optional: type Input = { // Required: url: string, method: string, // Optional: timeoutMS?: number, maxRedirects?: number, } In ...

typescript

Retrieving data in JSON format from BigQuery using the google-cloud-python library

I am utilizing the google-cloud-python library to query BigQuery in the following manner: client = bigquery.Client() query = """SELECT * FROM `{dataset}.{table}` WHERE id=@id LIMIT 1""".format(dataset=dataset, table=tab ...

pythonjsongoogle-bigquerygoogle-cloud-platform

Looking for a sublime plugin that will enhance your angular view template?

When using Sublime Text with Angular (2/4), everything works great until I'm working in the view template file. The interpolation doesn't offer auto-completion for class properties that support the view, unlike what I've seen in VS Code. Ar ...

angularsublimetext3

The application was not functioning properly due to an issue with the getSelectors() function while utilizing @ngrx/entity to

Currently, I am facing an issue with implementing a NgRx store using @ngrx/entity library. Despite Redux Devtools showing my collection loaded by Effect() as entities properly, I am unable to retrieve any data using @ngrx/entity getSelectors. Thus, it seem ...

angulartypescriptreduxngrx

I find that ChangeDetectionStrategy.OnPush does not function as anticipated

Exploring the performance boost of ChangeDetectionStrategy.OnPush in Angular 2 (detailed here) has been my recent focus. However, I've encountered an interesting scenario. In my code, I have the parent component AppComponent: @Component({ selector ...

angulartypescript

Creating a dynamic visual experience with Angular 2: How to implement multiple font colors

I have a text area which is connected to one string, with the default text color set to white. <textarea style="background-color: black;color:#fff;" [(ngModel)]="outputText"></textarea> The connected string contains multiple variables. retur ...

htmlcssangulartypescript