Display Javasciprt file's data on a Razor page

Question

I have a javascript file in which I have an array of object. I want to display the content of that array on a razor page. My question is how to access a javascript file's content in a razor page. This is my cshtml file.

@{
ViewData["Title"] = "HOME PAGE";
Layout = "~/Views/Shared/_GameLayout.cshtml";
}

<div id="Display"></div>
@section Scripts {
    <script src="~/js/leaderboard.js" type="module"></script>
    <script>
        var data = '';
        @* console.log(array,"array") *@
        for (var key in array) {
            if (array[key].a != undefined) {
                data += '<span>' + array[key].a +  '</span> ';
            }
            if (array[key].b != undefined) {
                data += '<span>' + array[key].b + '</span> ';
            }
            if (array[key].c != undefined) {
                data += '<span>' + array[key].c + '</span> ';
            }
        }

        $("#Display").html(data);
    </script>
}

This is my JavaScript file.

let array =
    [{ a: 53 },
    { b: 31 },
    { c: 15 }]

console.log(array,"array")

I want to display the content of array in html tags.

When I console.log array from the leaderboard.js file it is printing the array but when I console .log it from cshtml it says that array is not defined.

Answer 1

Not sure how do you want to display the array, here is a simple demo about how to display the array data:

<div id="Display"></div>
@section Scripts {
    <script src="~/js/leaderboard.js"></script>
    <script>
        var data = '';
        for (var key in array) {
            if (array[key].a != undefined) {
                data += '<span>' + array[key].a +  '</span> ';
            }
            if (array[key].b != undefined) {
                data += '<span>' + array[key].b + '</span> ';
            }
            if (array[key].c != undefined) {
                data += '<span>' + array[key].c + '</span> ';
            }
        }

        $("#Display").html(data);
    </script>
}

Update:

Please remove type="module" in your razor pages.

Reference:

https://javascript.info/modules-intro#module-level-scope