

# 問題点

ソースコード上、js/index.jsにハードコードしたdata変数では Datatablesに表示ができます。  
しかし、APIで取得したデータtest_dataでは表示できません。

console.logで表示したデータは、ブラウザのデベロッパーツールの表示において、どちらのデータも以下のように同じ形式にしか見えませんでした。

[code]

    Attray(5)
     0:{id:1,name:'A'}
     1:{id:1,name:'B'}
     ....
    
[/code]

# ソースコード

関連するhtmlファイル、scriptファイルを以下に示します。

base.html

[code]

    <!doctype html>
    {% load static %}
    <html lang="ja">
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial_scale=1">
        <title>{% block page_title %}{% endblock %}</title>
        {# --- css --- #}
        <link rel="stylesheet" href="{% static 'css/normalize.css' %}">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
        <link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap4.min.css"/>
        <link rel="stylesheet" href="https://gyrocode.github.io/jquery-datatables-checkboxes/1.2.12/css/dataTables.checkboxes.css"/>
        <link rel="stylesheet" href="{% static 'css/base.css' %}">
        {% block extra_css %}{% endblock %}
      </head>
      <body>
        <div class="ui container">
          {% block content %}{% endblock %}
        </div>
        {# --- js --- #}
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js" defer></script>
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous" defer></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous" defer></script>
        <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js" defer></script>
        <script src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap4.min.js" defer></script>
        <script src="https://gyrocode.github.io/jquery-datatables-checkboxes/1.2.12/js/dataTables.checkboxes.min.js" defer></script>
        {% block extra_js %}{% endblock %}
      </body>
    </html>
    
[/code]

index.html

[code]

    {% extends "base.html" %}
    {% load static %}
    
    {% block page_title %}TEST PAGE{% endblock %}
    
    {% block extra_css %}
    {% endblock %}
    
    {% block content %}
    <header class="page-header" role="banner">
      <h1>Datatables Checkbox</h1>
    </header>
    <div class="page-main" role="main">
      <table id="test_table" class="table" style="width:100%">
        <thead>
          <tr id="test_header">
            <th></th>
            <th>key</th>
            <th>name</th>
          </tr>
        </thead>
      </table>
    </div>
    {% endblock %}
    {% block extra_js %}
    <script src="{% static 'js/index.js' %} " defer></script>
    {% endblock %}
    
[/code]

js/index.js

[code]

    let tx_table;
    
    $ (function(){
        var num = 0;
        let test_data = [];
    
        let data = [
            {id:1,name:"A"},
            {id:2,name:"B"},
            {id:3,name:"C"},
            {id:4,name:"D"},
            {id:5,name:"E"},
        ]
    
        $.ajax({
            type : "GET",
            url : "http://127.0.0.1:8000/api",
            dataType : "json",
            async : false,
        }).then(
            function(json) {
                for (var i = 0; i < json.length; i++){
                    test_data [num++] = {id:json[i].id, name:json[i].name};
                }
            }
        );
    
        // デフォルトの設定を変更
        $.extend( $.fn.dataTable.defaults, { 
            language: {
                url: "http://cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Japanese.json"
            } 
        });
    
        console.log(data)
        console.log(test_data)
    
        let option = {
            columns: [
                {
                    data: 'name',
                    checkboxes: {
                        selectRow: true
                    }
                },
                {data: 'id'},
                {data: 'name'},
            ],
            data: data,
            order: [1, 'asc'],
            select: {
                style: 'multi'
            },
        };
    
        tx_table = $('#test_table').DataTable(option);
    
    });
    
    
[/code]


CC BY-SA 4.0
2023-06-07T05:53:20.870
95125
2023-06-09T01:49:20.263
32891
question
jquery
jQuery Datatables にAPIで取得したデータベースデータが表示できない。


自己解決したので、回答を投稿します。

スクリプトの実行順序を理解していなかったため、テーブルに反映できていませんでした。

# スクリプトファイルのデバッグ

Chromeのデベロッパーツールによって、スクリプトファイルのブレイクポイントで途中の変数状態を見ることができました。

[ChromeのデベロッパーツールでJavaScriptをデバッグする方法](https://ics.media/entry/190517/)

ブレイクポイントで判明したのは、datatablesに反映するコードに到達した時点で、test_data のデータが取得できていない状態でした。

# API取得後に反映するように変更する。

js/index.js

[code]

    let tx_table;
    
    $ (function(){
        var num = 0;
        let test_data = [];
    
        let data = [
            {id:1,name:"A"},
            {id:2,name:"B"},
            {id:3,name:"C"},
            {id:4,name:"D"},
            {id:5,name:"E"},
        ]
    
        $.ajax({
            type : "GET",
            url : "http://127.0.0.1:8000/api",
            dataType : "json",
            async : false,
        }).then(
            function(json) {
                for (var i = 0; i < json.length; i++){
                    test_data [num++] = {id:json[i].id, name:json[i].name};
                }
            }
        ).always(
            function(){
    
            let option = {
               columns: [
                   {
                        data: 'name',
                        checkboxes: {
                            selectRow: true
                        }
                   },
                   {data: 'id'},
                   {data: 'name'},
               ],
               data: data,
               order: [1, 'asc'],
               select: {
                   style: 'multi'
               },
            };
    
            tx_table = $('#test_table').DataTable(option);
    
            }
        );
    
        // デフォルトの設定を変更
        $.extend( $.fn.dataTable.defaults, { 
            language: {
                url: "http://cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Japanese.json"
            } 
        });
    
    });
    
    
[/code]


CC BY-SA 4.0
2023-06-09T01:49:20.263
95155
2023-06-09T01:49:20.263
32891
95125
answer