Laravel send data from view to JavaScript file

Question

i want to send data that i get it from controller to javascript file that exist in public/js/maps.js how can i do this can any one help

my code Controller :

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

view page:

<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'},
            ]
        });
    }
};

so i want to display data in markers that exist in the javascript file.

Ruslan Zhomir · Accepted Answer · 2021-11-03 05:09:20Z

2

If it was in a single blade file, you could echo de json_encoded variables

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

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

If it's in a separate js file, you either need to get it through an ajax request or store the data in an html element to query inside your js file.

Something like

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

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

I think blade has a @json directive just for such a scenario.

edited Nov 3, 2021 at 5:09

Ruslan Zhomir

8981 gold badge11 silver badges29 bronze badges

answered Nov 2, 2021 at 21:01

IGP

16.4k5 gold badges34 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mehdi Gh · Accepted Answer · 2021-11-03 01:22:37Z

0

in normanl case when you call a data from controller usually we use

{{ $data }}

but if you want to call the same data but inside a javascript code or file i recommend using

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

edited Nov 3, 2021 at 1:22

answered Nov 2, 2021 at 21:13

Mehdi Gh

317 bronze badges

1 Comment

Community Over a year ago

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

Laravel send data from view to JavaScript file

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related