ES6/Typoskript Weise eine Polylinie aus einem Array

Question

ich mehr SVG Polylinien aus einer Struktur erzeugen will zu erzeugen, die ich habe:

data = [item0, item1, ...., item50] 
item0 = {y1: 10, y2: 100, ...[other properties]...} 
item1 = {y1: 1000, y2: 50, ...} 
item2 = {y1: 500, y2: 40, ...} 

So ist die Struktur eine Reihe von Objekten, von denen ein Element mehr Y-Wert hat . Der x-Wert wird durch Iterieren über die Struktur (x * 10) bestimmt.

Der Ausgang ein String für jeden "y" sein sollte, wie folgt aus: "x0, y1 [0] x1, y1 [1] x2, y1 [2] ..."

polyLine1 = "0,10 10,100 20,500..." 
polyLine2 = "0,1000 10,50 20,40 ..." 

I tun sie es mit Underscore.js oder etwas ähnliches wie diese können:

polyLine1 = ""; 
_.each (data, function(item, index){ 
    polyLine1 += "" + index*10 + "," + item.y1 
} 
polyLine2 = ""; 
_.each (data, function(item, index){ 
    polyLine2 += "" + index*10 + "," + item.y2 
} 

Was ich suche ist ein intelligenter Weg, um eine vollständige Ausgabestruktur mit Lambda/Pfeil-Syntax zu initialisieren:

this.polyLines = { 
    polyLine1 = ...,// iterate data, pick y1 property, map x and y, reduce/join to a string 
    polyLine2 = ..., 
} 

Als Referenz verwende ich TypeScript mit Ionic2 (Angular2). Ich weiß, dass ich das mit Template-Bindings machen kann (was wahrscheinlich langsamer und weniger lesbar wäre), aber ich möchte nur lernen.

Answer 1

Dies produziert, was ich denke, dass Sie suchen. Grundsätzlich ist reduce (von ES5.1) was Sie wollen. Ich verwende Lambdas (arrow functions) und template literals von ES6 zusammen mit String.prototype.trim() und Object.keys() von ES5.1.

let data = [{ 
 
    y1: 10, 
 
    y2: 100 
 
}, { 
 
    y1: 1000, 
 
    y2: 50 
 
}] 
 
let keyReduction = (b) => Object.keys(b).reduce((c, d, x) => c += `${x*10} ${b[d]} `, ""); 
 
let polyLines = data.reduce((a, b, i) => { 
 
    a[`polyLine${i+1}`] = keyReduction(b).trim(); 
 
    return a; 
 
}, {}); 
 
console.log(JSON.stringify(polyLines))

Ich bin mir nicht sicher, ob die für Polylinien arbeiten, wie ich eine SVG nicht getan haben, aber ich bin sicher, dass Sie es zwicken können an Ihre Bedürfnisse anzupassen.

Sieht aus, als ob Sie Kommas brauchen. Sie können den gleichen Code tun, sondern mit einem Komma:

let data = [{ 
 
    y1: 10, 
 
    y2: 100 
 
}, { 
 
    y1: 1000, 
 
    y2: 50 
 
}] 
 
let keyReduction = (b) => Object.keys(b).reduce((c, d, x) => c += `${x*10},${b[d]} `, ""); 
 
let polyLines = data.reduce((a, b, i) => { 
 
    a[`polyLine${i+1}`] = keyReduction(b).trim(); 
 
    return a; 
 
}, {}); 
 
console.log(JSON.stringify(polyLines))

Hier ist ein weiteres Beispiel, jeden Eigenschaftsnamen in eine separate Eigenschaft der endgültigen Ausgabe Ausbrechen:

let data = [{ 
 
    y1: 10, 
 
    y2: 100 
 
}, { 
 
    y1: 1000, 
 
    y2: 50 
 
}] 
 
let polyLines = data.reduce((a, b, i) => { 
 
    Object.keys(b).forEach((k) => { 
 
    a[k] = (a[k] || "") + (i * 10) + "," + b[k] + " "; 
 
    }); 
 
    return a; 
 
}, {}); 
 
console.log(JSON.stringify(polyLines))