如何在JavaScript中正确使用GetJson函数

Question

我的服务器端URL打印了这些JSON数据。

{
  "data_list": [
    {
      "Y_Value": value1, 
      "X_value": value2,
    }, 
    {
      "Y_value": value3, 
      "X_value": value4, 
    }, 
  ]
}

我想使用URL，将其放入链接到HTML文件的JavaScript文件中，以将其显示为Web浏览器中的图表/图形。

下面是JavaScript文件的片段。

$(function () {
....
....
....
//some code
var line = new Morris.Line({
    element: 'line-chart',
    resize: true,
    data: [
    $.getJSON("http://<url>/mydata", function(data){
    console.log(data);
    var data_list = [];
    );
    }
],
ykey: ['Y_value'],
xkey: ['X_value'],
labels: ['Testing JSON get function'],
lineColors: ['#efefef'],
lineWidth: 2,
hideHover: 'auto',
gridTextColor: '#fff',
gridStrokeWidth: 0.4,
pointSize: 4,
pointStrokeColors: ["#efefef"],
gridLineColor: "#efefef",
gridTextFamily: "Open Sans",
gridTextSize: 10
});
});

及以下是我的html文件的摘要

{% extends "base.html" %}
{% block content %}
  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <h1>
        Dashboard
        <small>Control panel</small>
      </h1>
      <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
        <li class="active">Dashboard</li>
      </ol>
    </section>
    <!-- Main content -->
    <section class="content">
    ...
    ...
    ...
    (some other code)
    ...
    <div class="row">
    <!-- Left col -->
    <section class="col-lg-7 connectedSortable">
      <!-- Custom tabs (Charts with tabs)-->
      <div class="nav-tabs-custom">
        <!-- Tabs within a box -->
        <ul class="nav nav-tabs pull-right">
          <li class="active"><a href="#revenue-chart" data-toggle="tab">Area</a></li>
          <li><a href="#sales-chart" data-toggle="tab">Donut</a></li>
          <li class="pull-left header"><i class="fa fa-inbox"></i> Sales</li>
        </ul>
        <div class="tab-content no-padding">
          <!-- Morris chart - Sales -->
          <div class="chart tab-pane active" id="line-chart" style="position: relative; height: 300px;"></div>
          <div class="chart tab-pane" id="sales-chart" style="position: relative; height: 300px;"></div>
        </div>
      </div>
    </section>
    </div>
    </section>
    </div>

我在我的

中重新检查了JavaScript文件的路径

base.html

这是正确的。我放入一个文件夹名称静态。

<script src="{{ url_for('static', filename='dist/js/pages/dashboard.js')}}"></script>

我运行脚本，但是当我打开浏览器时，它是空的。我的问题是我错过了脚本中的东西吗？如果我做了如何在JavaScript文件中正确实现getjson的函数？

我搜索了该功能，并根据这些链接编写了JavaScript https://www.sitepoint.com/ajaxjquery-getjson-simple-example/

和

http://api.jquery.com/jquery.getjson/

我不擅长JavaScript，所以谢谢您的帮助。这是我第一次编写JavaScript的尝试，并希望如果有一些错误，它将在终端上打印出来，但没有。

Answer 1

您需要将Morris.Line()构造函数放入success $.getJSON()的回调中，如下所示代码。

$.getJSON("http://<url>/mydata", function(data) {
    var line = new Morris.Line({
        element: 'line-chart',
        resize: true,
        data: data.data_list,
        ykey: ['Y_value'],
        xkey: ['X_value'],
        labels: ['Testing JSON get function'],
        lineColors: ['#efefef'],
        lineWidth: 2,
        hideHover: 'auto',
        gridTextColor: '#fff',
        gridStrokeWidth: 0.4,
        pointSize: 4,
        pointStrokeColors: ["#efefef"],
        gridLineColor: "#efefef",
        gridTextFamily: "Open Sans",
        gridTextSize: 10
    });
});

Answer 2

您需要使用$.getJSON()获取数据，然后在回调中初始化数据Morris.Line

$.getJSON("http://<url>/mydata", function(data) {
    console.log(data);
    var data_list = data.data_list;
    //some code
    var line = new Morris.Line({
        data: data_list,
        ...
    });
});