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

Question

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:

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!

None of the `.listaServicios` elements have a `data-title` attribute...? Do you mean `data-listservices` instead? — Rory McCrossan, Jan 16 '20 at 11:46
Note that I removed the C# and ASP.Net Core tags - they are not relevant. — Rory McCrossan, Jan 16 '20 at 11:47
Yes, why not?, I mean I can chose whatever name after data- isn´t it?, I mean; data-othername or data-whatService or I really need to make data-tittle?. I mean I named that data-attribute as a "data-listServices" what yes I want `data-listServices`. — Qiqke, Jan 16 '20 at 11:49
You can make them anything you like, but the name you use in the JS needs to match what's in the HTML. — Rory McCrossan, Jan 16 '20 at 11:50
I read that are case sensitive thats I was writing like this... gonna try — Qiqke, Jan 16 '20 at 11:51
I've added an answer for you below, which hopefully makes it clearer. — Rory McCrossan, Jan 16 '20 at 11:51

score 1 · Accepted Answer · answered Jan 16 '20 at 11:50

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>

Sorry Rory I wrote wrong but in the code it was okey, trying to make it works, I´ll let you know.. — Qiqke, Jan 16 '20 at 11:57
Yes it is perfect!, but it repeteas the values, sorry Rory this is my 2th in javascript jaja. Can I do something like distinct? Anyway I can handle this jaja. Thank you very much as usually!. — Qiqke, Jan 16 '20 at 12:00
No problem, glad to help. There's lots of ways to dedupe an array, see [this answer](https://stackoverflow.com/a/9229821/519413) — Rory McCrossan, Jan 16 '20 at 12:02

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

1 Answers1