在 HTML 数据属性中将 PHP 数组编码为 JSON 表示答案

【问题标题】：Encoding a PHP array in to a JSON representation, inside a HTML data attribute在 HTML 数据属性中将 PHP 数组编码为 JSON 表示
【发布时间】：2020-08-01 04:08:39
【问题描述】：

我很感激这个问题以前被问过很多次，因为我刚刚花了九个小时阅读问题和答案，但我无法解决这个问题。

我想将我的php 对象businessSectors 传递给html 数据属性data-sectors，将其转换为JSON，这样我就可以将它传递给javascript 函数，在那里我将对其进行解析进入javascript 对象。

<td><input type="checkbox" class="minimal" 
name="template[]" data-sectors="{{json_encode((array)$template->businessSectors)}}" value=" 
{{$template->_id}}" {{$template->display ? "checked" : ""}}></td>

错误：

Uncaught SyntaxError: Unexpected token E in JSON at posostion 0 at JSON.parse`

因此，我相信，如果我错了，请纠正我，传递给 JSON.parse 方法的任何内容都不是有效的 JSON string。

因此，我尝试以多种方式操纵.blade.php 中data-sectors 属性的值，以解决问题。我几乎可以肯定有一个角色需要转义，但解决方案是避开我。

检查来源给了我：

<input type="checkbox" class="minimal" name="template[]" data-sectors='["Education and 
Training"]' value="5d3eb15110560b0a800f359c" >

有人可以请我指出正确的方向吗解决问题。

编辑：（请参阅javascript）

<script>
$(document).ready(function(){

    let businessSectorData = {!! json_encode($businessSector) !!};

    let $businessSector = $("#businessSector");

    $businessSector.select2(stdSelect2(businessSectorData));

    $businessSector.on("change", function (e) { log("change",e) });

    function log (name, evt) {
        $("input[name='template[]']").each(function(){
            let $this = $(this);
            let sectors = JSON.parse($this.data("sectors"));
            var i = 0
        });
    }
})

【问题讨论】：

发布你得到的实际输出。
<input> 元素看起来不错。但是，您没有发布导致实际错误的 JavaScript 代码。
在您给出的示例中，data-sectors 字符串中有一个换行符。当您删除它时，它可以正常工作。
在“教育和”之后是\n。你实际上没有看到它，但它破坏了代码。我假设你知道换行符是什么。这可能来自您粘贴代码的方式。正如我所说，当我删除它时，它会起作用。此外，您不需要解析它 - 它已经作为 JSON 工作。另一件事，有更简单的方法可以做到这一点！这种模式导致了意大利面条式代码。

标签： javascript php json mongodb laravel-blade

【解决方案1】：

我建议在将数组添加到 data-sectors 之前对数组进行 base64 编码。您不必担心未转义的值，这是一种常见的方法。

然后您可以成功解码和解析数组。

这是一个例子：

<input
      type="checkbox"
      class="minimal"
      name="template[]"
      data-sectors="WyJFZHVjYXRpb24gYW5kIFRyYWluaW5nIl0="
      value="5d3eb15110560b0a800f359c"
    />

    <script>
      (() => {
        const element = document.querySelector(".minimal");
        const sectors = JSON.parse(atob(element.dataset.sectors));
        console.log("data", sectors);
      })();
    </script>

您可以使用PHP函数base64_encode()进行编码。

【讨论】：

【解决方案2】：

jQuery .data() 方法检测类似于 JSON 的属性值并自动解析它们。您不必自己打电话给JSON.parse()。 $this.data("sectors") 的返回值将是一个已经解析的 JavaScript 数组。

但是，您必须小心将 JSON 字符串放入属性值中，因为您的序列化值可能包含单引号字符。您可以使用正则表达式替换轻松地转义它们。

【讨论】：

我意识到我使用 cmets 作为感谢信箱违反了规则，但是谢谢！我什至没有认为这个函数是问题的根源，因为我遇到的所有其他问题都集中在流氓角色上。还有一点点知识可以添加到我的（太少）收藏中！感谢您的提醒，我现在已经看到很多单引号字符可能导致问题的例子，所以要小心。
@AndrewHardiman 老实说，jQuery 的行为有点可疑，尽管我承认它很有用。这是让人们感到惊讶的“意想不到的功能”之一。