How to use getJSON function in javascript properly?

Question

I have server side url that printed these json data.

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

I want to take the url, put it in a javascript file that linked to a html file to show it as chart/graph in web browser.

Below is the snippet of javascript file.

$(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

});
});

And below is the snippet from my html file

{% 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>

I have rechecked the path for the javascript file in my

base.html

and it is correct. I put in a folder name static.

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

I run the script but when I open my browser, it was empty. My question is did I missed something in the script? and if I did how to implement the function getJSON properly in the javascript file?

I search about the function and wrote the javascript based on these link https://www.sitepoint.com/ajaxjquery-getjson-simple-example/

and

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

I am not good at javascript so thank you for your help. This is my first attempt to write javascript and was hoping if there is some error, it will printed out on the terminal but there was none.

Answer 1

You need to fetch data using $.getJSON() and then initialize data Morris.Line in callback

$.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,
        ...
    });
});

Answer 2

You need to put your Morris.Line() constructor inside success callback of $.getJSON() like below code.

$.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
    });
});