JSON to Datatable

JSON to Datatable

pauljmiddletonpauljmiddleton Posts: 3Questions: 1Answers: 0

Hi

I'm being brutally honest here, this is my first web dev project, starting from scratch, I'm using MongoDB and have created some api targets that appear to be working in an app.js file (hope my terminology here is correct!).

At the moment I'm running everything on localhost:3000 using nodemon in Visual Studio Code and opening the site directly from the file location (HTML file) in a web browser, just wondering whether that might be the issue!?!

I've gone through every post I can find on this topic and made all the changes suggested but the results are the same, no data!

For reference, the JSON response from my MongoDB is below (this is the start of an asset tracking app):

{"data":[{"_id":"5f33b39b48814160f86dc4da","firstSeenDate":"2020-08-12T10:17:00.000Z","lastSeenDate":"2020-08-12T10:17:00.000Z","userName":"myUserName","domain":"myDomain","computerName":"myComputer","macAddress":"c8:34:8e:54:05:8b","serialNumber":"0123456789","physicalRAM":"16","physicalDisk":"237","freeDisk":"Not Implimented","modelName":"Surface Laptop 3","siteName":"","winVer":"10.0.19041","winName":"Microsoft Windows 10 Pro","cpu":"Intel(R) Core(TM) i5-1035G7 CPU @ 1.20GHz","__v":0},

The code is:

<script>
    $(document).ready(function () {
        alert("function start");
        $('#assetsTable').DataTable({
        
            "ajax": { 
            "url": "http://localhost:3000/api", 
            "dataSrc": "data",
            "datatype": "json", // you can probably remove this
            "contentType": "application/json; charset=utf-8",
            "cache": "false",

            },

            "columns": [
                {"data": 'computerName'},
                {"data": 'userName'},
                {"data": 'siteName'},
                {"data": 'firstSeenDate'},
                {"data": 'lastSeenDate'},
                {"data": 'serialNumber'},
                {"data": 'modelName'},
                {"data": 'cpu'}
            ]
        });
    });
</script>

The result is:

This question has an accepted answers - jump to answer

Answers

  • colincolin Posts: 15,154Questions: 1Answers: 2,587
    edited August 2020

    The data format looks OK, so probably to do with the over-engineered ajax declaration. Try just having the URL, as in this example here - does that work?

    Colin

  • pauljmiddletonpauljmiddleton Posts: 3Questions: 1Answers: 0

    Hi Colin

    Thank you for your reply.

    It is somewhat over-engineered now yes, I've been trying all manner of solutions from this site and others. I have now tried using data from somebody else post (they posted their external API address!) and my code works with there's.

    I can only assume now that it must be something to do with the way I'm presenting the JSON data, it looks identical (in format) to what they provided.

    I've changed the code to this -

    $(document).ready(function() {
        $('#assetsTable').DataTable( {
            "ajax": "http://localhost:3000/api",
            "columns": [
                { "data": "userName" },
                { "data": "domain" },
                { "data": "computerName" },
                { "data": "serialNumber" },
                { "data": "modelName" },
                { "data": "cpu" }
            ]
        } );
    } );
    

    And it still presents the same (obviously less some columns).

    If I change the url to the one that the other person had - 'https://cvrapi.dk/api?search=30829689&country=dk' using that basic code it fails as well, but if I use the original code as per below, his works, but mine doesn't.


    $(document).ready(function() { $.getJSON('https://cvrapi.dk/api?search=30829689&country=dk',function(d){ var z=[{'address':d.address,'city':d.city,'companydesc':d.companydesc}]; alert(z); $('#assetsTable').DataTable({ data: z, columns: [ { data: 'address' }, { data: 'city' }, //or { data: 'MONTH', title: 'Month' }` { data: 'companydesc' } ] }); }); } );
  • kthorngrenkthorngren Posts: 20,342Questions: 26Answers: 4,775
    Answer ✓

    If your Datatable is just showing Loading then I would start looking for errors in the browser's console and on the server. Also use the browser's network inspector tool the monitor the XHR request and response. Steps to using the network inspector can be found in this technote.

    Kevin

  • pauljmiddletonpauljmiddleton Posts: 3Questions: 1Answers: 0

    You are an absolute star! Why on earth I didn't check the errors in the browser, I guess more time spent coding will push me to remember that.

    For others like me - the issue is related to CORS - no idea what that means, neither did I! - have a read here - https://www.npmjs.com/package/cors

    Basically I install cors via npm -

    npm install cors

    Then added at the top of my apps.js

    const cors = require('cors')

    now when this line runs, it works!:

    res.json({data: foundAssets});

    1 1/2 days of faff!

This discussion has been closed.