mootools / mootools-more

MooTools Plugins and Enhancements Repository
http://mootools.net
738 stars 236 forks source link

Uncaught SyntaxError when trying to reading csv data #1343

Closed GoChartingAdmin closed 8 years ago

GoChartingAdmin commented 8 years ago

Hi,

I am using JSONP to read from a url which returns a CSV file. Now one of the columns in the CSV (Adj Close) has a blank space which aborts the reading of the file and throws out the error onto the console. What are my options, if any, to read the csv data?

Here is my code:

var url = 'http://ichart.yahoo.com/table.csv?s=GOOG&a=0&b=1&c=2000&d=0&e=31&f=2010&g=w&ignore=.csv';

loaderJSONP (url);

loaderJSONP = function(URL){
              //Get Data
            new Request.JSONP({
                url: URL, 
                onSuccess : function(response) {
                    show_response(response, $('post'));
                }
            }).send();

            show_response = function(obj, result) {                 
                 console.log(obj);
            };
}

I am getting the error: table.csv:1 Uncaught SyntaxError: Unexpected identifier

Thank you Sushanta

timwienk commented 8 years ago

The idea of JSONP is that the resource returns "JSON with Padding", where the JSON is a value in JavaScript Object Notation, and the Padding is a function call, with as aim to get around same-origin policies.

JSON: {"a":"b"} JSONP: myCallbackFunction({"a":"b"})

So basically, the JSONP resource is expected to return valid, executable JavaScript code, and you (or in this case MooTools More) provide(s) the definition of "myCallbackFunction". The resource location is then appended with &callback=myCallbackFunction and injected as src of an HTML <script> tag. The tag is injected into the document, and the function is called with the data supplied, so you can go about your things. (The function itself won't be called "myCallbackFunction" by MooTools, in case you're wondering.)

The resource you request from ichart.yahoo.com returns a CSV format and I doubt that it supports any callback function padding, meaning it probably can't work this way.

I can see two options:

  1. Look at Yahoo's developer console, see if the yahoo.finance.historicaldata table suits your needs, or if there is another way to fetch your data through YQL.
  2. Fetch the CSV through other means (some server), and supply it back to your application (with optional pre parsing, so you don't have to parse the CSV in JavaScript).
timwienk commented 8 years ago

Since this doesn't appear to be an issue with MooTools More itself, I'm going to go ahead and close this issue.

If you have more questions regarding the use of Request.JSONP or other MooTools parts, feel free to send a message to the mailing list at http://groups.google.com/group/mootools-users .

If you feel there is an issue with the library itself, feel free to reopen.

GoChartingAdmin commented 8 years ago

I think i have used both of your methods succesfully in my prior dev versions but i wad hoping to make this work as it gives me a quantum jump in terms of flexibility and performance.

debsush commented 8 years ago

Hi,

Based on your suggestion, I now have a php script on the server do the trick and JSONP calling the resulting JSON

Can you please suggest why am I not seeing the results when using the below code

new Request.JSONP({
    url: 'http://gocharting.netau.net/tester.php',
    onRequest: function(){
        alert("Start");
    },
    onError: function(){
        alert("Error");
    },
    onComplete: function() {
        alert("Complete");
    },
    onSuccess: function(response) {
        console.log(response);
    }
}).send();

Thank you

timwienk commented 8 years ago

The reason you're not getting any results from JSONP is exactly because of what I explained in my first response:

The idea of JSONP is that the resource returns "JSON with Padding", where the JSON is a value in JavaScript Object Notation, and the Padding is a function call, with as aim to get around same-origin policies.

JSON: {"a":"b"} JSONP: myCallbackFunction({"a":"b"})

So basically, the JSONP resource is expected to return valid, executable JavaScript code, and you (or in this case MooTools More) provide(s) the definition of "myCallbackFunction". The resource location is then appended with &callback=myCallbackFunction and injected as src of an HTML <script> tag. The tag is injected into the document, and the function is called with the data supplied, so you can go about your things. (The function itself won't be called "myCallbackFunction" by MooTools, in case you're wondering.)

So you'll have to use the callback value passed as query parameter.

Try something like this (untested):

function print_json($data) {
    $json = json_encode($data);

    if (array_key_exists('callback', $_GET) && !preg_match('/[^\w.]/', $_GET['callback'])) {
        header('Content-type: application/javascript; charset=utf-8');
        echo $_GET['callback'], '(', $json, ')';
    } else {
        header('Content-type: application/json; charset=utf-8');
        echo $json;
    }
}
DimitarChristoff commented 8 years ago

guys, can you please move this conversation to the stack overflow question you opened or to the mailing list, repo issues should stick to bugs and not support. Tim has gone way out of his way to explain differences between JSON and JSONP already :)

http://stackoverflow.com/questions/39241740/uncaught-syntaxerror-when-trying-to-reading-csv-data

On 1 September 2016 at 11:07, Tim Wienk notifications@github.com wrote:

The reason you're not getting any results from JSONP is exactly because of what I explained in my first response:

The idea of JSONP is that the resource returns "JSON with Padding", where the JSON is a value in JavaScript Object Notation, and the Padding is a function call, with as aim to get around same-origin policies.

JSON: {"a":"b"} JSONP: myCallbackFunction({"a":"b"})

So basically, the JSONP resource is expected to return valid, executable JavaScript code, and you (or in this case MooTools More) provide(s) the definition of "myCallbackFunction". The resource location is then appended with &callback=myCallbackFunction and injected as src of an HTML Githubissues.

  • Githubissues is a development platform for aggregating issues.