datatable showing no results

Dino22

Hello guys. Have a problem for two days. Last time I implemented datatable with Vue.js succesfully for a prjocet, this time I have some stupid bugg I can't solve. So my datatable showing no results, with no errors, and have response data.

So here is my Json response:

[
{
"kind": "tweet",
"post_id": "1407420307464409090",
"posted_time": 1624389644,
"is_retweet": false,
"likes": 27,
"retweets": 4,
"replies": 3,
"content": "Was für eine Chance für Kane - und Vaclík pariert. #EURO2020 #CZEENG",
"account": "sportschau",
"video_views": 0,
"video_is_geoblocked": true,
"scraped_from": 1624390147,
"scraped_to": 1624397597
},
{
"kind": "tweet",
"post_id": "1407418215643422720",
"posted_time": 1624389145,
"is_retweet": false,
"likes": 33,
"retweets": 14,
"replies": 1,
"content": "Richtig im Spiel war Kroatien nicht. Aber das 1:0 haben sie gemacht - Vlašić trifft. #EURO2020 #CROSCO",
"account": "sportschau",
"video_views": 4000,
"video_url": "https://world2capture.global-mmk.com/video?id=tweet_1407418215643422720",
"scraped_from": 1624390149,
"scraped_to": 1624397599
},

Here is my html:

<div id="tweets" class="container">
    <!-- Table -->
    <table id="tweetstable" class="display responsive nowrap table table-striped- table-bordered table-hover table-checkable" style="width: 100%">
        <thead class="bg-primary">
            <tr>
                <th>Actions</th>
                <th>Tweet URL</th>
                <th>Account</th>
                <th>Content</th>
                <th>Posted Time</th>
                <th>Likes</th>
                <th>Retweets</th>
                <th>Replies</th>
                <th>Views</th>
                <th>Is Geoblocked</th>

            </tr>
        </thead>
    </table>
</div>

Here is my Vue adn datatable script:

var tweet = new Vue({
    el: '#tweets',
    data: {
        tweets: [],
        dataTable: null
    },

    methods: {
        async preloadDataTable() {
            this.dataTable = await $('#tweetstable').DataTable({
                ajax: {
                    url: "SocialMedia/Tweet/GetTweetsAsync",
                    type: "POST",
                    dataSrc: "tweets",
                    datatype: "json",
                    accept: "application/json",
                    error: function (err) {
                        AjaxErrorHandler(err);
                    }
                },
                dom: 'Bfrtip',
                scrollY: "45vh",
                scrollX: true,
                scrollCollapse: true,
                scroller: true,
                columnDefs: [
                    {
                        targets: 1,
                        render: function (data, type, row, meta) {
                            if (type === 'display')
                                data = '<a class="btn btn-info btn-sm" target="_blank" href="' + data + '">View Tweet</a>';
                            return data;
                        }
                    },
                    {
                        targets: 0,
                        render: function (data, type, row, meta) {
                            debugger;
                            if (type === 'display')
                                data = '<a class="btn btn-info btn-sm" /*onclick="getTweetData("' + data["Post_id"] + '")"*/>View Tweet</a>';
                            return data;
                        }
                    }
                ],
                columns: [
                    {
                        data: 'Post_id', render: function (data) {
                            return '<button class="btn btn-success btn-sm"/* onclick="getTweet(' + data + ')*/">Overview</button'
                        }
                    },
                    { data: 'TweetUrl' },
                    { data: 'Account' },
                    { data: 'Content' },
                    { data: 'Posted_Time' },
                    { data: 'Likes' },
                    { data: 'Retweets' },
                    { data: 'Replies' },
                    { data: 'Video_Views' },
                    { data: 'Video_Is_Geoblocked' },
                ]
            })
        },






    },


    mounted() {
        this.preloadDataTable();
    }

});

kthorngren

You have the ajax.dataSrc set to dataSrc: "tweets",. But it looks like you don't have a tweets property. Try using dataSrc: "",.

Also your columns.data has upper case, ie, data: 'Content' but your JSON is lower case, ie, '"content": "Wa.... They need to match.

Kevin

Dino22

@kthorngren

That is my model ASP.NET fro backend (api deserialize)

Dino22

so it should be Uppercase then