Calculating a property that yields the total sum of another property found on every model

Question

Calculating a property that yields the total sum of another property found on every model

In my cart model, I have items stored with item_id, item_name, and item_price properties like this:

[
    {
        "item_id": 1,
        "item_name":"Item 1",
        "item_price": 500
    },
    {
        "item_id": 2,
        "item_name": "Item 2",
        "item_price": 230
    },
    {
        "item_id": 3,
        "item_name": "Item 3",
        "item_price": 150
    }
]

To calculate the total cost of all items in the cart, I need to sum up the item_price property. This total will be displayed and then passed to ember data or an ajax call for completing a purchase.

I am attempting to use Ember's computed functionality to achieve this, but I may not completely understand how to aggregate data using computeds. Here is what I have tried:

totalDue: Ember.computed.sum('<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a6cbc9c2c3ca88e6c3c7c5ce88cfd2c3cb">[email protected]</a>_price')

However, the controller is returning a total of 0. I am currently utilizing ember version 2.2.0.

javascript ember.js ember-data computed-properties

Answer 1

Answer №1

If you want to achieve this task, follow these steps:

totalCost: Ember.computed('<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d9b4b6bdbcb5f799bcb8bab1f7b0adbcb4">[email protected]</a>_price', function() {
  const model = this.get('model');
  if (!model) {
    return 0;
  }

  let total = 0;
  model.forEach(item => total += Ember.get(item, 'item_price'));
  return total;
})

See working example here.

Answer 2

If you want to achieve this task, follow these steps:

totalCost: Ember.computed('<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d9b4b6bdbcb5f799bcb8bab1f7b0adbcb4">[email protected]</a>_price', function() {
  const model = this.get('model');
  if (!model) {
    return 0;
  }

  let total = 0;
  model.forEach(item => total += Ember.get(item, 'item_price'));
  return total;
})

See working example here.

Answer 3

Answer №2

If you want a concise solution, you can achieve the same result with this neat one-liner:

totalAmount: Ember.computed('<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b9e4e6edece50dc2ededebe5ecaaedc2e8">[email protected]</a>_price', function() {
  return this.get('model').mapBy('item_price').reduce((x, y) => x + y, 0);
})

View Live Demo

Answer 4

If you want a concise solution, you can achieve the same result with this neat one-liner:

totalAmount: Ember.computed('<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b9e4e6edece50dc2ededebe5ecaaedc2e8">[email protected]</a>_price', function() {
  return this.get('model').mapBy('item_price').reduce((x, y) => x + y, 0);
})

View Live Demo

Answer 5

Answer №3

Here's an alternative way to achieve the same result:

const shoppingCart = Ember.Controller.extend({
      items: [
        {
          "item_id": 1,
          "item_name":"Item 1",
          "item_price": 500
        },
        {
          "item_id": 2,
          "item_name": "Item 2",
          "item_price": 230
        },
        {
          "item_id": 3,
          "item_name": "Item 3",
          "item_price": 150
        }
      ],

      priceList: Ember.computed.mapBy('items', 'item_price'),
      total: Ember.computed.sum('priceList')
    });

Answer 6

Here's an alternative way to achieve the same result:

const shoppingCart = Ember.Controller.extend({
      items: [
        {
          "item_id": 1,
          "item_name":"Item 1",
          "item_price": 500
        },
        {
          "item_id": 2,
          "item_name": "Item 2",
          "item_price": 230
        },
        {
          "item_id": 3,
          "item_name": "Item 3",
          "item_price": 150
        }
      ],

      priceList: Ember.computed.mapBy('items', 'item_price'),
      total: Ember.computed.sum('priceList')
    });

Calculating a property that yields the total sum of another property found on every model

Answer №1

Answer №2

Answer №3

Similar questions

Embed JavaScript locally within an iframe HTML

IE throws an exception when attempting to use Canvas as it is not supported

Tips for relocating a div panel below all other div panels when a button is clicked with JQuery and CSS

What steps can I take to incorporate Waze data into my website?

Iterate through a listbox and append the content to a textbox using JavaScript

Guide to fixing Vue app crashes caused by Web Sockets error

Converting information from one form to another using Typescript

Exploring the contrast between RFC and RFCE in the realm of ReactJS

Is there a way to solve this problem by creating a loop for the code?

The navbar toggler icon is not displaying

Issues arise when using ng-repeat in conjunction with ng-click

Navigate through JSON data to uncover the tree structure path

The functionality of Vue's keep-alive feature seems to be malfunctioning within Quasar, as the mounted hook is consistently triggered when using

Checkbox selection and display: Check the box to reveal its value in a div, along with a close button for

It seems like the texture may not have been created correctly

Using jQuery to dynamically add or remove table rows based on user inputs

JavaScript CompleteLink message

Visit the map only after the promises have been fulfilled

The "Temporary Text" feature in an HTML form

`Troubleshooting odd behavior with date selection in AngularJS`