Дублировать массив объектов при изменении динамического значения

Question

Я создаю небольшое маркетинговое приложение, в котором пользователь выбирает экран для размещения рекламы на нем. Далее идет поток, пользователь выбирает диапазон дат и получает от API все бесплатные экраны с доступными показами. Пользователь выбирает экран и добавляет их в корзину. На каждом экране есть данные с доступными показами.

Вот корзина стола

 |ID   | Available impressions (input) |
 |1000 |       5000                    |
 |1004 |       7855                    |
 |1098 |       9688                    |
 |1111 |       1022                    |
 total: 23565 (input field)

Это работает, как я ожидаю, и это нормально, я публикую это в API, и все в порядке.

КОД:

<table>
   <thead>
       <tr>
          <th>Id</th>
          <th>Available impressions</th>
       </tr>
   </thead>
   <tboda>
       <tr ng-repeat="item in myCartItems | unique: 'id'">
          <td>item.id</td>
          <td><input type="number" ng-model="item.available_imp" ng-blur="sendCustomSelectedImpressions(item.id, item.available_imp)" ng-max="item.available_imp"</td>
       </tr>
   </tbody>
 </table>

И я помещаю эти данные в массив

$scope.sendCustomSelectedImpressions = function(id, numberOfImpressions){
      $scope.myCartItems.push({
        'id': id,
        'campaignImpressions': numberOfImpressions
      });
}

Задача 1

Проблема в том, что если мы вводим новое значение в строке с показами, и перед отправкой в ​​API снова вводим новое значение, в моем json я не получаю только новое значение, я получаю все значения, введенные ранее, как в JSON ниже

{"campaign_items": [
{"id": 1000, "impressions": 5000},//duplicate, this is initial, i don't need this, i need new
{"id": 1004, "impressions": 7855},
{"id": 1098, "impressions": 9688},
{"id": 1111, "impressions": 1022},
{"id": 1000, "impressions": 6000}, //duplicate, when i try to input another number
{"id": 1000, "impressions": 4561}, //i only need this last i entered
]}

Как получить только тот ввод, который я ввел до отправки, без всего этого до, без дублирования ???

ЗАДАЧА 2

Для этой проблемы у меня все еще нет никакого кода, потому что мне нужно это сделать, но мне нужна помощь с логикой.

Если вы посмотрите на пример таблицы, вы увидите, у меня есть TOTAL, также поле ввода. Когда ng-таблица загружена, я суммирую все показы подряд и показываю общее количество. Это нормально. Каждый экран имеет различное максимальное общее количество, и если я ввожу другое число в общее поле, например, вместо 23565, я введу меньшее число 19000, мне нужно равномерно добавить ко всем выбранным экранам. Проблема здесь в том, что экран с ID 1111 имеет только 1022 показы, а экран с ID 9688 имеет 9688 показы. Для меня решение состоит в том, чтобы рассчитать, насколько в процентах изменяется первоначальное sum число, и когда я получаю результат, уменьшайте на тот же процент каждый показ экрана. Если у кого-то есть какое-либо другое решение или есть идея для кода, поделитесь с нами.

Еще раз спасибо

Answer 1

Я думаю, что для ПРОБЛЕМА 1 вам может не понадобиться выдвигать новые значения, вместо этого вы можете просто обновить $ scope.myCartItems.

$scope.sendCustomSelectedImpressions (id, numberOfImpressions) {
    if (!numberOfImpressions) return; // Check, if input is not empty (not undegined or null)
    $scope.myCartItems[id - 1].impressions = numberOfImpressions; // change existing object items
};

Я сделал простое приложение на стеке с примером (Angularjs + ES6). Надеюсь, это поможет:)

https://stackblitz.com/edit/angularjs-tn1zs9?embed=1&file=home/home.controller.js

Answer 2

Для вашей первой проблемы вы можете удалить объекты с этим идентификатором, прежде чем отправлять новые данные. Предполагая, что вы можете использовать функцию filter (в противном случае вам нужно выполнить цикл). Таким образом, вы удалите идентификатор, который будет вставлен в следующую инструкцию push.

$scope.sendCustomSelectedImpressions = function(id, numberOfImpressions){
      $scope.myCartItems = $scope.myCartItems.filter(item => item.id !== id);

      $scope.myCartItems.push({
        'id': id,
        'campaignImpressions': numberOfImpressions
      });
}