Загрузить удаленный JSON из Dynatable

Question

Обновление: чтобы избежать вероятности того, что проблема сводится исключительно к той же политике происхождения, я попытался обслуживать ее локально, откуда поступают все активы http://localhost:4000 используя Serve. Это не решило проблему. Таким образом, редактирование скрипта может не работать из-за той же политики происхождения, но вы можете увидеть код там.

---

Я пытаюсь использовать Dynatable для загрузки внешнего JSON, пропуская шаг чтения / нормализации (который генерирует JSON из существующей таблицы). Это должно быть поддержано, но это не работает для меня.

Вот моя попытка на JSFiddle. Загрузка JSON изнутри документа (что не кажется мне очень полезным) работает отлично, как видно из скрипки. Но извлечение его из URL не работает вообще.

Вот мой JavaScript:

// getting JSON from the document works, but of what use is that?
$(document).ready( function() {
    $('#local').dynatable({
        dataset: {
            records: JSON.parse($('#music').text())
        }
    });        
    // getting JSON from a remote source fails:
    $('#remote').dynatable({
        dataset: {
            ajax: true,
            ajaxOnLoad: true,
            ajaxUrl: '//www.dynatable.com/dynatable-ajax.json',
            records: []
        }
    });
});

... которая ссылается на две таблицы, одну с идентификатором "local" и другую с идентификатором "remote", а также скрипт, содержащий данные для локальной таблицы:

<h3>Remote JSON: Failing</h3>
<table class="table table-striped" id="remote">
  <thead>
    <th>Some Attribute</th>
    <th>Some Other Attribute</th>
  </thead>
  <tbody>
  </tbody>
</table>
<hr>
<h3>Local JSON: Succeeding</h3>
<table class="table table-striped" id="local">
  <thead>
    <th style="color: black;">Band</th>
    <th>Album</th>
  </thead>
  <tbody>
  </tbody>
</table>
<script id="music">
[
    {
        "band": "The Police",
        "album": "Ghost In The Machine"
    },{
        "band": "Supertramp",
        "album": "Breakfast In America"
    },{
        "band": "Peter Tosh",
        "album": "Mama Africa"
    },{
        "band": "The Police",
        "album": "Regatta d'Blanc"
    },{
        "band": "The Police",
        "album": "Zenyatta Mondatta"
    },{
        "band": "Supertramp",
        "album": "Crime of the Century"
    },{
        "band": "Talking Heads",
        "album": "Remain in Light"
    },{
        "band": "Talking Heads",
        "album": "Speaking in Tongues"
    }
]
</script>

Answer 1

Причина, по которой пульт не работает, заключается в том, что при извлечении данных через AJAX в ответ JSON должны быть включены некоторые метаданные вместе с фактическими записями.

Если вы посмотрите на пример AJAX в dynatable документах, вы можете нажать "Просмотр данных AJAX", чтобы увидеть, как выглядит формат:

{
  "records": [
    {
      "someAttribute": "I am record one",
      "someOtherAttribute": "Fetched by AJAX"
    },
    {
      "someAttribute": "I am record two",
      "someOtherAttribute": "Cuz it's awesome"
    },
    {
      "someAttribute": "I am record three",
      "someOtherAttribute": "Yup, still AJAX"
    }
  ],
  "queryRecordCount": 3,
  "totalRecordCount": 3
}

Вы можете увидеть фактический массив результатов вложен в "records" в ответе JSON, а также возвращает общее количество записей в наборе и количество в текущем наборе.

Причина, по которой эти метаданные нужны для dynatable, заключается в том, чтобы сделать нумерацию страниц и текст подсчета записей внизу таблицы. Поскольку ваш сервер выполняет фактические запросы, сортировку и разбиение на страницы (например, с помощью запроса к базе данных или другой обработки на стороне сервера), dynatable видит только конечный результат. Следовательно, dynatable никогда не узнает:

1. сколько всего записей в наборе против

2. сколько записей в фильтрованном / запрошенном наборе (на всех страницах) по сравнению с

3. сколько записей в отфильтрованном / запрошенном разбивке на страницы (на текущей странице).

Единственное, что dynatable может вывести из возвращенных результатов, - это (3) сверху, то есть, сколько записей находится в фильтрованном / запрошенном наборе на текущей странице. Таким образом, он должен вернуть JSON с сервера, чтобы сказать ему (1), который является totalRecordCountи (2), который является queryRecordCount,

Конечно, если вы не хотите всего этого, вы можете просто отключить нумерацию страниц и текст подсчета записей и сообщить dynatable, что результаты будут расположены в корне JSON, возвращаемого сервером:

$('#remote').dynatable({
  features: {
    paginate: false,
    recordCount: false
  },
  dataset: {
    ajax: true,
    ajaxOnLoad: true,
    ajaxUrl: '//www.dynatable.com/dynatable-ajax.json',
    records: []
  },
  params: {
    records: '_root'
  }
});