在一个阵列组相同的JSON属性 [英] Group same json attribute in an array
本文介绍了在一个阵列组相同的JSON属性的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我将解释什么，我需要..我有一个JSON中，我做了一些操作，包括动态创建一些输入。这个例子是在这里：
其实，当我创建一个输入（只是敲击在列表中的项目，如asd1），它填补了新的JSON的新值。我需要的是组中的唯一阵列相同的项目。所以，这是JSON它创建了现在：
{
物：
{
名：firstObj
属性：
{
attrname：asd1，
attrValue：aaaDDD，
attrType：文本，
点击：1
}，
{
attrname：asd1，
attrValue：QWE，
attrType：文本，
点击：2
}
]
}
]
}
这是它应该是什么：
{
物：
{
名：firstObj
属性：
{
attrname：asd1，
attrValue：[
aaaDDD
QWE
]
attrType：文本，
点击：2
}
]
}
]
}
我在一个数组分组 attrValue ，因为我创造了从asd1 attrname 两次相同的输入。我怎么能这样做呢？这是由一些方式code：
使用Javascript：
VAR对myApp = angular.module（'对myApp'，[]）;myApp.controller（myController的，[$范围，$ HTTP
功能（$范围，$ HTTP）{ $ scope.getItems = {
数据：
{
标签：第一次，
物：
{
名：firstObj
属性：
{
attrname：asd1，
attrValue：，
attrType：文本
}，
{
attrname：asd2，
attrValue：，
attrType：文本
}
]
}
]
钥匙：波拉
}，
{
标签：秒，
物：
{
名：secondObj
属性：
{
attrname：ASD
attrValue：，
attrType：文本
}，
{
attrname：asd3，
attrValue：，
attrType：文本
}
]
}
]
钥匙：2
}
]};
$ scope.filterSelected = $ scope.getItems.data [0] .objects; $ scope.myNewArray = {
对象： ]
} $ scope.createjson =功能（属性，物品）{
变种物镜= {};
obj.name = angular.copy（属性）;
obj.attributes = [];
obj.attributes.push（angular.copy（项目））;
返回OBJ;
} $ scope.checkIfAttributeExists =功能（属性）{
对于（VAR I = 0; I＆LT; $ scope.myNewArray.objects.length;我++）{
如果（$ scope.myNewArray.objects [I] [名称] ==属性）{
返回我;
}
}
返回-1;
} $ scope.pushItems =功能pushItems（属性，物品）{
如果（items.clicks）{
items.clicks ++
}其他{
items.clicks = 1
}
VAR指数= $ scope.checkIfAttributeExists（属性）;
如果（指数== -1）{
VAR OBJ = $ scope.createjson（属性，项目）;
$ scope.myNewArray.objects.push（angular.copy（OBJ））;
}
其他{
$ scope.myNewArray.objects [指数] .attributes.push（angular.copy（项目））;
}
//console.log($scope.myNewArray）;
} //删除功能
$ scope.removeItem =功能（属性）{
attribute.clicks--;
VAR IDX = $ scope.myNewArray.objects.indexOf（属性）;
$ scope.myNewArray.objects.splice（IDX，1）;
} $ scope.showNewJson =功能（）{
返回$ scope.myNewArray;
}
}]）;
HTML
＆LT; DIV NG-应用='对myApp'NG控制器='myController的'＆GT; ＆LT; DIV数据-NG-重复=＆GT由$指数myNewArray.objects轨道项目;
＆LT; DIV数据-NG-重复=ATTR在item.attributes轨道由$指数＆GT;
＆LT; DIV NG-IF =attr.attrType =='文本'＆GT;
＆LT;输入ID =形式-F {{$指数}}类型=文本占位符={{attr.attrname}}数据-NG-模式=attr.attrValue/＆GT; ＆LT;按钮NG点击=为removeItem（attr）使用＆GT;删除＆LT; /按钮＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; DIV数据-NG-重复=对象getItems.data＆GT;
＆LT; DIV数据-NG-重复=ATT在object.objects＆GT;
＆LT; UL NG重复=数据att.attributes＆GT;
＆LT;立GT;
＆下;一个纳克单击=pushItems（att.name，数据）＆GT; {{data.attrname}}＆下; / A＆GT;
＆LT;跨度＆GT;（{{data.clicks}}）LT; / SPAN＆GT;
＆LT; /李＆GT;
＆LT; / UL＆GT;
＆LT; / DIV＆GT; ＆LT; / DIV＆GT;
＆所述p为H.; {{showNewJson（）}}＆下; / P＆GT;
＆LT; / DIV＆GT;
PS：我用Angularjs
解决方案
我这么多想，使其更容易，横空出世相当困难： - ）
第一：我改变的标记输出文本框
＆LT; DIV数据-NG-重复=项myNewArray.objects跟踪由$指数＆GT;
＆LT; DIV数据-NG-重复=ATTR在item.attributes轨道由$指数＆GT;
＆LT; DIV NG-IF =attr.attrType =='文本'＆GT;
＆LT; DIV数据-NG-重复=attrVal在attr.attrValues跟踪由$指数＆GT;
＆LT;输入ID =形式-F {{$指数}}类型=文本占位符={{attr.attrname}}数据-NG-模式=attr.attrValues [$指数]/＆GT;
＆LT;按钮NG点击=为removeItem（项目，ATTR，$指数）＆GT;删除＆LT; /按钮＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
每个属性值，现在又增加了文本框
二：添加一些功能，寻找元素： findAttributesInGetItemsByName 的和的 findElemByField 的
第三：变化的的removeItem 的新构造函数
$ scope.removeItem =函数（项目，ATTR，$指数）{
VAR OBJ = findAttributesInGetItemsByName（$ scope.getItems.data，项目。
如果（OBJ）{
VAR objAttr = findElemByField（obj.attributes，attrname，attr.attrname）;
如果（objAttr）{
objAttr.clicks - = 1;
如果删除objAttr.clicks（objAttr.clicks！）;
}
}
attr.clicks - = 1;
attr.attrValues.splice（$指数，1）;
如果（！attr.attrValues.length）{
VAR IDX = objects.indexOf（项目）;
objects.splice（IDX，1）;
}
}
在去年的变化的 pushItems 的新结构
$ scope.pushItems =功能pushItems（属性，物品）{
的console.log（项目属性）;
items.clicks =（items.clicks || 0）+ 1;
currentObj = findElemByField（对象，名，属性）;
如果（currentObj）{
VAR curAttr = findElemByField（currentObj.attributes，attrname，items.attrname）;
如果（curAttr）{
curAttr.attrValues.push（）;
curAttr.clicks + = 1;
}其他{
currentObj.attributes.push（createItems（项目））;
}
}其他{
objects.push（{
名称：属性，
属性：[
createItems（项目）
]
}）;
}
};
code似乎难看，但它工作:-)
\r
\r\r
\r VAR对myApp = angular.module（'对myApp'，[]）;\r
\r
myApp.controller（myController的，[$范围，$ HTTP\r
功能（$范围，$ HTTP）{\r
\r
$ scope.getItems = {\r
数据：[{\r
标签：第一次，\r
对象：[{\r
名：firstObj\r
属性：[{\r
attrname：asd1，\r
attrValue：，\r
attrType：文本\r
}，{\r
attrname：asd2，\r
attrValue：，\r
attrType：文本\r
}]\r
}]，\r
钥匙：波拉\r
}，{\r
标签：秒，\r
对象：[{\r
名：secondObj\r
属性：[{\r
attrname：ASD\r
attrValue：，\r
attrType：文本\r
}，{\r
attrname：asd3，\r
attrValue：，\r
attrType：文本\r
}]\r
}]，\r
钥匙：2\r
}]\r
\r
};\r
\r
功能findAttributesInGetItemsByName（getItemsData，名）{\r
对于（VAR I = 0，LEN = getItemsData.length; I＆LT; LEN，我++）{\r
对于（VAR J = 0，jlen = getItemsData [I] .objects.length; J＆LT; jlen; J ++）{\r
变种O = getItemsData [I] .objects [J]。\r
如果（o.name == name）返回O;\r
}\r
}\r
返回null;\r
}\r
\r
$ scope.filterSelected = $ scope.getItems.data [0] .objects;\r
\r
$ scope.myNewArray = {\r
对象：\r
\r
]\r
};\r
\r
功能findElemByField（对象，领域，价值）{\r
对于（VAR I = 0，LEN = objects.length; I＆LT; LEN，我++）{\r
如果（对象[I] [现场] ==值）返回对象[I]\r
}\r
返回null;\r
}\r
\r
功能createItems（项目）{\r
返回{\r
attrname：items.attrname，\r
attrType：文本，\r
点击：1，\r
attrValues：[]\r
}\r
}\r
\r
VAR对象= $ scope.myNewArray.objects;\r
$ scope.pushItems =功能pushItems（属性，物品）{\r
的console.log（项目属性）;\r
items.clicks =（items.clicks || 0）+ 1;\r
currentObj = findElemByField（对象，名，属性）;\r
如果（currentObj）{\r
VAR curAttr = findElemByField（currentObj.attributes，attrname，items.attrname）;\r
如果（curAttr）{\r
curAttr.attrValues.push（）;\r
curAttr.clicks + = 1;\r
}其他\r
currentObj.attributes.push（createItems（项目））;\r
}其他{\r
objects.push（{\r
名称：属性，\r
属性：[\r
createItems（项目）\r
]\r
}）\r
}\r
\r
};\r
\r
//删除功能\r
$ scope.removeItem =函数（项目，ATTR，$指数）{\r
VAR OBJ = findAttributesInGetItemsByName（$ scope.getItems.data，item.name）;\r
如果（OBJ）{\r
VAR objAttr = findElemByField（obj.attributes，attrname，attr.attrname）;\r
如果（objAttr）{\r
objAttr.clicks - = 1;\r
如果删除objAttr.clicks（objAttr.clicks！）;\r
}\r
}\r
attr.clicks - = 1;\r
attr.attrValues.splice（$指数，1）;\r
如果（！attr.attrValues.length）{\r
VAR IDX = objects.indexOf（项目）;\r
objects.splice（IDX，1）;\r
}\r
}\r
\r
$ scope.showNewJson =功能（）{\r
返回$ scope.myNewArray;\r
}\r
}\r
]）; \r
＆LT;脚本SRC =https://ajax.googleapis.com/ajax /libs/angularjs/1.2.23/angular.js\"></script>\r
＆LT; DIV NG-应用='对myApp'NG控制器='myController的'＆GT;\r
\r
＆LT; DIV数据-NG-重复=＆GT由$指数myNewArray.objects轨道项目;\r
＆LT; DIV数据-NG-重复=ATTR在item.attributes轨道由$指数＆GT;\r
＆LT; DIV NG-IF =attr.attrType =='文本'＆GT;\r
＆LT; DIV数据-NG-重复=attrVal在attr.attrValues跟踪由$指数＆GT;\r
＆LT;输入ID =形式-F {{$指数}}类型=文本占位符={{attr.attrname}}数据-NG-模式=attr.attrValues [$指数]/＆GT;\r
＆LT;按钮NG点击=为removeItem（项目，ATTR，$指数）＆GT;删除＆LT; /按钮＆GT;\r
＆LT; / DIV＆GT;\r
＆LT; / DIV＆GT;\r
＆LT; / DIV＆GT;\r
＆LT; / DIV＆GT;\r
＆LT; DIV数据-NG-重复=对象getItems.data＆GT;\r
＆LT; DIV数据-NG-重复=ATT在object.objects＆GT;\r
＆LT; UL NG重复=数据att.attributes＆GT;\r
＆LT;立GT;\r
＆所述; A HREF =＃纳克点击=pushItems（att.name，数据）＆GT; {{data.attrname}}＆下; / A＆GT;\r
＆LT;跨度＆GT;（{{data.clicks}}）LT; / SPAN＆GT;\r
＆LT; /李＆GT;\r
＆LT; / UL＆GT;\r
＆LT; / DIV＆GT;\r
\r
＆LT; / DIV＆GT;\r
\r
\r
＆所述p为H.; {{showNewJson（）}}＆下; / P＆GT;\r
＆LT; / DIV＆GT; \r
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:
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
解决方案
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>
这篇关于在一个阵列组相同的JSON属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
