Как правильно использовать функцию getJSON в javascript?

Question

У меня есть серверный URL-адрес, который печатает эти данные json.

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

Я хочу взять URL, поместите его в файл яваскрипта, который связан с HTML файл, чтобы показать, как диаграммы/графика в веб-браузере.

Ниже приведен фрагмент файла 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 

и это правильно. Я поставил имя папки static.

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

Я запускаю сценарий, но когда я открываю свой браузер, он был пуст. Мой вопрос: я что-то пропустил в скрипте? и если я сделал, как правильно реализовать функцию getJSON в файле javascript?

Я ищу о функции и написал 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, 
     ... 
    }); 
});