尝试使用jquery-csv for Mustache.js模板解析csv时的SyntaxError

Question

我尝试使用PHP回显CSV文件的内容，然后用jquery-csv解析它以使用Mustache.js模板中的数据。我已经尝试过Papa Parse，虽然它能够解析数据并填充模板，但它似乎破坏了也在使用的Isotope库。

代码：

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

当我尝试这样做时，我得到一个错误，"Uncaught : missing ) after argument list“。当我使用jquery-csv demo时，我可以让它在复制和粘贴来自php echo的源代码中出现的$data时工作：

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?"

Answer 1

这是因为您正在将一个未加引号的原始字符串注入到JavaScript代码中。输出的HTML源代码中的JavaScript应该如下所示：

<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>

这是无效的JavaScript。

正如MonkeyZeus在注释中提到的，您需要给它加引号，以便它在JavaScript代码中显示为字符串。这样做会导致不同的语法错误，原因是CSV文件包含换行符，换行符在单引号或双引号JavaScript字符串中无效，因此它被解释为代码行的末尾，该行被视为未终止的字符串，从而导致语法错误。

有几种方法可以解决这个问题。如果您的所有目标浏览器都支持ES6，修复方法将相当简单，只需使用允许换行的` template string引用它即可。

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

为了安全起见，您应该避开任何反标记：

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

如果你需要支持ES5，那就有点复杂了。正如MonkeyZeus建议的那样，您需要转义单引号，但还需要转义换行符和/或回车符：

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

一种可能更简单的方法是对字符串进行ES5编码，然后在JavaScript中对其进行解码：

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