SyntaxError when trying to parse csv with jquery-csv for Mustache.js template

Question

I am attempting to use PHP to echo the contents of a CSV file and then parse it with jquery-csv to use the data in a Mustache.js template. I already tried Papa Parse, and while it was able to parse the data and populate the template, it seemed to break the Isotope library also in use.

The code:

<script>
    var result = $.csv.toObjects(<?php echo $data ?>);
    (function() {
        var template = $('#template').html(),
            output = Mustache.to_html(template, {
                array: result
            });
        $('.isotope').append(output);
    })();
</script>

When I try this, I get the error, "Uncaught SyntaxError: missing ) after argument list." When I used the jquery-csv demo, I could get it to work when copying and pasting the $data that appears in the source code from the php echo:

category,name,preferred,diversity,phone,email,website,info
appliances,Best Buy,,,(414) ###-####,name@email.com,http://www.website.edu/,"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima unde ullam illum quibusdam similique vel, modi dolorem provident quasi quisquam, quis architecto commodi enim excepturi asperiores quas, et numquam nesciunt, voluptas error accusamus! Distinctio autem, molestias, iure cumque quae ab?"
appliances,Grand Appliance,,,(414) ###-####,name@email.com,http://www.website.edu/,"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima unde ullam illum quibusdam similique vel, modi dolorem provident quasi quisquam, quis architecto commodi enim excepturi asperiores quas, et numquam nesciunt, voluptas error accusamus! Distinctio autem, molestias, iure cumque quae ab?"
architectural,Korb Tredo Architects Inc,preferred,,(414) ###-####,name@email.com,http://www.website.edu/,"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima unde ullam illum quibusdam similique vel, modi dolorem provident quasi quisquam, quis architecto commodi enim excepturi asperiores quas, et numquam nesciunt, voluptas error accusamus! Distinctio autem, molestias, iure cumque quae ab?"
armored,Dunbar Armored,preferred,,(414) ###-####,name@email.com,http://www.website.edu/,"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima unde ullam illum quibusdam similique vel, modi dolorem provident quasi quisquam, quis architecto commodi enim excepturi asperiores quas, et numquam nesciunt, voluptas error accusamus! Distinctio autem, molestias, iure cumque quae ab?"
audio-visual,CDW-G,,,(414) ###-####,name@email.com,http://www.website.edu/,"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima unde ullam illum quibusdam similique vel, modi dolorem provident quasi quisquam, quis architecto commodi enim excepturi asperiores quas, et numquam nesciunt, voluptas error accusamus! Distinctio autem, molestias, iure cumque quae ab?"
audio-visual,Full Compass Systems LTD,,,(414) ###-####,name@email.com,http://www.website.edu/,"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima unde ullam illum quibusdam similique vel, modi dolorem provident quasi quisquam, quis architecto commodi enim excepturi asperiores quas, et numquam nesciunt, voluptas error accusamus! Distinctio autem, molestias, iure cumque quae ab?"

It seems that `` would solve your immediate issue but you might want to escape single-quotes so I recommend `` — MonkeyZeus, Aug 02 '16 at 20:51
@MonkeyZeus I tried your solutions, but now I get the error "Uncaught SyntaxError: Invalid or unexpected token" at the first line of the data output. — user3701187, Aug 02 '16 at 21:07

score 1 · Answer 1 · edited May 23 '17 at 12:32

This is happening because you are injecting a raw, unquoted string into your JavaScript code. The JavaScript in your outputted HTML source should look something like this:

<script>
    var result = $.csv.toObjects(category,name,preferred,diversity,phone,email,website,info
appliances,Best Buy,,,(414) ###-####,name@email.com,http://www.website.edu/,"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima unde ullam illum quibusdam similique vel, modi dolorem provident quasi quisquam, quis architecto commodi enim excepturi asperiores quas, et numquam nesciunt, voluptas error accusamus! Distinctio autem, molestias, iure cumque quae ab?"
appliances,Grand Appliance,,,(414) ###-####,name@email.com,http://www.website.edu/,"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima unde ullam illum quibusdam similique vel, modi dolorem provident quasi quisquam, quis architecto commodi enim excepturi asperiores quas, et numquam nesciunt, voluptas error accusamus! Distinctio autem, molestias, iure cumque quae ab?"
architectural,Korb Tredo Architects Inc,preferred,,(414) ###-####,name@email.com,http://www.website.edu/,"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima unde ullam illum quibusdam similique vel, modi dolorem provident quasi quisquam, quis architecto commodi enim excepturi asperiores quas, et numquam nesciunt, voluptas error accusamus! Distinctio autem, molestias, iure cumque quae ab?"
armored,Dunbar Armored,preferred,,(414) ###-####,name@email.com,http://www.website.edu/,"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima unde ullam illum quibusdam similique vel, modi dolorem provident quasi quisquam, quis architecto commodi enim excepturi asperiores quas, et numquam nesciunt, voluptas error accusamus! Distinctio autem, molestias, iure cumque quae ab?"
audio-visual,CDW-G,,,(414) ###-####,name@email.com,http://www.website.edu/,"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima unde ullam illum quibusdam similique vel, modi dolorem provident quasi quisquam, quis architecto commodi enim excepturi asperiores quas, et numquam nesciunt, voluptas error accusamus! Distinctio autem, molestias, iure cumque quae ab?"
audio-visual,Full Compass Systems LTD,,,(414) ###-####,name@email.com,http://www.website.edu/,"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima unde ullam illum quibusdam similique vel, modi dolorem provident quasi quisquam, quis architecto commodi enim excepturi asperiores quas, et numquam nesciunt, voluptas error accusamus! Distinctio autem, molestias, iure cumque quae ab?");
    (function() {
        var template = $('#template').html(),
            output = Mustache.to_html(template, {
                array: result
            });
        $('.isotope').append(output);
    })();
</script>

That is not valid JavaScript.

As MonkeyZeus mentioned in the comments, you need to quote it so it appears as a string in your JavaScript code. The reason that doing that is causing a different syntax error is that CSV files contain new line characters, new line characters are not valid inside of a single quote or double quote JavaScript string, so it is interpreted as the end of the line of code, and that line is treated as an unterminated string, causing the syntax error.

There are a couple of ways you could fix this. If all of your target browsers support ES6, the fix would be fairly simple, just quote it with a ` template string, which allows line breaks.

var result = $.csv.toObjects(<?php echo '`' . $data . '`' ?>);

To be on the safe side, you should escape any backticks:

var result = $.csv.toObjects(<?php echo '`' . sr_replace('`', '\`', $data) . '`' ?>);

If you need to support ES5 it gets a little more complicated. As MonkeyZeus suggested you will need to escape single quotes, but you will also need to escape new line characters and/or carriage returns:

var result = $.csv.toObjects(<?php echo "'" . str_replace('\n', '\\n', str_replace('\r\n', '\n', str_replace("'", "\\'", $data) . "'"; ?>);

A possibly easier way to do it that should work in ES5 would be to JSON encode the string and then decode it in the JavaScript:

var result = $.csv.toObjects(JSON.parse(<?php echo "'" . json_encode($data) . "'" ?>));

SyntaxError when trying to parse csv with jquery-csv for Mustache.js template

1 Answers1