javascript Morris.js 未捕获的类型错误：无法读取未定义的属性“匹配”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24601985/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Morris.js Uncaught TypeError: Cannot read property 'match' of undefined
提问by devfunkd
I am losing my mind on this and can't figure out the issue. I am using the following code to render a chart using morris.js and I keep getting a "Uncaught TypeError: Cannot read property 'match' of undefined" error. The javascript and php code is below, is I output the php json to the console and paste it into this -> enter link description hereit works! But it doesn't in my code (which I've pretty well copied from the usage example and jsbin)
我对此失去了理智，无法弄清楚这个问题。我正在使用以下代码使用 morris.js 呈现图表，但我不断收到“未捕获的类型错误：无法读取未定义的属性‘匹配’”错误。javascript和php代码如下，我是否将php json输出到控制台并将其粘贴到此->在此处输入链接描述它有效！但它不在我的代码中（我已经很好地从使用示例和 jsbin 中复制了它）
HTML
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.0/morris.js"></script>
<meta charset=utf-8 />
<title>Temperature Monitor</title>
</head>
<body>
<h3 style="text-align: center">Temperature Monitor</h3>
<div id="tempMonitor"></div>
<script src="aquaponics.charts.js"></script>
</body>
</html>
JAVASCRIPT
爪哇脚本
function getSensorData() {
var dataSet;
$.ajax({
type: "POST",
url: "sensor-data.php",
data: { waterTemperature: true },
async: false,
success: function(data) {
dataSet = data;
}
});
return dataSet;
}
var dataSet = getSensorData();
var chart = Morris.Line({
element: 'tempMonitor',
data: [0, 0],
xkey: 'datetime',
ykeys: ['temp_c'],
labels: ['Series A', 'Series B']
});
chart.setData(dataSet);
PHP (sensor-data.php)
PHP (传感器数据.php)
<?php
require('app-config.php');
$limit = query_limit;
$stmt = $dbh->prepare('SELECT * FROM sensor_waterTemperature ORDER BY id DESC');
$stmt->execute();
echo json_encode($stmt->fetchAll(PDO::FETCH_ASSOC));
JSON OUTPUT (from sensor-data.php)
JSON 输出（来自 sensor-data.php）
[{"id":"590","datetime":"2014-07-06 19:05:24","temp_c":"26.25","temp_f":"79.25"},{"id":"589","datetime":"2014-07-06 19:00:14","temp_c":"26.31","temp_f":"79.36"},{"id":"588","datetime":"2014-07-06 18:55:13","temp_c":"26.31","temp_f":"79.36"},{"id":"587","datetime":"2014-07-06 18:50:12","temp_c":"26.31","temp_f":"79.36"},{"id":"586","datetime":"2014-07-06 18:45:11","temp_c":"26.31","temp_f":"79.36"},{"id":"585","datetime":"2014-07-06 18:40:10","temp_c":"26.38","temp_f":"79.48"},{"id":"584","datetime":"2014-07-06 18:35:09","temp_c":"26.38","temp_f":"79.48"},{"id":"583","datetime":"2014-07-06 18:30:08","temp_c":"26.38","temp_f":"79.48"},{"id":"582","datetime":"2014-07-06 18:25:07","temp_c":"26.38","temp_f":"79.48"},{"id":"581","datetime":"2014-07-06 18:20:06","temp_c":"26.38","temp_f":"79.48"},{"id":"580","datetime":"2014-07-06 18:15:05","temp_c":"26.38","temp_f":"79.48"},{"id":"579","datetime":"2014-07-06 17:17:44","temp_c":"26.38","temp_f":"79.48"},{"id":"578","datetime":"2014-07-06 18:07:48","temp_c":"26.38","temp_f":"79.48"}]
UPDATEI did some more debugging and found the error is happening on morris.js:598 (see below).
更新我做了更多的调试，发现错误发生在 morris.js:598（见下文）。
Morris.parseDate = function(date) {
var isecs, m, msecs, n, o, offsetmins, p, q, r, ret, secs;
if (typeof date === 'number') {
return date;
}
m = date.match(/^(\d+) Q(\d)$/); **<<< RIGHT HERE**
n = date.match(/^(\d+)-(\d+)$/);
o = date.match(/^(\d+)-(\d+)-(\d+)$/);
UPDATE 2I tried this as well and same error occurs.
更新 2我也试过这个并且发生了同样的错误。
JAVASCRIPT
爪哇脚本
function getSensorData() {
$.ajax({
type: "POST",
url: "sensor-data.php",
data: { waterTemperature: true },
async: false,
success: function(data) {
Morris.Line({
element: 'tempMonitor',
data: data,
xkey: 'datetime',
ykeys: ['temp_c'],
labels: ['Series A', 'Series B']
});
}
});
}
getSensorData();
PHP
PHP
<?php
require('app-config.php');
$limit = query_limit;
$stmt = $dbh->prepare('SELECT * FROM sensor_waterTemperature ORDER BY id DESC');
$stmt->execute();
//echo json_encode($stmt->fetchAll(PDO::FETCH_ASSOC));
while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
echo '{ datetime: \''.$row['datetime'].'\', temp_c: '.round($row['temp_c'], 2).' },';
}
采纳答案by Homa Pourmohammadi
I had exactly the same problem, finally figured out that the problem is in parsing Json object. In your case, it can be something about sending empty object values, and "match" cannot identify "date" value.
我遇到了完全相同的问题，终于发现问题出在解析 Json 对象上。在您的情况下，可能是发送空对象值，而“匹配”无法识别“日期”值。
Overall, error is saying that an "undefined" value is passing to a sub-method of Morris.js , so a good work around this problem (as worked for me) can be tracing your object values to understand where an empty value is passing to "match" method.
总的来说，错误是说一个“未定义”的值正在传递给 Morris.js 的一个子方法，所以一个很好的解决这个问题的方法（对我有用）可以跟踪你的对象值以了解空值传递的位置“匹配”方法。
Hope it helps.
希望能帮助到你。
回答by user3451853
Use JSON.parse
使用 JSON.parse
Morris.Line({
element: 'tempMonitor',
data: JSON.parse(data),
xkey: 'datetime',
ykeys: ['temp_c'],
labels: ['Series A', 'Series B']
});
