Morris.js Uncaught TypeError：无法读取未定义的属性“匹配”答案

【问题标题】：Morris.js Uncaught TypeError: Cannot read property 'match' of undefinedMorris.js Uncaught TypeError：无法读取未定义的属性“匹配”
【发布时间】：2014-07-07 01:38:16
【问题描述】：

我对此失去了理智，无法弄清楚问题所在。我正在使用以下代码使用 morris.js 呈现图表，并且不断收到“未捕获的类型错误：无法读取未定义的属性‘匹配’”错误。 javascript 和 php 代码如下，是我将 php json 输出到控制台并将其粘贴到此 -> enter link description here 它有效！但它不在我的代码中（我已经很好地从用法示例和 jsbin 中复制了它）

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
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 输出（来自 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"}]

更新我做了更多调试，发现错误发生在 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+)$/);

更新 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
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).' },';
    }

【问题讨论】：

看起来即使您将 async 设置为 false，您的函数仍在尝试在 ajax 请求完成之前返回数据，因此它返回的是空数据。尝试异步执行它，看看它是否有效
显然，您正在尝试访问您认为是对象但未定义的 match 属性。但是您提供的代码不完整，因为它不包含任何match。
同步请求是个坏主意。
如何正确返回数据？我尝试使用 async false AND true。

标签： javascript php jquery json morris.js

【解决方案1】：

我遇到了完全相同的问题，最后发现问题出在解析 Json 对象上。在您的情况下，它可能与发送空对象值有关，并且“匹配”无法识别“日期”值。

总体而言，错误是说“未定义”值正在传递给 Morris.js 的子方法，因此解决此问题的好方法（对我有用）可以跟踪您的对象值以了解空的位置值正在传递给“匹配”方法。

希望对你有帮助。

【讨论】：

【解决方案2】：

使用 JSON.parse

Morris.Line({
    element: 'tempMonitor',
    data: JSON.parse(data),
    xkey: 'datetime',
    ykeys: ['temp_c'],
    labels: ['Series A', 'Series B']
});

【讨论】：