javascript - Group same json attribute in an array

Question

I will explain what do I need.. I have a JSON in which I do some operations including creating some input dynamically. The example is here:

jsfiddle

Actually when I create an input (just tapping over an item of the list, for example "asd1"), it fill a new JSON with the new values. What I need is to group the same item in an unique array. So, this is the JSON it creates right now:

{  
   "objects":[  
      {  
         "name":"firstObj",
         "attributes":[  
            {  
               "attrname":"asd1",
               "attrValue":"aaaDDD",
               "attrType":"text",
               "clicks":1
            },
            {  
               "attrname":"asd1",
               "attrValue":"qwe",
               "attrType":"text",
               "clicks":2
            }
         ]
      }
   ]
}

This is what it should be:

{  
   "objects":[  
      {  
         "name":"firstObj",
         "attributes":[  
            {  
               "attrname":"asd1",
               "attrValue":[  
                  "aaaDDD",
                  "qwe"
               ],
               "attrType":"text",
               "clicks":2
            }
         ]
      }
   ]
}

I have grouped the attrValue in an array because I created the same input two times from "asd1" attrname. How could I do it? Here is some code by the way:

Javascript:

var myApp = angular.module('myApp',[]);

myApp.controller("mycontroller", ["$scope", "$http",
    function($scope, $http){

        $scope.getItems = {
    "data": [
        {
            "label": "first",
            "objects": [
                {
                    "name": "firstObj",
                    "attributes": [
                        {
                            "attrname": "asd1",
                            "attrValue": "",
                            "attrType":"text"
                        },
                        {
                            "attrname": "asd2",
                            "attrValue": "",
                            "attrType":"text"
                        }
                    ]
                }
            ],
            "key": "bolla"
        },
        {
            "label": "second",
            "objects": [
                {
                    "name": "secondObj",
                    "attributes": [
                        {
                            "attrname": "asd",
                            "attrValue": "",
                            "attrType":"text"
                        },
                        {
                            "attrname": "asd3",
                            "attrValue": "",
                            "attrType":"text"
                        }
                    ]
                }
            ],
            "key": "2"
        }
    ]

};
    $scope.filterSelected = $scope.getItems.data[0].objects;

        $scope.myNewArray = {
            objects: [

            ]
        }

        $scope.createjson = function(attribute, items) {
            var obj = {};
            obj.name = angular.copy(attribute);
            obj.attributes = [];
            obj.attributes.push(angular.copy(items));
            return obj;
        }

        $scope.checkIfAttributeExists = function(attribute) {        
            for(var i=0; i<$scope.myNewArray.objects.length; i++) {                
                if($scope.myNewArray.objects[i]["name"] == attribute) {
                    return i;
                }
            }
            return -1;
        }

        $scope.pushItems = function pushItems(attribute, items) {
            if (items.clicks) {
                items.clicks++
            } else {
                items.clicks = 1
            }
            var index = $scope.checkIfAttributeExists(attribute);
            if(index == -1) {
                var obj = $scope.createjson(attribute, items);
                $scope.myNewArray.objects.push(angular.copy(obj));
            }
            else {
                $scope.myNewArray.objects[index].attributes.push(angular.copy(items));
            }


            //console.log($scope.myNewArray);
        }

        // remove function
    $scope.removeItem=function(attribute){
        attribute.clicks--;
        var idx = $scope.myNewArray.objects.indexOf(attribute);
        $scope.myNewArray.objects.splice(idx, 1);
    }

        $scope.showNewJson = function() {
            return $scope.myNewArray;
        }
}]);

HTML:

<div ng-app='myApp' ng-controller='mycontroller'>

    <div data-ng-repeat="item in myNewArray.objects track by $index">
        <div data-ng-repeat="attr in item.attributes track by $index">
        <div ng-if="attr.attrType == 'text'" >
            <input id="form-f{{$index}}" type="text" placeholder="{{attr.attrname}}" data-ng-model="attr.attrValue"/> <button ng-click="removeItem(attr)">Remove</button>
        </div>
        </div>
    </div>
    <div data-ng-repeat="object in getItems.data">
        <div data-ng-repeat="att in object.objects">
            <ul ng-repeat="data in att.attributes">
                <li>
                    <a ng-click="pushItems(att.name, data)">{{data.attrname}}</a>
                    <span>({{data.clicks}})</span>
                </li>
            </ul>
        </div>

    </div>


    <p>{{showNewJson()}}</p>
</div>

PS: I use Angularjs

Answer 1

I so much wanted to make it easier, that turned out quite difficult :-)

First: i change markup for output textboxes

<div data-ng-repeat="item in myNewArray.objects track by $index">
  <div data-ng-repeat="attr in item.attributes track by $index">
    <div ng-if="attr.attrType == 'text'">
      <div data-ng-repeat="attrVal in attr.attrValues track by $index">
        <input id="form-f{{$index}}" type="text" placeholder="{{attr.attrname}}" data-ng-model="attr.attrValues[$index]" />
        <button ng-click="removeItem(item,attr, $index)">Remove</button>
      </div>
    </div>
  </div>
</div>

now added text box for every attribute value

Second: add some functions for finding elements: findAttributesInGetItemsByName and findElemByField

Third: change removeItem function for new structure

