js data transform from csv to a specific format, error to load csv

Question

I have a csv file :

title,number1,number2
M,12,22
T,17,27
W,7,17
T,17,27
F,23,33

And I want something written in this format in my js file because the rest of the program use datas with this format. It will be hard to modify all the code. I prefer to work on csv transform.

dataDailySalesChart = {
        labels: ['M', 'T', 'W', 'T', 'F'],
        series: [
            [12, 17, 7, 17, 23],
            [22, 27, 17, 27, 33]
        ]
    };

I tried this code but it didn't work :

$(document).ready(function() {
        $.ajax({
            type: "GET",
            url: "test.csv",
            dataType: "text",
            success: function(data) {processData(data);}
        });
    });

    function processData(allText) {

        var allTextLines = allText.split(/\r\n|\n/);
        var headers = allTextLines[0].split(',');
        var serie1 = allTextLines[1].split(',');
        var serie2 = allTextLines[2].split(',');
        var seriesTest = [serie1,serie2];

        dataDailySalesChart = {
            labels: headers,
            series: seriesTest
        };

    }

But I have the error :

jquery-3.1.0.min.js:4 XMLHttpRequest cannot load file: test.csv. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https

Do you know why I get this error ?

@ArvindDhakad Why would you do that? The question is tagged [d3.js] which comes with its own means for parsing DSV content. — altocumulus, Jul 11 '17 at 13:28
Because I have want to re use a code using d3js but not for the datas. The datas are written directly in the js file like "dataDailySalesChart". And I want the same report but using data in my csv. To be more flexible. Anybody can change a csv, but not the js. I though it was easier to change just this part, instead all the d3js code written which use the dataDailySalesChart — celianou, Jul 11 '17 at 13:31
@altocumulus obviously DSV is there he can use it. Papa Parse is an alternative. — Arvind, Jul 11 '17 at 13:33
I am sorry but I don't get what DSV is. I am really noob I said — celianou, Jul 11 '17 at 13:36
It means *Delimiter-separated values*. Back to your question, what do you want? If you cannot change the JS, there is no point asking any question here. — Gerardo Furtado, Jul 11 '17 at 13:37
Please break this down into smaller parts...first figure out how to use d3 to parse your csv...then work on transforming it. Stackoverflow isn't a *"how to"* tutorial service or a free code writing service. The objective here is to help you fix **your code** — charlietfl, Jul 11 '17 at 13:40
I can change the js. But if I change the format of dataDailySalesChart, I need to change all the d3js which used this. So I though it was better to prepare my csv to fil the format of dataDailySalesChart. Am I wrong in my reasoning ? — celianou, Jul 11 '17 at 13:40
Ok, now it's more clear. By the way, what's your country? You have semicolons in that CSV, which is not valid for `d3.csv`. I suspect you live in a country that uses comma as decimal separator. — Gerardo Furtado, Jul 11 '17 at 13:47
You have a cross-origin error when loading your file. Where do you try to load the csv file from? — Danmoreng, Jul 11 '17 at 14:41
this is a html file which read the js file. I tried to open it on Chrome, Mozilla. Same problem — celianou, Jul 11 '17 at 14:43
You cannot load files from file system when you execute a webpage locally. — Danmoreng, Jul 11 '17 at 14:46
Read this: https://stackoverflow.com/questions/3582671/how-to-open-a-local-disk-file-with-javascript — Danmoreng, Jul 11 '17 at 14:48

score 0 · Answer 1 · answered Jul 11 '17 at 14:46

0

$.ajax({
    type: "GET",
    // This is causing the error: test.csv is not a valid url
    url: "test.csv",
    dataType: "text",
    success: function(data) {processData(data);}
});

Where do you try to load your csv file from? test.csv is not a valid url for an ajax request. You shoud either request it from the same domain the page is loaded on with /path/to/test.csv or from a different domain with sth. like https://somedomain.com/path/to/test.csv

answered Jul 11 '17 at 14:46

Danmoreng

2,367
1
19
32

It didn't work with url: "/Projet/dashboard1/donnees/test.csv". it should work ? – celianou Jul 11 '17 at 14:48
I already commented under the question: you are executing your HTML locally. That means there is no webserver running. You cannot use ajax to read from the local file system. Your webpage needs to run on a webserver to work that way. – Danmoreng Jul 11 '17 at 14:52
Ok, I'll try to find another way... Thank you – celianou Jul 11 '17 at 14:56
The only way to read a local file from disk to use it in your script is to make the user select it manually via ``. – Danmoreng Jul 11 '17 at 14:59

js data transform from csv to a specific format, error to load csv

1 Answers1