Iterate through columns' data atrributes

Question

I am trying to dynamically set my hyperlinks strings I want to pass through by iterating over a list of table columns' data attributes while getting their name and value to create my hyperlink string.

Here is the HTML Code.

<table width="85%" border="1" align="center" cellpadding="2" cellspacing="2" id="results"  name="results222">               
        <cfoutput query="qryGetMain">
            <cfset count = count + 1>
            <tr>
                <td align="center" class="tblHeader" nowrap>#state#</td>
                <td align="center" class="style6 " nowrap data-state="#state#" data-ticketType="open" data-dataRange="">#openTickets#</td>
                <td align="center" class="style6 " nowrap data-state="#state#" data-ticketType="closed" data-dataRange="">#closedTickets#</td>
                <td align="center" class="style6 " nowrap data-state="#state#" data-ticketType="open" data-dataRange="LT8">#openTicketsLTE8#</td>
                <td align="center" class="style6 " nowrap data-state="#state#" data-ticketType="open" data-dataRange="GT8">#openTicketsGT8#</td>
                <td align="center" class="style6 " nowrap data-state="#state#" data-ticketType="open" data-dataRange="GT15">#openTicketsGT15#</td>
                <td align="center" class="style6 " nowrap data-state="#state#" data-ticketType="open" data-dataRange="GT30">#openTicketsGT30#</td>

                <td align="center" class="style6 " nowrap data-state="#state#" data-ticketType="closed" data-dataRange="LT8">#closedTicketsLTE8#</td>
                <td align="center" class="style6 " nowrap data-state="#state#" data-ticketType="closed" data-dataRange="GT8">#closedTicketsGT8#</td>
                <td align="center" class="style6 " nowrap data-state="#state#" data-ticketType="closed" data-dataRange="GT15">#closedTicketsGT15#</td>
                <td align="center" class="style6 " nowrap data-state="#state#" data-ticketType="closed" data-dataRange="GT30">#closedTicketsGT30#</td>               
            </tr>

         </cfoutput>   

    </tbody>

Here is my JS code I have. I am already looping through all table columns of the particular table I want. Starting from Var link_array = [] down a few lines is what I have got from other questions asked Using jQuery to get data attribute values with .each() but couldn't get it to do what I want. I have tried other stuff that I could think of but rather not show here since it would just confuse everyone more I think.

$('table[name="results222"] tr').find('td').each(function() {
                    if($(this).text() == '0' || $(this).text() == '0.00') {
                        $(this).css('background','red');    
                    }
                    else if ($(this).text() > 0) {
                        var link_array = [];

                        var link_array = $.map(this, function(el) {
                             return {name: 'state', value: $(el).data()}
                        });
                        $(this).html('<a href=details.cfm>'+$(this).text()+'</a>');
                    }
                });

So I need a string that would basically make the hyperlink like this

href=details.cfm?state=GA&ticketType=open&dataRange=LT8.

I see if I define an argument in the .data('state') it actually does iterate through all of the data-state attributes where I can get the values, but I would rather create something more dynamic so that when a new developer creates another data attribute in the HTML code, the JS would automatically pick up the new one.

Thanks in advance!

Code added from Z-Bone's answer.

$('table[name="results222"] tr').find('td').each(function() {
                    if($(this).text() == '0' || $(this).text() == '0.00') {
                        $(this).css('background','red');    
                    }
                    else if ($(this).text() > 0) {
                        var data = $(this).data();
                        var href = "details.cfm?";
                        if (data) {
                            var first = true;
                            for (var i in data) {
                                if (!first) {
                                    href += "&";
                                }
                                href += i + "=" + (data[i] || "");
                                first = false;
                            }
                        }
                        $(this).html('<a href="' + href + '">' + $(this).text() + '</a>');
                    }

                });

Sounds more complicated than necessary. I also see no need for javascript. — Dan Bracuk, Jan 13 '17 at 03:44

Z-Bone · Accepted Answer · 2017-01-13T01:16:51.623

2

EDITED

Try this new code which does it dynamically

