JSFiddle - React, Tailwind, and code Playground
update JSON or append json
HTML
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div ng-controller="shop" class="container">
<button ng-click="myFunction('BRUSH 1')" class="btn btn-sm btn-primary">BRUSH 1</button>
<button ng-click="myFunction('NEW ITEM')" class="btn btn-sm btn-danger">NEW PRODUCT</button>
<button ng-click="myFunction('NEW ITEM 3')" class="btn btn-sm btn-success">NEW PRODUCT 3</button>
<span class="badge">{{getTotalCount()}}</span>
<pre>{{basket | json}}</pre>
</div>
JavaScript
var myApp = angular.module('myApp', []);
myApp.controller('shop', function($scope,$timeout,$window) {
'use strict';
//$scope.showDiv = true;
//$window.localStorage.setItem("testcart", []);
$scope.basket = [{
"name": "BRUSH",
"qty": 1
}, {
"name": "BRUSH",
"qty": 1
}, {
"name": "BRUSH 1",
"qty": 4
}];
$scope.myFunction= function (x) {
//$scope.basket = localStorage.getItem('testcart') != null ? localStorage.getItem('testcart') : [];
var found = false;
for (var i = 0; i < $scope.basket.length; i++) {
var itemName = $scope.basket[i];
if (itemName.name == x) {
found = true;
itemName.qty = itemName.qty +1
}
}
//alert(itemName.qty)
if (!found) {
var item = {
name: x,
qty: 1
};
$scope.basket.push(item);
}
//alert(JSON.stringify( $scope.basket )); // save JSON instead
}
$scope.getTotalCount = function (sku) {
var count = 0;
for (var i = 0; i < $scope.basket.length; i++) {
var item = $scope.basket[i];
if (sku == null || item.sku == sku) {
count += (item.qty);
}
}
return count;
}
});