Javascript、特定のオブジェクトのプロパティをループする

Question

現在のノウハウを使って、変数をループする際に問題が発生しました。私が得た検索結果を実装できませんでした。問題は行にありますctx.arc(Autom1.posX,Autom1.posY,5,0,2*Math.PI);私はすべての "自動"変数を調べたいと思います。私はAutom+iと私が考えることができるすべてのバリエーションを試した、私はまたそれらをループする配列を使用してみました。

私が達成しようとしているのは、これらのエンティティごとにマップ上にドットをつけることです。だから私はどのようにそれらをループするのですか？これを行うよりエレガントな方法はありますか？

<script> 
window.onload = function() { 
var c = document.getElementById("myCanvas"); 

var pMeters = ['Autom1', 'Autom2', 'Autom3']; 

var Autom1 = {type:"Automaatti", posX:590, posY:505, Visits: 1, Hits: 1, Value: 0.5}; 
var Autom2 = {type:"Automaatti", posX:580, posY:515, Visits: 1, Hits: 1, Value: 0.0}; 
var Autom3 = {type:"Automaatti", posX:570, posY:525, Visits: 1, Hits: 1, Value: 0.0}; 

var odds = Autom1.Hits/Autom1.Visits*100; //Remember to loop these too!! 
odds = odds.toFixed(1)+"%"; 

var ctx = c.getContext("2d"); 
var img = document.getElementById("map"); 
ctx.drawImage(img, 10, 10); 

for (i = 0; i < pMeters.length; i++) { 

    ctx.beginPath();      
    ctx.arc(Autom1.posX,Autom1.posY,5,0,2*Math.PI); // Ask online 
    ctx.fillStyle = 'rgba(0,100,200,0.4)'; 
    ctx.fill(); 

    ctx.stroke(); 
    ctx.font = "9px Arial"; 
    ctx.fillStyle = 'black'; 
    ctx.fillText(odds,Autom1.posX+10,Autom1.posY-10); 
} 
} 
</script> 

Answer 1

は、配列pMetersの代わりに、変数にデータを保存します。動作しているようです

<script> 
window.onload = function() { 
var c = document.getElementById("myCanvas"); 

    var Autom1 = {type:"Automaatti", posX:590, posY:505, Visits: 1, Hits: 1, Value: 0.5}; 
    var Autom2 = {type:"Automaatti", posX:580, posY:515, Visits: 1, Hits: 1, Value: 0.0}; 
    var Autom3 = {type:"Automaatti", posX:570, posY:525, Visits: 1, Hits: 1, Value: 0.0}; 

var pMeters = [Autom1, Autom2, Autom3]; //Note that there are no Quotes 

var odds = Autom1.Hits/Autom1.Visits*100; 
odds = odds.toFixed(1)+"%"; 

var ctx = c.getContext("2d"); 
var img = document.getElementById("map"); 
ctx.drawImage(img, 10, 10); 

for (i = 0; i < pMeters.length; i++) { 

    ctx.beginPath();      
    ctx.arc(pMeters[i].posX,pMeters[i].posY,5,0,2*Math.PI); // Ask online 
    ctx.fillStyle = 'rgba(0,100,200,0.4)'; 
    ctx.fill(); 

    ctx.stroke(); 
    ctx.font = "9px Arial"; 
    ctx.fillStyle = 'black'; 
    ctx.fillText(odds,pMeters[i].posX+10,pMeters[i].posY-10); 
} 
} 
</script> 

Answer 2

オブジェクトの配列を持つことができます。このように：グローバルVARSはwindowオブジェクトにプロパティですので

<script> 
window.onload = function() { 
var c = document.getElementById("myCanvas"); 

var pMeters = [{type:"Automaatti", posX:590, posY:505, Visits: 1, Hits: 1, Value: 0.5}, {type:"Automaatti", posX:590, posY:505, Visits: 1, Hits: 1, Value: 0.5}, {type:"Automaatti", posX:570, posY:525, Visits: 1, Hits: 1, Value: 0.0}]; 

var ctx = c.getContext("2d"); 
var img = document.getElementById("map"); 
ctx.drawImage(img, 10, 10); 

for (i = 0; i < pMeters.length; i++) { 
    var Autom1 = pMeters[i]; 

    var odds = Autom1.Hits/Autom1.Visits*100; //Remember to loop these too!! 
    odds = odds.toFixed(1)+"%"; 

    ctx.beginPath();      
    ctx.arc(Autom1.posX,Autom1.posY,5,0,2*Math.PI); // Ask online 
    ctx.fillStyle = 'rgba(0,100,200,0.4)'; 
    ctx.fill(); 

    ctx.stroke(); 
    ctx.font = "9px Arial"; 
    ctx.fillStyle = 'black'; 
    ctx.fillText(odds,Autom1.posX+10,Autom1.posY-10); 
    } 
} 
</script> 

Answer 3

、あなたはこれを使用することができます

<script> 
window.onload = function() { 
    var c = document.getElementById("myCanvas"); 
    var Autom1 = {type:"Automaatti", posX:590, posY:505, Visits: 1, Hits: 1, Value: 0.5}; 
    var Autom2 = {type:"Automaatti", posX:580, posY:515, Visits: 1, Hits: 1, Value: 0.0}; 
    var Autom3 = {type:"Automaatti", posX:570, posY:525, Visits: 1, Hits: 1, Value: 0.0}; 

    var odds = Autom1.Hits/Autom1.Visits*100; //Remember to loop these too!! 
    odds = odds.toFixed(1)+"%"; 

    var ctx = c.getContext("2d"); 
    var img = document.getElementById("map"); 
    ctx.drawImage(img, 10, 10); 

    for(var i=1; i<=3; i++) { 

       ctx.beginPath();      
       ctx.arc(window["Autom"+i].posX, 
          window["Autom"+i].posY, 
          5, 
          0, 
          2*Math.PI); 
       ctx.fillStyle = 'rgba(0,100,200,0.4)'; 
       ctx.fill(); 

       ctx.stroke(); 
       ctx.font = "9px Arial"; 
       ctx.fillStyle = 'black'; 
       ctx.fillText(odds,Autom1.posX+10,Autom1.posY-10); 
      } 
      } 
    </script>