how to pass list of object from controller to view and use it in java script

here is my controller :

 public ActionResult Index()
    {
        // marker list is a list of marrker class
        ViewBag.MarkerList = Utility.markerList;
        return View();
    }

and here is my java script :

<script>

        var mymap = L.map('mapid', { doubleClickZoom: false }).setView([35.701060, 51.378075], 11.5);

        L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
            attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
            maxZoom: 18,
            id: 'mapbox.streets',
            accessToken: 'pk.eyJ1IjoiYXJtNG44IiwiYSI6ImNqbml0cnY5dzBtbncza280ZGNlNjZ6b2wifQ.ZZBr5TriuKvyev4Dh8bUpg'
        }).addTo(mymap);

        function myFunction(item) {

            var marker = L.marker([item.lat, item.lng], { riseOnHover: true }).addTo(mymap);
            marker.bindPopup("I am a popup.<br>"+ item.lat + "," + item.lng);
        }

        var array = @ViewBag.MarkerList;

        array.foreach(myFunction);

    </script>

I want use foreach on list in java script to call my function in it . I want run this code in page load.