JSON Data Streaming not working

My movies variable has 200 items in it.

I need to be able to dynamically update this with new items (from the CMS), I have a file in the root called data.json, that I'm trying to load instead of using movies.js.

Inside my data.json I have...

 var movies = [
  {
    "id": 1,
    "name": "I am a title",
    "rating": "&#9733;&#9733;&#9733;&#9733;",
    "year": 2017
 ...

I've tried the following, but it doesn't seem to work. Streaming stays at 0% and no results load.

  var FJS = FilterJS(movies, '#movies', {
    template: '#movie-template',
    search: { ele: '#searchbox' },
    callbacks: {
      afterFilter: afterFilter
    },
    streaming: {
      data_url: '/data.json',
      stream_after: 0,
      batch_size: 50
    },
    pagination: {
      container: '#pagination',
      visiblePages: 5,
      perPage: {
        values: [12, 15, 18],
        container: '#per_page'
      },
    }
  });

  FJS.addCallback('afterAddRecords', function(){
    var percent = (this.recordsCount - 250)*100/250;

    $('#stream_progress').text(percent + '%').attr('style', 'width: '+ percent +'%;');

    if (percent == 100){
      $('#stream_progress').parent().fadeOut(1000);
    }
  });

I've also tried just using the following. But this doesn't work either.

  var FJS = FilterJS(movies, '#movies', {
    template: '#movie-template',
    search: { ele: '#searchbox' },
    callbacks: {
      afterFilter: afterFilter
    },
    pagination: {
      container: '#pagination',
      visiblePages: 5,
      perPage: {
        values: [12, 15, 18],
        container: '#per_page'
      },
    }
  });

 FJS.setStreaming({
  data_url: '/data.json',
  stream_after: 1,
  batch_size: 450
 });

  FJS.addCallback('afterAddRecords', function(){
    var percent = (this.recordsCount - 250)*100/250;

    $('#stream_progress').text(percent + '%').attr('style', 'width: '+ percent +'%;');

    if (percent == 100){
      $('#stream_progress').parent().fadeOut(1000);
    }
  });

If I add the json data into the HTML like this it works, but it's still not loading the data.json as streaming is at 0%, and the page obviously takes a lifetime to load.

I know I could add this into a movies.js file but then I can't add new movies dynamically using the CMS.

<script>
 var movies = [
  {
    "id": 1,
    "name": "I am a title",
    "rating": "&#9733;&#9733;&#9733;&#9733;",
    "year": 2017
 ...

I've also tried reverting to the example pagination.js file, but the same problem occurs. Could it be something to do with loading the json from my local MAMP setup?

I've tried using an explicit URL e.g. http://example.dev/data.json?

(I deliberately tried adding an incorrect url in e.g. http://example.dev/blah.json, I get an error in the console. So it seems like it is detecting the json file.)

EloquentStudio / filter.js

JSON Data Streaming not working #155