JavaScriptオブジェクトのフィルタリングとループスルー配列

Question

var data= [ 
{"area":"1","location":"01051A","aisle":"1","sequence":12354,"x":13,"y":1338}, 
{"area":"1","location":"01071A","aisle":"1","sequence":12355,"x":13,"y":1437}, 
{"area":"1","location":"01081A","aisle":"1","sequence":12356,"x":173,"y":1437}, 
{"area":"1","location":"02021A","aisle":"2","sequence":12473,"x":401,"y":1092}, 
{"area":"1","location":"02022A","aisle":"2","sequence":12472,"x":401,"y":1140}, 
{"area":"1","location":"02031A","aisle":"2","sequence":12471,"x":241,"y":1191}, 
{"area":"1","location":"02032A","aisle":"2","sequence":12470,"x":241,"y":1239}, 
{"area":"1","location":"02041A","aisle":"2","sequence":12469,"x":401,"y":1191}, 
{"area":"1","location":"02042A","aisle":"2","sequence":12468,"x":401,"y":1239}, 
{"area":"1","location":"03101A","aisle":"3","sequence":12476,"x":629,"y":1437}, 
{"area":"1","location":"03102A","aisle":"3","sequence":12477,"x":629,"y":1485}, 
{"area":"1","location":"03111A","aisle":"3","sequence":12478,"x":469,"y":1536}, 
{"area":"1","location":"03112A","aisle":"3","sequence":12479,"x":469,"y":1584} 
] 

私はこのデータセットを持っています。それぞれの通路でフィルターをかけ、そのセットで作業する最良の方法は何ですか？ たとえば、通路1の最小値と最大値のシーケンスを探して、何かして何かをやり直したいのですが... ...

現在、私は最小値と最大値を取得していますすべてのデータはこのようなものを使用しています。

var minX = Math.min.apply(null, data.map(function(a){return a.x;})), 
maxX = Math.max.apply(null, data.map(function(a){return a.x;})), 
    minY = Math.min.apply(null, data.map(function(a){return a.y;})), 
    maxY = Math.max.apply(null, data.map(function(a){return a.y;})); 

しかし、最小値、最大値、各セットごとに座標を求め、ラベルを描画する必要があります。

私はループを作成してからユニークな通路の配列を作成し、データを再度ループすることを考えていましたが、より良い方法になると思います。

ここには私が取り組んでいるJsFiddleがあります。

Answer 1

あなたはaisle、x、yとそのminとmax値を収集するためのオブジェクトを取ることができます。

var data = [{ area: "1", location: "01051A", aisle: "1", sequence: 12354, x: 13, y: 1338 }, { area: "1", location: "01071A", aisle: "1", sequence: 12355, x: 13, y: 1437 }, { area: "1", location: "01081A", aisle: "1", sequence: 12356, x: 173, y: 1437 }, { area: "1", location: "02021A", aisle: "2", sequence: 12473, x: 401, y: 1092 }, { area: "1", location: "02022A", aisle: "2", sequence: 12472, x: 401, y: 1140 }, { area: "1", location: "02031A", aisle: "2", sequence: 12471, x: 241, y: 1191 }, { area: "1", location: "02032A", aisle: "2", sequence: 12470, x: 241, y: 1239 }, { area: "1", location: "02041A", aisle: "2", sequence: 12469, x: 401, y: 1191 }, { area: "1", location: "02042A", aisle: "2", sequence: 12468, x: 401, y: 1239 }, { area: "1", location: "03101A", aisle: "3", sequence: 12476, x: 629, y: 1437 }, { area: "1", location: "03102A", aisle: "3", sequence: 12477, x: 629, y: 1485 }, { area: "1", location: "03111A", aisle: "3", sequence: 12478, x: 469, y: 1536 }, { area: "1", location: "03112A", aisle: "3", sequence: 12479, x: 469, y: 1584 }], 
 
    values = Object.create(null); 
 

 
data.forEach(function (o) { 
 
    if (!values[o.aisle]) { 
 
     values[o.aisle] = { x: { min: o.x, max: o.x }, y: { min: o.y, max: o.y } }; 
 
     return; 
 
    } 
 
    ['x', 'y'].forEach(function (k) { 
 
     ['min', 'max'].forEach(function (m) { 
 
      values[o.aisle][k][m] = Math[m](values[o.aisle][k][m], o[k]); 
 
     }); 
 
    }); 
 
}); 
 
     
 
console.log(values);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 2

Iは、グループにvalusがソートされるオブジェクトの配列（つまりセット）/順序付けを含むであろう鍵UNIQその通路を持つオブジェクトキーとして設定された「通路」を、お勧めあなたの要求によって、x + yなどの合計など。

Answer 3

var aisles = {}; 

data.forEach(d => { 
    if (!aisles[d.aisle]) { 
    aisles[d.aisle] = { 
     maxX: d.x, 
     minX: d.x, 
     maxY: d.y, 
     minY: d.y 
    }; 
    } else { 
    aisles[d.aisle].maxX = Math.max(aisles[d.aisle].maxX, d.x); 
    aisles[d.aisle].minX = Math.min(aisles[d.aisle].minX, d.x); 
    aisles[d.aisle].maxY = Math.max(aisles[d.aisle].maxY, d.y); 
    aisles[d.aisle].minY = Math.min(aisles[d.aisle].minY, d.y); 
    } 
}) 

Answer 4

これはArray.reduce

var data = [{ area: "1", location: "01051A", aisle: "1", sequence: 12354, x: 13, y: 1338 }, { area: "1", location: "01071A", aisle: "1", sequence: 12355, x: 13, y: 1437 }, { area: "1", location: "01081A", aisle: "1", sequence: 12356, x: 173, y: 1437 }, { area: "1", location: "02021A", aisle: "2", sequence: 12473, x: 401, y: 1092 }, { area: "1", location: "02022A", aisle: "2", sequence: 12472, x: 401, y: 1140 }, { area: "1", location: "02031A", aisle: "2", sequence: 12471, x: 241, y: 1191 }, { area: "1", location: "02032A", aisle: "2", sequence: 12470, x: 241, y: 1239 }, { area: "1", location: "02041A", aisle: "2", sequence: 12469, x: 401, y: 1191 }, { area: "1", location: "02042A", aisle: "2", sequence: 12468, x: 401, y: 1239 }, { area: "1", location: "03101A", aisle: "3", sequence: 12476, x: 629, y: 1437 }, { area: "1", location: "03102A", aisle: "3", sequence: 12477, x: 629, y: 1485 }, { area: "1", location: "03111A", aisle: "3", sequence: 12478, x: 469, y: 1536 }, { area: "1", location: "03112A", aisle: "3", sequence: 12479, x: 469, y: 1584 }]; 
 

 
var retData = data.reduce(function(ret, current) { 
 
    ret[current.aisle] = ret[current.aisle] || {}; 
 
    ret[current.aisle]['maxX'] = Math.max(ret[current.aisle]['maxX'], current.x) || current.x; 
 
    ret[current.aisle]['maxY'] = Math.max(ret[current.aisle]['maxY'], current.y) || current.y; 
 
    ret[current.aisle]['minX'] = Math.min(ret[current.aisle]['minX'], current.x) || current.x; 
 
    ret[current.aisle]['minY'] = Math.min(ret[current.aisle]['minY'], current.y) || current.y; 
 
    return ret; 
 
}, {}); 
 

 
console.log(retData);

を使用して、別の味であります