CODEWITHSUNDEEP
javascriptjqueryhtml
Qiqke
Qiqke

Reputation: 486

After getting values of html data-attributes how to pass the unique values to an iterable object

I have this situation; I made an data-attribute to be able to keep the values that are a property of an object, like this 2 ones:

<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>

and another one:

<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>

And this x30 times. So at the end I have something like this:

In the chrome console I can get this: enter image description here

But this is where I can reach now; Code I have tried:

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

Above code return blank in ID "test". Next more the same:

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

And so on not gonna post everything I tried otherwise you will start thinking bad about me :). So my question is: How to get that values from $('.listaServicios') and take the non repeteated ones and them pass to and array to a list or whatever I can iterate it. Thank you so much as usually!!! If I am missing something just let me know!

Upvotes: 1

Views: 46

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337691

You're using data-title in the JS, yet the HTML has data-listservices. They need to match.

There's a couple of other things to note here. Firstly you can simplify the JS by using jQuery's map() method to build the array. Secondly, it's better practice to use data() instead of attr() to retrieve data attributes. Finally, td elements do not have a name attribute. It needs to be removed to keep your HTML valid. Try this:

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>

Upvotes: 1

Related Questions