How to load external JSON data via an ajax call on html page?

Question

I created a dummy JSON file below to test out whether this html page works. How do I load the data via ajax request? The only error I got is

Uncaught ReferenceError: data is not defined.

How do I call this JSON file in my html page? Been trying but to no avail. Got this from view-source if it helps

index.html

<!DOCTYPE HTML>
<html>
<head>
  <title>Matter Timeline</title>
  <link rel="stylesheet" type="text/css" href="style.css">
  <script type="text/javascript" src="jquery.min.js"></script>
  <script type="text/javascript" src="bootstrap.js"></script>
   <!-- load handlebars for templating, and create a template -->
  <script src="dist/handlebars-v4.0.11.js"></script>
  <script id="item-template" type="text/x-handlebars-template">
      {{target}} 
      <font color="#229954"><b>{{status_green}}</b></font>
      <font color="#A93226"><b>{{status_red}}</b></font>
      <br/>
      <font size="2" color="#2874A6">{{action}}</font> 
      <font size="2" color="#2874A6"><i>{{user}}</i></font> <br/> 
      <span class="tooltip-date">{{datetime}}</span>
  </script>

  <script src="dist/vis.js"></script>
  <link href="dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
  <script>

    function resettimeline() {
        document.location.reload();
    };
  </script>     
</head>

<body>
<p>
  <center><h2>Matter Timeline</h2></center>
</p>
<div id="visualization"></div>

<script type="text/javascript">
  var groups = new vis.DataSet([
    {id: 0, content: 'Process/Task', value: 1},
    {id: 1, content: 'Req/Matter/Doc', value: 2}
  ]);

  var source = document.getElementById('item-template').innerHTML;
  var template = Handlebars.compile(document.getElementById('item-template').innerHTML);

  $.ajax({
    url: 'http://127.0.0.1:8887/data.json',
    dataType: "json",
    success: function(data) {
        //handle you data here
    }
  });

  // create visualization
  var container = document.getElementById('visualization');
  var options = {
    // option groupOrder can be a property name or a sort function
    // the sort function must compare two groups and return a value
    //     > 0 when a > b
    //     < 0 when a < b
    //       0 when a == b
    groupOrder: function (a, b) {
      return a.value - b.value;
    },
    orientation: {
        axis: 'top',
        item: 'top'
    },
    height: "85vh",
    template: template
    //timeAxis: {scale: 'day', step:3}
  };


  var timeline = new vis.Timeline(container);
  timeline.setOptions(options);
  timeline.setGroups(groups);
  timeline.setItems(data); 


  timeline.on('doubleClick', function (properties) {
    window.open('the_doc_url', 
                'newwindow', 
                'width=1000,height=600'); 
    return false;
  });

</script>
<br/>
<a href="javascript:resettimeline()">Fit to Width</a>
</body>
</html>

data.json

{
  "data": [
    { 
        id: 1, group: 0, 
        target: 'Request',
        action: 'from',
        user: 'SAS',
        datetime: '7/10',
        title: '<span class="tooltip-date">Date: 7/10/2017 09:00</span><br/>Req ID: R123',
        start: new Date(2017,9,7, 9,0,0,0)
    },
    { 
        id: 2, group: 0, 
        target: 'Request',
        action: 'by',
        user: 'Alice',
        datetime: '8/10',
        title: '<span class="tooltip-date">Date: 8/10/2017 13:34</span><br/>Req ID: R123',
        start: new Date(2017,9,8, 12,30,0,0)
    }
  ]
}

What webserver are you using? The data.json needs to be served by the webserver. — aandis
– aandis, Commented Oct 3, 2018 at 12:36
It seems you aren’t doing anything with your data. See that success part in your $.ajax function? It receives the data object but you are not using it. Later you are trying to use the variable data but you haven’t declared one. Try copying the whole visualisation code and paste it into the function in that success section in your $.ajax function and see what’s happening. — PDXIII
– PDXIII, Commented Oct 3, 2018 at 12:54
And remember because of the structure of your JSON the data object you will receive isn’t the array data you probably expect. — PDXIII
– PDXIII, Commented Oct 3, 2018 at 13:00

GriffoGoes · Accepted Answer · 2018-10-03 13:48:09Z

AJAX means "Asynchronous JavaScript And XML", and it seems that you missed the asynch part. The code that is using the "data" variable is outside the callback, then this variable doesn't exist (or its value is undefined).

You need to use the json data after receiving it, something like this (it could probably be cleanup a little bit):

$.ajax({
    url: 'http://127.0.0.1:8887/data.json',
    dataType: "json",
    success: function(data) {
        //handle you data here


            // create visualization
            var container = document.getElementById('visualization');
            var options = {
            // option groupOrder can be a property name or a sort function
            // the sort function must compare two groups and return a value
            //     > 0 when a > b
            //     < 0 when a < b
            //       0 when a == b
            groupOrder: function (a, b) {
              return a.value - b.value;
            },
            orientation: {
                axis: 'top',
                item: 'top'
            },
            height: "85vh",
            template: template
            //timeAxis: {scale: 'day', step:3}
            };


            var timeline = new vis.Timeline(container);
            timeline.setOptions(options);
            timeline.setGroups(groups);
            timeline.setItems(data.data); 


            timeline.on('doubleClick', function (properties) {
                window.open('the_doc_url', 
                            'newwindow', 
                            'width=1000,height=600'); 
                return false;
            });
      }
});

Collectives™ on Stack Overflow

How to load external JSON data via an ajax call on html page?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related