将数组中的相同json属性分组

时间:2015-05-05 07:38:40

标签: javascript arrays json angularjs

我将解释我需要什么..我有一个JSON,我在其中做一些操作,包括动态创建一些输入。这个例子在这里:

jsfiddle

实际上当我创建一个输入(只是点击列表中的项目,例如“asd1”)时,它会用新值填充一个新的JSON。我需要的是将相同的项目分组到一个唯一的数组中。所以,这是它现在创建的JSON:

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

这应该是:

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

我已将attrValue分组到一个数组中,因为我从“asd1”attrname创建了两次相同的输入。我怎么能这样做?顺便提一下这里有一些代码:

使用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:我使用Angularjs

1 个答案:

答案 0 :(得分:0)

这可以通过简单使用哈希来完成。请注意,我使用jQuery复制对象,以便我不对原始对象进行更改。您可以使用 private Node current=head;

angular.extend
var obj = {  
   "objects":[  
      {  
         "name":"firstObj",
         "attributes":[  
            {  
               "attrname":"asd1",
               "attrValue":"aaaDDD",
               "attrType":"text",
               "clicks":1
            },
            {  
               "attrname":"asd1",
               "attrValue":"qwe",
               "attrType":"text",
               "clicks":2
            }
         ]
      }
   ]
}

var attrs = obj.objects[0].attributes;
var newAttrs = [];
var nameHash = {};
for(var i=0; i<attrs.length; i++){
    var name = attrs[i].attrname;
    if(nameHash[name]){
        nameHash[name].attrValue.push(attrs[i].attrValue);
    } else {
        var newObj = $.extend({}, attrs[i]);
        newObj.attrValue = [newObj.attrValue];
        newAttrs.push(newObj);
        nameHash[name] = newObj;
    }

}

console.log('newAttrs : ', newAttrs)