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变量

<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>' }