После получения значений html атрибутов данных, как передать уникальные значения в итерируемый объект

Question

У меня такая ситуация; Я сделал атрибут данных, чтобы иметь возможность хранить значения, которые являются свойством объекта, например, следующие 2:

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

    Servicios
    <table>
        <thead>
            <tr>
                <!-- DATA-* LISTA SERVICIOS-->
                <td class="col-md-6 listaServicios" name="listaServicios" data-listservices="AACC">
                    AACC Hab/Salón
                </td>

                <!-- DATA-* LISTA SERVICIOS-->
                <td class="col-md-6 listaServicios" name="listaServicios" data-listservices="APCO">
                    Aptos./Hab. con cocina
                </td>

            </tr>
            <tr>
                <!-- DATA-* LISTA SERVICIOS-->
                <td class="col-md-6 listaServicios" name="listaServicios" data-listservices="BAÑO">
                    Baño en habitación
                </td>

                <!-- DATA-* LISTA SERVICIOS-->
                <td class="col-md-6 listaServicios" name="listaServicios" data-listservices="MICR">
                    Microondas
                </td>

            </tr>
            <tr>
                <!-- DATA-* LISTA SERVICIOS-->
                <td class="col-md-6 listaServicios" name="listaServicios" data-listservices="NVRA">
                    Nevera
                </td>

                <td class="col-md-6 listaServicios" name="listaServicios" data-listservices="PLYC">
                    Playa cercana
                </td>

            </tr>
            <tr>
            </tr>
        </thead>
    </table>
</div>

и еще один:

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

    Servicios
    <table>
        <thead>
            <tr>
                <!-- DATA-* LISTA SERVICIOS-->
                <td class="col-md-6 listaServicios" name="listaServicios" data-listservices="AACC">
                    AACC Hab/Salón
                </td>

                <!-- DATA-* LISTA SERVICIOS-->
                <td class="col-md-6 listaServicios" name="listaServicios" data-listservices="ADAP">
                    Habitaciones minusvalidos
                </td>

                <tr>
                    <!-- DATA-* LISTA SERVICIOS-->
                    <td class="col-md-6 listaServicios" name="listaServicios" data-listservices="AERP">
                        Aeropuerto cercano
                    </td>

                    <!-- DATA-* LISTA SERVICIOS-->
                    <td class="col-md-6 listaServicios" name="listaServicios" data-listservices="APCO">
                        Aptos./Hab. con cocina
                    </td>

                    <tr>
                        <!-- DATA-* LISTA SERVICIOS-->
                        <td class="col-md-6 listaServicios" name="listaServicios" data-listservices="ASCR">
                            Ascensor
                        </td>

                        <!-- DATA-* LISTA SERVICIOS-->
                        <td class="col-md-6 listaServicios" name="listaServicios" data-listservices="AUDI">
                            Alquiler audiovisuales
                        </td>

                        <tr>
                        </tr>
        </thead>
    </table>
</div>

И это х30 раз. Итак, в конце у меня есть что-то вроде этого:

В консоли chrome я могу получить это:

Но это где я может достичь сейчас; Код, который я пробовал:

var array = [];
    $(".listaServicios").each(function () {
        array.push($(this).attr("data-listservices"));
    });
    $("#test").append(array.join(","))

Приведенный выше код возвращает пустое значение в идентификаторе "test". Далее еще то же самое:

    var dataServicios2 = $(".listaServicios").data("listservices");
    for (var i in dataServicios2) {
        console.log(i, dataServicios2[i])
    };

И так далее, не буду публиковать все, что я пытался, иначе вы начнете думать обо мне плохо :). Итак, мой вопрос : как получить эти значения из $('.listaServicios') и взять неповторяющиеся значения, а затем передать их в массив и вывести в список, или что-то еще, что я могу повторить. Большое спасибо как обычно !!! Если я что-то упустил, просто дайте мне знать!

Answer 1

Вы используете data-title в JS, но у HTML есть data-listservices. Они должны соответствовать.

Здесь нужно отметить еще несколько вещей. Во-первых, вы можете упростить JS, используя jQuery метод map() для построения массива. Во-вторых, для получения атрибутов данных лучше использовать data() вместо attr(). Наконец, элементы td не имеют атрибута name. Он должен быть удален, чтобы ваш HTML действовал. Попробуйте это:

var array = $(".listaServicios").map((i, e) => $(e).data('listservices')).get();
$("#test").append(array.join(","))

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-2 col-sm-12 col-xs-12 ">
  Servicios
  <table>
    <thead>
      <tr>
        <td class="col-md-6 listaServicios" data-listservices="AACC">AACC Hab/Salón</td>
        <td class="col-md-6 listaServicios" data-listservices="APCO">Aptos./Hab. con cocina</td>
      </tr>
      <tr>
        <td class="col-md-6 listaServicios" data-listservices="BAÑO">Baño en habitación</td>
        <td class="col-md-6 listaServicios" data-listservices="MICR">Microondas</td>
      </tr>
      <tr>
        <td class="col-md-6 listaServicios" data-listservices="NVRA">Nevera</td>
        <td class="col-md-6 listaServicios" data-listservices="PLYC">Playa cercana</td>
      </tr>
      <tr></tr>
    </thead>
  </table>
</div>

<div id="test"></div>