Laravel 将数据从视图发送到 JavaScript 文件

Question

我想将我从控制器获取的数据发送到 public/js/maps.js 中存在的 javascript 文件 我该怎么做才能有人帮忙

我的代码 控制器：

 public function index()
    {
        $userIp = "45.153.242.129";
        $locationData = \Location::get($userIp);
        
        return view('maps.index',[
            'location' => $locationData
          ]);
    }

查看页面：

<div id="world-map"></div>

maps.js

var handleVectorMap = function() {
    "use strict";
    if ($('#world-map').length !== 0) {
        $('#world-map').vectorMap({
            map: 'world_mill',
            scaleColors: [COLOR_GREY_DARKER, COLOR_GREY_LIGHTER],
            normalizeFunction: 'polynomial',
            hoverOpacity: 0.5,
            hoverColor: false,
            zoomOnScroll: true,
            markerStyle: {
                initial: {
                    fill: COLOR_RED,
                    stroke: 'transparent',
                    r: 3
                }
            },
            regionStyle: {
                initial: {
                    fill: COLOR_DARK_LIGHTER,
                    "fill-opacity": 1,
                    stroke: 'none',
                    "stroke-width": 0.4,
                    "stroke-opacity": 1
                },
                hover: {
                    "fill-opacity": 0.8
                },
                selected: {
                    fill: 'yellow'
                },
                selectedHover: { }
            },
            
            backgroundColor: 'transparent',
            markers: [
                {latLng: [41.90, 12.45], name: 'Vatican City'},
                {latLng: [43.73, 7.41], name: 'Monaco'},
            ]
        });
    }
};

所以我想在 javascript 文件中存在的标记中显示数据。

Answer 1

如果它在单个刀片文件中，您可以回显 de json_encoded variables

<div id="world-map"></div>

<script>
const data = JSON.parse('{{ json_encode($data); }}');
</script>

如果它在单独的 js 文件中，您要么需要通过 ajax 请求获取它，要么将数据存储在 html 元素中以在 js 文件中查询。

类似

<div id="world-map" data-maps='{{ json_encode($data) }}'></div>

const data = JSON.parse(document.getElementById('world-map').dataset.maps);

我认为 Blade 有一个 @json 指令只是针对这种情况。

Answer 2

在正常情况下，当您从控制器调用数据时，我们通常使用

{{ $data }}

但如果你想调用相同的数据，但在 javascript 代码或文件中，我建议使用

function (index, value) { data = '<p>'+value.data+'</P>' }