2017-08-03 59 views
-1

我正在使用OpenLayers 3并正在制作弹出窗口。我想通过创建子数组来组织从sql视图获得的数组。我一直在寻找树和$ .map函数,但我仍然无法正确组织数据,因为来自数据库的父/子关系在视图中丢失。重组数组javascript

这是数据的一个例子(请注意,这是动态的;所述阵列将与每个请求不同):

var list = [ 
{samplename: "samp1", chemicalname: "foo1", result: 16, qualifier: "X"}, 
{samplename: "samp1", chemicalname: "foo", result: 10, qualifier: "X"}, 
{samplename: "samp1", chemicalname: "foo1", result: 109, qualifier: "X"}, 
{samplename: "samp1", chemicalname: "foo", result: 418, qualifier: "A"}, 
{samplename: "samp2", chemicalname: "foo1", result: 411, qualifier: "AU"}, 
{samplename: "samp2", chemicalname: "foo", result: 4, qualifier: "Z"}, 
{samplename: "samp2", chemicalname: "foo1", result: 1, qualifier: "XY"}, 
{samplename: "samp3", chemicalname: "foo1", result: 100, qualifier: "X"}, 
{samplename: "samp3", chemicalname: "foo", result: 140, qualifier: "AX"} 
{samplename: "samp4", chemicalname: "foo", result: 1478, qualifier: "XA"} 
]; 

这是我迄今为止:

  pixel = map.getEventPixel(evt.originalEvent); 
      map.forEachFeatureAtPixel(pixel, function (feature, layer) { 
      var featureprops = feature.getProperties(); 
      var array = $.map(featureprops, function(value, index) { 
return {name:index, value:value}; 
}); 
console.log(array); 

Object.defineProperty(Array.prototype, 'group', { 
    enumerable: false, 
    value: function (key) { 
    var map = {}; 
    this.forEach(function (e) { 
     if(e.name=='chemical_name') { 
     var k = key(e); 
     map[k] = map[k] || []; 
     map[k].push(e); 
    } 
    if(e.name=='result_numeric') { 
     var k = key(e); 
     map[k] = map[k] || []; 
     map[k].push(e); 
    } 
    if(e.name=='lab_qualifiers') { 
     var k = key(e); 
     map[k] = map[k] || []; 
     map[k].push(e); 
    } 
    }); 
    return Object.keys(map).map(function (k) { 
     return {key: k, data: map[k]}; 
    }); 
    } 
}); 

var newArray = array.group(function (item) { 
    return item.chemical_name; 
}); 
console.log(newArray); 
//other code follows 

有没有更有效的方法来建立这个?此外,此功能现在仅返回第一个功能的属性。我需要为每个样本构建数组,并根据每个独特样本进行分组。

输出我希望会是这样的

{ 
name: 'samp1', 
results: [{ 
     key:'chemicalname', 
     value: foo1 
    },{ 
     key: 'result', 
     value: 16 
    },{ 
     key: 'qualifier', 
     value: 'X' 
     },{ 
     key:'chemicalname', 
     value: foo 
    },{ 
     key: 'result', 
     value: 10 
    },{ 
     key: 'qualifier', 
     value: 'X' 
     },{ 
     key:'chemicalname', 
     value: foo1 
    },{ 
     key: 'result', 
     value: 109 
    },{ 
     key: 'qualifier', 
     value: 'X' 
     },{ 
     key:'chemicalname', 
     value: foo 
    },{ 
     key: 'result', 
     value: 418 
    },{ 
     key: 'qualifier', 
     value: 'A' 
     }], 
name: 'samp2', 
results: [{   
     key:'chemicalname', 
     value: foo1 
    },{ 
     key: 'result', 
     value: 411 
    },{ 
     key: 'qualifier', 
     value: 'AU' 
     },{ 
     key:'chemicalname', 
     value: foo 
    },{ 
     key: 'result', 
     value: 4 
    },{ 
     key: 'qualifier', 
     value: 'Z' 
     },{ 
     key:'chemicalname', 
     value: foo1 
    },{ 
     key: 'result', 
     value: 1 
    },{ 
     key: 'qualifier', 
     value: 'XY' 
     } 
}], 
name: 'samp3', 
results: [{   
     key:'chemicalname', 
     value: foo1 
    },{ 
     key: 'result', 
     value: 100 
    },{ 
     key: 'qualifier', 
     value: 'X' 
     },{ 
     key:'chemicalname', 
     value: foo 
    },{ 
     key: 'result', 
     value: 140 
    },{ 
     key: 'qualifier', 
     value: 'AX' 
     }], 
name: 'samp4', 
results: [{ 
     key:'chemicalname', 
     value: 'foo' 
    },{ 
     key: 'result', 
     value: 1478 
    },{ 
     key: 'qualifier', 
     value: 'XA' 
     }] 
} 
+1

请包括预期的输出 – baao

+3

'这是一个数据的例子:' - 如何在数据的例子,因为它是在代码中...你说它是一个数组,但你所展示的不是一个数组 –

+0

您可以向我们展示您的起始数据和您想要的内容,并以一种在作业右侧有效的形式显示。 – Jack

回答

0

这是我最后使用的代码:

var features = []; 
    map.forEachFeatureAtPixel(pixel, function(feature, layer) { 
     features.push(feature); 
    }); 
    var samples = []; 
for (var i = 0, ii = features.length; i < ii; i++) {samples.push({sample_name:features[i].get('sample_name'),sample_date:features[i].get('sample_date'),start_depth:features[i].get('start_depth'),end_depth:features[i].get('end_depth'),chemical_name:features[i].get('chemical_name'),result_numeric:features[i].get('result_numeric'),lab_qualifiers:features[i].get('lab_qualifiers')}); 
}; 

Array.prototype.groupBy = function(prop) { 
    return this.reduce(function(groups, item) { 
var val = item[prop]; 
groups[val] = groups[val] || []; 
groups[val].push(item); 
return groups; 
}, {}); 
} 

var data = samples.groupBy('sample_name'); 
console.log(data); 

下一个任务是将对象转换为HTML表,但这超出了这个问题的范围。