$scope.removeItem = function(item, attr, $index) {
    var obj = findAttributesInGetItemsByName($scope.getItems.data, item.    
    if (obj) {
        var objAttr = findElemByField(obj.attributes, "attrname", attr.attrname);
        if (objAttr) {
            objAttr.clicks -= 1;
            if (!objAttr.clicks) delete objAttr.clicks;
        }
    }
    attr.clicks -= 1;
    attr.attrValues.splice($index, 1);
    if (!attr.attrValues.length) {
        var idx = objects.indexOf(item);
        objects.splice(idx, 1);
    }
}

at last change pushItems for new structure

$scope.pushItems = function pushItems(attribute, items) {
    console.log(items, attribute);
    items.clicks = (items.clicks || 0) + 1;
    currentObj = findElemByField(objects, "name", attribute);
    if (currentObj) {
        var curAttr = findElemByField(currentObj.attributes, "attrname", items.attrname);
        if (curAttr) {
            curAttr.attrValues.push("");
            curAttr.clicks += 1;
        } else {
            currentObj.attributes.push(createItems(items));
        }
    } else {
        objects.push({
            name: attribute,
            attributes: [
                createItems(items)
            ]
        });
    }
};

Code seems ugly, but it works :-)

var myApp = angular.module('myApp', []);

myApp.controller("mycontroller", ["$scope", "$http",
  function($scope, $http) {

    $scope.getItems = {
      "data": [{
        "label": "first",
        "objects": [{
          "name": "firstObj",
          "attributes": [{
            "attrname": "asd1",
            "attrValue": "",
            "attrType": "text"
          }, {
            "attrname": "asd2",
            "attrValue": "",
            "attrType": "text"
          }]
        }],
        "key": "bolla"
      }, {
        "label": "second",
        "objects": [{
          "name": "secondObj",
          "attributes": [{
            "attrname": "asd",
            "attrValue": "",
            "attrType": "text"
          }, {
            "attrname": "asd3",
            "attrValue": "",
            "attrType": "text"
          }]
        }],
        "key": "2"
      }]

    };

    function findAttributesInGetItemsByName(getItemsData, name) {
      for (var i = 0, len = getItemsData.length; i < len; i++) {
        for (var j = 0, jlen = getItemsData[i].objects.length; j < jlen; j++) {
          var o = getItemsData[i].objects[j];
          if (o.name == name) return o;
        }
      }
      return null;
    }

    $scope.filterSelected = $scope.getItems.data[0].objects;

    $scope.myNewArray = {
      objects: [

      ]
    };

    function findElemByField(objects, field, value) {
      for (var i = 0, len = objects.length; i < len; i++) {
        if (objects[i][field] == value) return objects[i];
      }
      return null;
    }

    function createItems(items) {
      return {
        attrname: items.attrname,
        attrType: "text",
        clicks: 1,
        attrValues: [""]
      }
    }

    var objects = $scope.myNewArray.objects;
    $scope.pushItems = function pushItems(attribute, items) {
      console.log(items, attribute);
      items.clicks = (items.clicks || 0) + 1;
      currentObj = findElemByField(objects, "name", attribute);
      if (currentObj) {
        var curAttr = findElemByField(currentObj.attributes, "attrname", items.attrname);
        if (curAttr) {
          curAttr.attrValues.push("");
          curAttr.clicks += 1;
        } else
          currentObj.attributes.push(createItems(items));
      } else {
        objects.push({
          name: attribute,
          attributes: [
            createItems(items)
          ]
        })
      }

    };

    // remove function
    $scope.removeItem = function(item, attr, $index) {
      var obj = findAttributesInGetItemsByName($scope.getItems.data, item.name);
      if (obj) {
        var objAttr = findElemByField(obj.attributes, "attrname", attr.attrname);
        if (objAttr) {
          objAttr.clicks -= 1;
          if (!objAttr.clicks) delete objAttr.clicks;
        }
      }
      attr.clicks -= 1;
      attr.attrValues.splice($index, 1);
      if (!attr.attrValues.length) {
        var idx = objects.indexOf(item);
        objects.splice(idx, 1);
      }
    }

    $scope.showNewJson = function() {
      return $scope.myNewArray;
    }
  }
]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.js"></script>
<div ng-app='myApp' ng-controller='mycontroller'>

  <div data-ng-repeat="item in myNewArray.objects track by $index">
    <div data-ng-repeat="attr in item.attributes track by $index">
      <div ng-if="attr.attrType == 'text'">
        <div data-ng-repeat="attrVal in attr.attrValues track by $index">
          <input id="form-f{{$index}}" type="text" placeholder="{{attr.attrname}}" data-ng-model="attr.attrValues[$index]" />
          <button ng-click="removeItem(item,attr, $index)">Remove</button>
        </div>
      </div>
    </div>
  </div>
  <div data-ng-repeat="object in getItems.data">
    <div data-ng-repeat="att in object.objects">
      <ul ng-repeat="data in att.attributes">
        <li>
          <a href="#" ng-click="pushItems(att.name, data)">{{data.attrname}}</a>
          <span>({{data.clicks}})</span>
        </li>
      </ul>
    </div>

  </div>


  <p>{{showNewJson()}}</p>
</div>