Cannot read from text file

Cannot read from text file

ShirleyWShirleyW Posts: 16Questions: 4Answers: 2

Hello,

Would someone help with this.....I am all tangled up :). I tried every possible combinations, read threads, and to no avail....

I have in my javascript file the following code:

$(document).ready(function() {
$('#datatablePurchases').DataTable({
"data": "C:\temp\Purchases.json",
"columnDefs": [
{"className": 'details-control', "orderable":false, "data":null, "defaultContent":''},
{"data": "category"},
{"data": "vendor"},
{"data": "item"},
{"data": "sku"},
{"data": "qty"},
{"data": "uom"},
{"data": "delivery"},
{"data": "status"},
{"data": "comments"}
],
"order": [[1, 'asc']]
});
}

The .html looks like this:

Category Vendor Item SKU Qty UOM Delivery Status Comments

The file in c:\temp\Purchases.json looks like this:

{
"data":[
{
"category": "AV",
"vendor": "Barco",
"item": "ClickShare CSR-200",
"sku": "1147-789546548A",
"qty": "10",
"uom": "each",
"delivery": "02/25/2018",
"status": "on order",
"comments": "To be installed to conference rooms 101, 102, 103, 104 and to booth 201-206"
},
{
"category": "AV",
"vendor": "Barco",
"item": "ClickShare CSR-300",
"sku": "1147-789546548A",
"qty": "10",
"uom": "UOM",
"delivery": "02/25/2018",
"status": "on order",
"comments": "To be installed to conference rooms 401, 402, 403, 404"
}
]
}

The error said

DataTables warning: table id=datatablePurchases
Requested unknown parameter 'category' for row 0, column 1.

Please help. Thanks,

Shirley

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 61,451Questions: 1Answers: 10,055 Site admin

    The browser won't allow you to load a local file using Ajax (e.g. C:\...). Doing so would be a massive security issue since any Javascript could then read any file on your computer and send it to any server, including your passwords files, etc!

    If you want to load a file via Ajax you need to do it with an http server to load the file.

    Allan

  • ShirleyWShirleyW Posts: 16Questions: 4Answers: 2

    Thank you Allan,

    I started with the code below but it did not work so I used the file from C:\temp\ just to display the .html page without going through iis and it gave me the same error
    Any more ideas?

    This is the original code:

    $('#datatableSSRPurchases').DataTable({
    "data": "../../production/TestData/Purchases.json",
    "columnDefs": [
    {"className": 'details-control', "orderable":false, "data":null, "defaultContent":''},
    {"data": "category"},
    {"data": "vendor"},
    {"data": "item"},
    {"data": "sku"},
    {"data": "qty"},
    {"data": "uom"},
    {"data": "delivery"},
    {"data": "status"},
    {"data": "comments"}
    ],
    "order": [[1, 'asc']]
    });

    I also put Purchases.json in the same directory where the .html page is and adjusted the relative path accordingly, with the same result.

  • kthorngrenkthorngren Posts: 20,145Questions: 26Answers: 4,736

    You will need to load your data using the ajax option instead of data.

    For example:
    "ajax": "../../production/TestData/Purchases.json",
    Kevin

  • ShirleyWShirleyW Posts: 16Questions: 4Answers: 2

    Thank you Kevin,

    I have tried all the combinations I could think of, "ajax" or "data", columns or columnsDef. Would you look at the attachment and see what I missed / overlooked?

    Thanks again.

    Shirley

  • kthorngrenkthorngren Posts: 20,145Questions: 26Answers: 4,736

    I'm guessing what you want is this:

    $('#datatableSSRPurchases').DataTable({
    "ajax": "../../production/TestData/Purchases.json",
    "columns": [
    {"className": 'details-control', "orderable":false, "data":null, "defaultContent":''},
    {"data": "category"},
    {"data": "vendor"},
    {"data": "item"},
    {"data": "sku"},
    {"data": "qty"},
    {"data": "uom"},
    {"data": "delivery"},
    {"data": "status"},
    {"data": "comments"}
    ],
    "order": [[1, 'asc']]
    });
    

    Note: Changed columnDefs to columns and using ajax. Looks like the columns definition should match with your JSON.

    If this doesn't work then you should get an alert message with a link to a technote. Please try the steps in the technote and if you need further help post the error message you are getting and the results of your investigation.

    Kevin

  • ShirleyWShirleyW Posts: 16Questions: 4Answers: 2

    Hi Kevin,

    I tried the suggested combination and it just shows "Loading..." with no data but when I reverted it back to options "data" + "columns", it tells me it does not like my .json as it cannot find the 1st column category, though the 1st column is really the icon to expand/collapse.

    Thanks again

  • tangerinetangerine Posts: 3,342Questions: 35Answers: 394

    the 1st column is really the icon to expand/collapse.

    Does your HTML have that column?

  • ShirleyWShirleyW Posts: 16Questions: 4Answers: 2

    Yes it does

    Category Vendor Item SKU Qty UOM Delivery Status Comments
    Category Vendor Item SKU Qty UOM Delivery Status Comments
  • tangerinetangerine Posts: 3,342Questions: 35Answers: 394

    That doesn't tally with your DataTables columns.

    {"className": 'details-control', "orderable":false, "data":null, "defaultContent":''},
    {"data": "category"},
    {"data": "vendor"},
    ...
    
  • ShirleyWShirleyW Posts: 16Questions: 4Answers: 2

    It must be obvious but I still do not understand (sorry)
    Please see attachment....Thanks so much for not giving up

  • kthorngrenkthorngren Posts: 20,145Questions: 26Answers: 4,736

    I tried the suggested combination and it just shows "Loading...

    When you try using the ajax option do you see any errors in your browser's console?

    We need to find out what the server is returning. Maybe the steps in this tech note will help:
    https://datatables.net/manual/tech-notes/1

    Kevin

  • tangerinetangerine Posts: 3,342Questions: 35Answers: 394
    edited November 2017

    Oh, right. So your HTML does have an empty th preceding the Category column. But it isn't shown when you post like this:

    CategoryVendorItemSKUQtyUOMDeliveryStatusComments
    

    Stick with Kevin, he knows what he's doing.

  • ShirleyWShirleyW Posts: 16Questions: 4Answers: 2
    Answer ✓

    Gentlemen,

    Thanks so much for your patience. I followed the suggested tech-notes steps and saw the error 404 Not Found no matter how I updated the ajax path and syntax. I then realized the browser is holding onto the cached location of the .json file. So I cleared the browser cache, recycled IIS and the data showed up correctly, all good.

    Shirley

This discussion has been closed.