$('table[name="results222"] tr').find('td').each(function () {
 if ($(this).text().length == 0) {
  $(this).css('background', 'red');
 } else if ($(this).text().length > 0) {
  var data = $(this).data();
  var href = "details.cfm?";
  if (data) {
   var first = true;
   for (var i in data) {
    if (!first) {
     href += "&";
    }
    href += i + "=" + (data[i] || "");
    first = false;
   }
  }
  $(this).html('<a href="' + href + '">' + $(this).text() + '</a>');
 }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table width="85%" border="1" align="center" cellpadding="2" cellspacing="2" id="results"  name="results222">               
        <cfoutput query="qryGetMain">
            <cfset count = count + 1>
            <tr>
                <td align="center" class="tblHeader" nowrap>#state#</td>
                <td align="center" class="style6 " nowrap data-state="#state#" data-ticketType="open" data-dataRange="">#openTickets#</td>
                <td align="center" class="style6 " nowrap data-state="#state#" data-ticketType="closed" data-dataRange="">#closedTickets#</td>
                <td align="center" class="style6 " nowrap data-state="#state#" data-ticketType="open" data-dataRange="LT8">#openTicketsLTE8#</td>
                <td align="center" class="style6 " nowrap data-state="#state#" data-ticketType="open" data-dataRange="GT8">#openTicketsGT8#</td>
                <td align="center" class="style6 " nowrap data-state="#state#" data-ticketType="open" data-dataRange="GT15">#openTicketsGT15#</td>
                <td align="center" class="style6 " nowrap data-state="#state#" data-ticketType="open" data-dataRange="GT30">#openTicketsGT30#</td>

                <td align="center" class="style6 " nowrap data-state="#state#" data-ticketType="closed" data-dataRange="LT8">#closedTicketsLTE8#</td>
                <td align="center" class="style6 " nowrap data-state="#state#" data-ticketType="closed" data-dataRange="GT8">#closedTicketsGT8#</td>
                <td align="center" class="style6 " nowrap data-state="#state#" data-ticketType="closed" data-dataRange="GT15">#closedTicketsGT15#</td>
                <td align="center" class="style6 " nowrap data-state="#state#" data-ticketType="closed" data-dataRange="GT30">#closedTicketsGT30#</td>               
            </tr>

         </cfoutput>   

    </table>

edited Jan 13 '17 at 01:16

answered Jan 12 '17 at 23:59

Z-Bone

1,534
1
10
14

Well this would create my link string, but remember I wanted to see if there is a way to dynamically get every attribute that basically starts with "data", get its name and value and use in link string. If it can't be done, then this is fine, but want to make sure there isn't a way to get every(however many) without hardcoding the name of the attributes in the JS code. Thanks for your help! – ScrumMaster Guy Jan 13 '17 at 01:05
@ScrumMasterGuy Oh OK man.. I misunderstood your need. Check again – Z-Bone Jan 13 '17 at 01:17
this is very close to what I need. But do you happen to know why it only picks up one of the data attributes? As if it should be looping through each of the attributes and creating that string like you have. Right now I always get "details.cfm?state=SC" – ScrumMaster Guy Jan 13 '17 at 01:34
My code does that. It loops through all data attributes... In your code there are a few problems, but the main one is that you use `$(el).data() as if it was a string, while it is actually an array of all data attributes together.... I suggest you use the logic from my answer as it does exactly what you need- build an href from all data attributes – Z-Bone Jan 13 '17 at 01:40
I have added your code to my original post to indicate that I am fully using your code, but for whatever reason it only gets the data-state attribute's value and uses for the link. None of the other attributes are being added. I can definitely see your code is wanting to loop where you do the check for first, etc. but it's not picking up the other ones. Thanks for all your help :) – ScrumMaster Guy Jan 13 '17 at 02:09
On the first 3 it misses other attirbutes and that's because your elements have empty datarange and empty tickettypes.. You can see that the 4th, 5th etc `` do have all the attirbutes in the URL ... good luck – Z-Bone Jan 13 '17 at 02:15
Your code works man. It was my HTML that seemed to be the issue. . Apparently data-ticketType or data-dataRange is a problem that I was not aware of. It should be data-tickettype and data-datarange. I just noticed that in your last comment you had it all lowercase, but took me a day of frustration to figure it out..lol...thanks again! – ScrumMaster Guy Jan 13 '17 at 23:19
ohh haha at least you sorted it out.. also if you want the attribute to convert to dataRange (camelcase) instead of datarange you can use the attribute like this `data-data-range`. Cheers – Z-Bone Jan 13 '17 at 23:21

score 1 · Answer 2 · edited May 23 '17 at 12:16

1

altered from how to create query parameters

function paramaterizeData(data) {
   let ret = [];
   for (let d in data)
     ret.push(d + '=' + data[d]);
   return '?'+ret.join('&');
}
var data = { 'state': 'state54', 'ticket_type': 'open', 'dataRange': 'LT8' };
var querystring = paramaterizeData(data);

https://jsfiddle.net/fmzwqmja/5/

edited May 23 '17 at 12:16

Community

1
1

answered Jan 13 '17 at 00:01

Hodrobond

1,665
17
18

Iterate through columns' data atrributes

2 Answers2