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>

当我尝试这个时，我在参数列表之后得到错误，＆＃34; Uncaught SyntaxError：missing）。＆＃34;当我使用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中应该更简单的方法是对JSON进行编码，然后在JavaScript中对其进行解码：

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

尝试使用jquery-csv为Mustache.js模板解析csv时出现SyntaxError

1 个答案: