莫里斯JS:"无法阅读财产'匹配'未定义"用ajax加载json

时间:2017-04-30 10:00:29

标签: javascript jquery json ajax morris.js

我试图动态加载JSON数据以放入Morris JS Line,但我一直收到以下错误:

Uncaught TypeError: Cannot read property 'match' of undefined
at Object.b.parseDate (morris.min.js:6)
at c.<anonymous> (morris.min.js:6)
at c.b.Grid.d.setData (morris.min.js:6)
at c.d [as constructor] (morris.min.js:6)
at new c (morris.min.js:6)
at Object.success ((index):232)
at f (jquery.js:1026)
at Object.fireWith [as resolveWith] (jquery.js:1138)
at r (jquery.js:8021)
at XMLHttpRequest.r (jquery.js:8558)

我正在使用表单发出ajax请求,并使用python&#34; json.dumps&#34;将数据作为JSON返回。功能

$("#idForm").submit(function(e) {

    var url = "/predict/"; // the script where you handle the form input.

    $.ajax({
           type: "POST",
           url: url,
           data: $("#idForm").serialize(), // serializes the form's elements.
           success: function(json)
           {
                console.log(json);
                var chart = new Morris.Line({
                  // ID of the element in which to draw the chart.
                  element: 'myfirstchart',
                  data: json,
                  // Chart data records -- each entry in this array corresponds to a point on
                  // the chart.
                  // The name of the data record attribute that contains x-values.
                  xkey: 'date',
                  // A list of names of data record attributes that contain y-values.
                  ykeys: ['real', 'predicted'],
                  // Labels for the ykeys -- will be displayed when you hover over the
                  // chart.
                  labels: ['Observed Value', 'Predicted Value']
                });
           }
         });

奇怪的是,如果我替换&#34;数据:json&#34;与真正的JSON(由console.log函数输出的那个,一切顺利运行)一致

JSON如下:

[
 {
  date: 2016-01-01, 
  real: 8, 
  predicted: 7
 }, 
 {
  date: 2016-01-02, 
  real: 5, 
  predicted: 3
 }, 
 {
  date: 2016-01-03, 
  real: 14, 
  predicted: 16
 }, 
 {
  date: 2016-01-04, 
  real: 6, 
  predicted: 6
 }, 
 {
  date: 2016-01-05, 
  real: 9, 
  predicted: 9
 }, 
 [...]
 {
  date: 2016-01-27, 
  real: 2, 
  predicted: 2
 }, 
 {
  date: 2016-01-28, 
  real: 5, 
  predicted: 5
 }, 
 {
  date: 2016-01-29, 
  real: 12, 
  predicted: 11
 }, 
 {
  date: 2016-01-30, 
  real: 14, 
  predicted: 14
 }, 
 {
  date: 2016-01-31, 
  real: 8, 
  predicted: 8
 }

我试图用JQuery再次解析JSON,但这给出了解析错误。

你们有人遇到过这个问题吗?

非常感谢

1 个答案:

答案 0 :(得分:0)

function line_chart(id) {
    $.ajax({
        type: 'POST',
        async: true,
        dataType: "json",
        url: 'code/content/profile/chart.php',
        data: { user_id: id, type: 'line'},
        success: function(data){
            $('#line').html('');
            Morris.Line({
              element: 'line',
              data: data,
              resize: true,
              xkey: 'period',
              ykeys: ['a', 'b', 'c'],
              lineColors: ['#2577b5', '#293c4d', '#4db6ac'],
              labels: ['Прием', 'Консультация', 'Выдача']
            });  
        }
    })
}