Question

我有一个对象，我将数据存储为

{"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}

我正在尝试将此数据解释为图表，google api。使用以下

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

crime.drugs工作正常但是crime.bicycle-theft正在抛出

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

Answer 1

由于 bicycle-theft 属性的 - ，您无法通过 dot operator 进行访问，试试这种方式，

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

Answer 2

如果有' - '符号，则无法访问{_ 1}}这样的属性。你应该写(crimes.bicycle-theft。

Answer 3

有两种访问属性的方法：点表示法和括号表示法。

使用点表示法时，您的属性必须是有效的JavaScript标识符。

使用括号表示法时，提供的字符串不必是有效的标识符。

这里＆＃39;自行车盗窃＆＃39;由于＆＃39; - ＆＃39;。

，因此不是有效的标识符

文档：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors

Answer 4

而不是硬编码数组，
使用 - ＆gt; Object.keys - 构建行......

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

请参阅以下工作代码段...

＆＃13;

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%'
  });
});

＆＃13;

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

＆＃13;

Javascript x未定义对象/数组

4 个答案: