Deleting record in Ember

Ember Data
1

I have a table (a component) and a delete button in each row. When the the delete button is clicked the specific row should be deleted.

Tried the following code:

MyComponent.js

 import Ember from 'ember';

   export default Ember.Component.extend({
   actions:{
    deleteCartRecord(cartDetails){
        debugger;
        this.sendAction('deleteRecord',cartDetails);
    }
 }

});

In MyComponent.hbs

{{#each model.orderParts as |newCart|}} 
  <div class="card-wrapper col-lg-12 col-md-12">
     <div class="col-lg-2 col-md-2">
        <div class="order-id">{{newCart.partNumber}}</div>
       {{#if (gte newCart.promiseQty newCart.quantity)}}
    <div class="order-status delivered">{{env.APP.StockAvailable}}</div>
    {{else}} {{#if (gt newCart.promiseQty '0'(and (lt newCart.promiseQty newCart.quantity)))}}
    <div class="order-status intransit">{{env.APP.LowInStock}}</div>
    {{else}} {{#if (eq newCart.promiseQty '0')}}
    <div class="order-status outofstock">{{env.APP.OutofStock}}</div>
    {{/if}} {{/if}} {{/if}}
</div>
<div class="col-lg-3 col-md-3">
    <div class="item-header">Delivery Date</div>
    <div class="item-data">{{newCart.deliveryDate}}</div>
</div>
<div class="col-lg-2 col-md-2">
    <div class="item-header">Required Qty.</div>
    <div class="item-data">
        {{increse-required-quantity incresedQuantity=newCart.quantity}}
    </div>
</div>
<div class="col-lg-2 col-md-2">
    <div class="item-header">Unit Price</div>
    <div class="item-data">{{newCart.unitPrice}}</div>
</div>
<div class="col-lg-2 col-md-2">
    <div class="item-header">Total Price</div>
    <div class="item-data">{{newCart.partTotalPrice}}</div>
</div>
<div class="col-lg-1 col-md-1 button-colum"><button type="button" class="btn btn-danger" {{action "deleteCartRecord" model}}>Delete</button>             </div>
  </div>
 {{/each}}

My Controller

   import Ember from 'ember';
   export default Ember.Controller.extend({
     actions:{
        deleteRecord(data){
          debugger; 
            let confirmation = confirm("are you sure to delete");
            if(confirmation)
            {
               debugger;
               data.deleteRecord();
               data.save();

            }
       }
  }
});

The template file in which component is called

    <hr>
</div>

<div class="col-lg-12 col-md-12">
    <div class="checkout-summery-wrapper">
        <div class="total-label">Total</div>
        <div class="total">{{model.totalPrice}}</div>
        <!--<div class="tax-text">( Inclusive of all taxes )</div>-->
        <div class="place-order-button"><button type="button" class="btn siemens-btn">Place Order</button></div>
    </div>
</div>

<div class="col-lg-12 col-md-12">
    {{#if model.orderParts.isGeneric}}
    <div class="panel panel-default card-list-panel">
        <div class="panel-heading-cart col-lg-12 col-md-12">
            <div class="col-lg-11 col-md-11 heading">Generic Parts</div>
            <div class="col-lg-1 col-md-1"><a href='#' class="delete-all">Delete All</a></div>
        </div>
        <div class="panel-body">
            {{cart-record model = model}}
        </div>
    </div>
    {{/if}}
    {{#unless model.orderParts.isGeneric}}
    <div class="panel panel-default card-list-panel">
        <div class="panel-heading-cart col-lg-12 col-md-12">
            <div class="col-lg-11 col-md-11 heading">Hot Gas Path</div>
            <div class="col-lg-1 col-md-1"><a href='#' class="delete-all">Delete All</a></div>
        </div>
        <div class="panel-body">
            {{cart-record model = model deleteRecord=(action 'deleteRecord')}}
        </div>
    </div>
    {{/unless}}
</div>

MyRoute

 import Ember from 'ember';

  export default Ember.Route.extend({
     model: function()
     {
             return this.get('store').queryRecord('cart',{userId:1})
     }

  });

My Serializer

  import DS from 'ember-data';

  export default DS.JSONSerializer.extend(DS.EmbeddedRecordsMixin, {
       primaryKey: 'totalPrice',

       attrs: {
        orderParts:
       {
           serialize: 'records',
           deserialize: 'records'
       }

    }

 });

How can i delete data from the json API am getting an error with the above code it says

XMLHttpRequest cannot load http://localhost:2000/api/cart/%24608.68. Response for preflight has invalid HTTP status code 404.

am really new to ember plzz help

2

Hi,

(remark: I did not check your Ember code in detail)

could it be that in your API the PUT and/or OPTIONS HTTP requests are not enabled? (see Preflight requests)

Most probably you have to configure CORS the correct way in your backend.