将 laravel 变量传递给 jquery 数组

Posted 2023-03-14

【中文标题】将 laravel 变量传递给 jquery 数组

【英文标题】：Pass a laravel variable into a jquery array

【发布时间】：2022-01-11 17:23:28

【问题描述】：

我正在尝试将一个变量传递给一个 jquery 自动完成脚本检查我找到的这个 url (https://jsfiddle.net/duoc5bbh/1/)。

自动填写表单

<input id="name" >
<input id="email" >

控制器

public function index()

    $value = Person::where('active', 'online')->get();
    return view('users.index', ['data' => $value]);

jQuery

$(function() 
  let users = [
      "email": "[e-mail]",
      "name": "marie"
      , 
      
       "email": "[e-mail]",
       "name": "miss"
     ];
);

我做了什么

$(function() 
  let users = [
      "email":  $value-> email ,
      "name":  $value-> name 
      ];
                    function handleAutocomplete(term) 
                        // use 'term' for custom filtering etc.
                        let options = $.grep(users, function(e) return e.name.startsWith(term); );
                        return options;
                    
                    $("#name").autocomplete(
                        minLength: 0,
                        source: function(request, response) 
                            let name = request.term;
                            let data = handleAutocomplete(name); /* get answers from somewhere.. */
                            response(data);
                        ,
                        focus: function(event, ui) 
                            $("#name").val(ui.item.name);
                            return false;
                        ,

                        select: function(event, ui) 
                            $("#name").val(ui.item.name);
                            $("#email").val(ui.item.email);
                            return false;
                        
                    ).autocomplete("instance")._renderItem = function(ul, item) 
                        return $("<li>")
                            .append("<a>" + item.name + "<br>" + item.email + "</a>")
                            .appendTo(ul);
                    ;
                );

我改了

  let users = [
      "email":  $value-> email ,
      "name":  $value-> name 
      ]

到这里

let users = ' json_encode($data) '

还是不行

这是我想要实现的目标 (https://jsfiddle.net/duoc5bbh/1/)，但我的数据来自数据库。

我是在 jquery 中使用 laravel 的新手，我需要您的帮助，谢谢。

【问题讨论】：

尝试使用let users = ' json_encode($data) ' 看看你会得到什么。

嗨@BhaumikPandhi 我已经做出了改变，但仍然知道结果见我上面的完整代码

您是否也修正了拼写错误['data' => $person] ？

是的，我做到了，这就是我想要实现的目标 (jsfiddle.net/duoc5bbh/1)，但我的数据来自数据库。

【参考方案1】：

你需要回显json_encoded变量并将其转换为带有JSON.parse()的js对象。

let users = JSON.parse(' json_encode($data) ');

Laravel 也曾经提供 @json 指令来帮助解决这个问题。

let users = JSON.parse('@json($data)');

现在，文档指向一个新的 Js 外观。

呈现 JSON

有时您可以将数组传递给您的视图，以便将其呈现为 JSON 以初始化 javascript 变量。例如：

<script>
    var app = <?php echo json_encode($array); ?>;
</script>

但是，您可以使用Illuminate\Support\Js::from 方法指令，而不是手动调用 json_encode。 from 方法接受与 PHP 的 json_encode 函数相同的参数；但是，它将确保正确转义生成的 JSON 以包含在 html 引号中。 from 方法将返回一个字符串 JSON.parse JavaScript 语句，该语句会将给定的对象或数组转换为有效的 JavaScript 对象：

<script>
    var app =  Illuminate\Support\Js::from($array) ;
</script>

最新版本的 Laravel 应用程序框架包含一个 Js 外观，它可以方便地在 Blade 模板中访问此功能：

<script>
    var app =  Js::from($array) ;
</script>

【讨论】：

嗨@IGP 感谢您的回复，我已经进行了更改，但仍然知道结果，请参阅上面的完整代码

您的 jquery 代码是与视图在同一个刀片文件中还是单独的 .js 文件中？

两者都在同一个刀片文件中