xは、オブジェクト/配列

Question

が定義されていませんJavascriptを私はオブジェクトを持っていると私は、私は、チャートにGoogleのAPIを、このデータを解釈しようとしている

{"anti-social-behaviour":43,"burglary":24,"other-theft":29,"shoplifting":2,"vehicle-crime":27,"violent-crime":34,"criminal-damage-arson":17,"public-order":2,"drugs":1,"robbery":3,"other-crime":3,"bicycle-theft":1} 

としてデータを格納しています。次

data.addRows([ 
    ['Drugs', crimes.drugs], 
['bicycle-theft', crimes.bicycle-theft], 
]); 

crimes.drugsを使用すると、プロパティbicycle-theftはあなたがdot operatorを経由してアクセスすることはできません-を、持っているのでしかしcrimes.bicycle-盗難が

Uncaught (in promise) ReferenceError: theft is not defined 
at drawChart (crimes.js:126) 
at <anonymous> 

Answer 1

を投げている正常に動作し、この方法で試してください。

data.addRows([ 
    ['Drugs', crimes.drugs], 
    ['bicycle-theft', crimes['bicycle-theft']], 
]); 

Answer 2

「 - 」記号がある場合、そのようなプロパティ(crimes.bicycle-theft）にアクセスすることはできません。 crimes["bicycle-theft"]と書いてください。

Answer 3

プロパティにアクセスするには、ドット表記法とかっこ表記の2つの方法があります。

ドット表記を使用する場合、プロパティは有効なJavaScript識別子である必要があります。

ブラケット表記を使用する場合、提供される文字列は有効な識別子である必要はありません。

ここで 'bicycle-theft'は ' - 'のために有効な識別子ではありません。

ドキュメント：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors

Answer 4

ではなく、ハードコード配列、
使用 - >Object.keys - 行を構築するため...

Object.keys(objData).forEach(function (key) { 
    data.addRow([ 
    key, 
    objData[key] 
    ]); 
}); 

が作業スニペット以下を参照してください...

google.charts.load('current', { 
 
    packages: ['corechart'] 
 
}).then(function() { 
 

 
    var objData = {"anti-social-behaviour":43,"burglary":24,"other-theft":29,"shoplifting":2,"vehicle-crime":27,"violent-crime":34,"criminal-damage-arson":17,"public-order":2,"drugs":1,"robbery":3,"other-crime":3,"bicycle-theft":1}; 
 

 
    var data = new google.visualization.DataTable(); 
 
    data.addColumn('string', 'Crime'); 
 
    data.addColumn('number', 'Occurrences'); 
 

 
    Object.keys(objData).forEach(function (key) { 
 
    data.addRow([ 
 
     key, 
 
     objData[key] 
 
    ]); 
 
    }); 
 

 
    data.sort([{column: 1, desc: true}]); 
 

 
    var chart = new google.visualization.BarChart(document.getElementById('chart_div')); 
 
    chart.draw(data, { 
 
    chartArea: { 
 
     bottom: 24, 
 
     height: '100%', 
 
     left: 176, 
 
     right: 96, 
 
     top: 36, 
 
     width: '100%' 
 
    }, 
 
    height: 400, 
 
    legend: { 
 
     alignment: 'end', 
 
     position: 'top' 
 
    }, 
 
    title: 'Crime', 
 
    width: '100%' 
 
    }); 
 
});

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart_div"></div>