Javascript 将PHP数组编码为HTML数据属性内的JSON表示形式

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

我想将我的

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>

因此，我相信，如果我错了，请纠正我，传递给

JSON.parse

方法的任何内容都不是有效的

JSON字符串

因此，我尝试以多种方式操纵
.blade.php
中
数据扇区
属性的值，以解决此问题。我几乎可以肯定有一个角色需要逃离，但解决办法是避开我

检查来源给了我：

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



有人能帮我指出正确的方向吗？我的意思是，请解释一下，一个受挫的门外汉能够理解，到底是什么问题，以及如何着手解决这个问题

编辑：（请参阅javascript）


$（文档）.ready（函数（）{
让businessSectorData={！！json_encode（$businessSector）！！}；
让$businessSector=$（“#businessSector”）；
$businessSector.select2（stdSelect2（businessSectorData））；
$businessSector.on（“变更”，职能（e）{log（“变更”，e）}）；
函数日志（名称，evt）{
$（“输入[name='template[]']”）。每个（函数（）{
设$this=$（this）；
让sectors=JSON.parse（$this.data（“sectors”））；
变量i=0
});
}
})

jQuery
.data（）
方法检测类似于JSON的属性值并自动解析它们。您不必自己调用
JSON.parse（）。
$this.data（“扇区”）
的返回值将是一个已解析的JavaScript数组

但是，在将JSON字符串放入属性值时必须小心，因为序列化的值可能包含单引号字符。使用正则表达式替换可以很容易地避开这些问题。
我建议在将数组添加到
数据扇区之前对其进行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>


(() => {
常量元素=document.querySelector（“.minimal”）；
const sectors=JSON.parse（atob（element.dataset.sectors））；
console.log（“数据”，扇区）；
})();

您可以使用PHP函数
base64\u encode（）
进行编码。
发布您获得的实际输出。该
元素看起来很好。但是，您没有发布导致实际错误的JavaScript代码。在您给出的示例中，
数据扇区
字符串中有一个新行字符。当您删除它时，它可以正常工作。在它显示“教育和”之后，会出现
\n
。你实际上看不到它，但它破坏了代码。我假设你知道什么是新行字符。可能是因为你粘贴代码的方式。正如我所说的，当我移除它时，它就起作用了。此外，您不需要解析它——它已经可以作为JSON使用了。另一件事，有更简单的方法来做到这一点！这种模式导致了意大利面代码。我意识到我把这些评论当作感谢框来使用是在违反规则，但是谢谢！我甚至没有认为这个函数是问题的根源，因为我遇到的所有其他问题都集中在流氓角色上。我的收藏（太小了）又增加了一点知识！感谢大家的提醒，现在我已经看到了很多单引号字符可能会导致问题的例子，所以要小心了。@Andrewardiman说实话，jQuery行为有点可疑，尽管我承认它很有用。这是一个让人惊讶的“意想不到的特性”。
<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
      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>