Removing lines from json object with angular or js

Question

I got this nifty little list on my page, where you press the "+" to add a new line (that was easy with push) and remove the lines with the "X" which I dont know how to do.

My JSON structure:

 "priceExtra" : [
    {
        "price" : NumberInt(2330), 
        "calc" : "1 x 2330", 
        "name" : "Foo price"
    }, 
    {
        "price" : NumberInt(5000), 
        "calc" : "2 x 2500", 
        "name" : "Baa price"
    } 
    {
        "price" : NumberInt(300), 
        "calc" : "1 x ฿300", 
        "name" : "Check-out full Cleaning"
    }
]

My code:

//
// Add extra line
//
vm.addLine = () => {    
    vm.priceExtra.push(
        {
            name  : "", 
            calc  : "", 
            price : 0
        }
    ) 
}

//
// Remove line
//
vm.delLine = () => {    

}

Problem is that I dont really have any unique keys in the priceExtra array, even the "price" could be duplicate on several lines.

How could I do this?

Ohh forgot to add the HTML

<tr style="height:38px;" ng-repeat="extraLine in vm.priceExtra">
    <td class="book-mid" style="width:50%;" colspan="2">
        <input type="text" ng-model="extraLine.name" id="lineName" class="book-field book-field-slim ng-pristine ng-valid ng-not-empty ng-touched" aria-invalid="false" data-ng-change="vm.changeRent()">
    </td>
    <td class="book-mid-right" style="width:30%;">
        <input type="text" ng-model="extraLine.calc" id="lineCalc" class="book-field book-right book-field-slim ng-pristine ng-valid ng-not-empty ng-touched" aria-invalid="false" data-ng-change="vm.changeRent()">
    </td>
    <td class="book-mid-right" style="width:15%;">
        <input type="text" ng-model="extraLine.price" id="lineprice" class="book-field book-right ng-pristine ng-valid ng-not-empty ng-touched" aria-invalid="false" data-ng-change="vm.changeTotal()">
    </td>
    <td style="width:5%; text-align:right; padding-left:4px;">
        <button class="book-button book-text-button col-std-gray" ng-click="vm.newTenant=false">
            <md-icon class="material-icons book-material" aria-label="Close">close</md-icon>
        </button>
    </td>
</tr>

dev8080 · Accepted Answer · 2017-07-22 19:09:17Z

2

Take the index in your ng-repeat using $index:

...
<td style="width:5%; text-align:right; padding-left:4px;">
    <button class="book-button book-text-button col-std-gray" ng-click="vm.newTenant=false; vm.delLine($index);">
        <md-icon class="material-icons book-material" aria-label="Close">close</md-icon>
    </button>
</td>
...

And use this:

vm.delLine = (index) => {    
    vm.priceExtra.splice(index,1);
}

edited Jul 22, 2017 at 19:09

answered Jul 22, 2017 at 19:02

dev8080

4,0051 gold badge14 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

torbenrudgaard Over a year ago

dev, how would you get the index? I just added the HTML to my question. How would you go about sending the index to delLine?

dev8080 Over a year ago

Like this: ng-click= "delLine($index)"

Collectives™ on Stack Overflow

Removing lines from json object with angular or js

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related