Получаем значения атрибута data- * и устанавливаем их список

Question

Я пытался присвоить элементу атрибут данных, чтобы они получали идентификатор этого элемента и пытались получить доступ к данным, но безуспешно. Возможно, это связано с тем, как отображается HTML, я имею в виду:

<div class="col-md-2 col-sm-12 col-xs-12 ">
    <table>
        <thead>
            Servicios
            <tr>
                @foreach (var feature in hotel.Features.Take(6)) {
                <!-- DATA-* LISTA SERVICIOS-->
                <td class="col-md-6 showTruncateText" id="serviciosHotel" data-listServices="@feature.Code">
                    @feature.Description
                </td>

                <!--Esta pieza hace que se genere filas con 3 elementos. Una vez llega al
                    tercero, empieza otra fila.-->
                if (counter % 2 == 0) { @:
            </tr>
            <tr>
                } counter++; }
            </tr>
        </thead>
    </table>
</div>

Это мой html код, и он выглядит так:

<div class="col-md-2 col-sm-12 col-xs-12 ">

    Servicios
    <table>
        <thead>
            <tr>
                <!-- DATA-* LISTA SERVICIOS-->
                <td class="col-md-6 showTruncateText" id="serviciosHotel" data-listservices="APCO">
                    Aptos./Hab. con cocina
                </td>
                <!--Esta pieza hace que se genere filas con 3 elementos. Una vez llega al
                    tercero, empieza otra fila.-->
                <!-- DATA-* LISTA SERVICIOS-->
                <td class="col-md-6 showTruncateText" id="serviciosHotel" data-listservices="CAFE">
                    Cafetería
                </td>
                <!--Esta pieza hace que se genere filas con 3 elementos. Una vez llega al
                    tercero, empieza otra fila.-->
            </tr>
            <tr>
                <!-- DATA-* LISTA SERVICIOS-->
                <td class="col-md-6 showTruncateText" id="serviciosHotel" data-listservices="CFTE">
                    Caja fuerte individual
                </td>
                <!--Esta pieza hace que se genere filas con 3 elementos. Una vez llega al
                    tercero, empieza otra fila.-->
                <!-- DATA-* LISTA SERVICIOS-->
                <td class="col-md-6 showTruncateText" id="serviciosHotel" data-listservices="ITNS">
                    Punto de Internet
                </td>
                <!--Esta pieza hace que se genere filas con 3 elementos. Una vez llega al
                    tercero, empieza otra fila.-->
            </tr>
            <tr>
                <!-- DATA-* LISTA SERVICIOS-->
                <td class="col-md-6 showTruncateText" id="serviciosHotel" data-listservices="JARD">
                    Jardines /Terraza
                </td>
                <!--Esta pieza hace que se genere filas con 3 elementos. Una vez llega al
                    tercero, empieza otra fila.-->
                <!-- DATA-* LISTA SERVICIOS-->
                <td class="col-md-6 showTruncateText" id="serviciosHotel" data-listservices="JUEG">
                    Parque infantil
                </td>
                <!--Esta pieza hace que se genere filas con 3 elementos. Una vez llega al
                    tercero, empieza otra fila.-->
            </tr>
            <tr>
            </tr>
        </thead>
    </table>
</div>

Пока все здесь хорошо, но в части js я получаю неправильные ответы, я имею в виду, что я пробовал много способов, но самое близкое, что я получил, было null и undefined.

    var dataServicios = document.querySelector('serviciosHotel').dataset;
    for (var i in dataServicios) {
        console.log(i, dataServicios[i])
    };
    var listaServicios = document.getElementById('serviciosHotel');
    var listaServicios2 = listaServicios.getAttribute('data-listservices');
    console.log(listaServicios2);

    var dataServicios2 = document.getElementById("serviciosHotel");
    var nombreServicio = dataServicios2.dataset.listServices;
    console.log(nombreServicio);

    var serviciosdelhotel = document.getElementById("serviciosHotel");
    var ratings = serviciosdelhotel.getAttribute("data-listServices");
    console.log(ratings);

    JQUERY
    var servicioshotelenrique = $("#serviciosHotel");

    var owner = servicioshotelenrique.data("listServices");
    console.log(owner);
    var dataServicios = $('#serviciosHotel').data();

    for (var i in dataServicios) {
        $('<li>', {
            text: i + ': ' + data[i]
        }).appendTo('#out');
    }
    console.log(dataset(document.getElementById('serviciosHotel')[0]));
    $("#serviciosHotel").click(function () {

        var id = $(this).attr('data-listServices');
        console.log(id);
    });
    console.log($("#serviciosHotel").data("listServices"));

Что я делаю неправильно ?? Я впервые работаю с атрибутами данных и не думаю, что это будет сложно, но ... вы знаете, я не вижу ясности. Большое спасибо !!

Answer 1

Смотрите ваши столицы. Атрибуты данных чувствительны к регистру.

console.log($("#serviciosHotel").data("listServices"));

Должно быть

console.log($("#serviciosHotel").data("listservices"));

Тогда это работает.

Answer 2

По моему мнению, вы пишете слишком много JS кода для извлечения данных из вашей серверной модели (или, может быть, переменная hotel является внедренной службой?).

Учитывая, что данные поступают из вашей серверной модели, хорошим обходным решением было бы написать приведенный ниже код в файле CS HTML.

<script>
    var model = @Html.Raw(Json.Serialize(Model));
</script>

Если ваш JS находится в отдельном файле, Вы можете хранить данные в скрытом элементе HTML.

Вы также можете поместить свой код JS в класс JS и вставить данные в параметры конструктора, например:

<script>
    var view = new NameOfTheViewClass(@Html.Raw(Json.Serialize(Model)));
    view.init();
</script>