phpmydev phpmydev - 1 month ago 7
jQuery Question

$.each jQuery find common values between items

Given multiple items with class send-po each with data-loc=n

I have the following:

var qty = 0;
var loc = 0;
var product = '';
$('.send-po').each(function(i,item){
qty = $(this).attr('data-qty');
loc = $(this).attr('data-loc');
product = $(this).attr('data-product');
});


What is the best way to group items when loc[0] = loc1 or loc2 etc?

I need to send a PO to a specific loc or vendor with all items shipping from a common loc(ation)

Thank you!

Based on mhodges suggestion I have done the following:

for(var o=0;o<100;o++){
$('.send-po[data-loc='+o+']').each(function(i,item){
console.log(item);
qty = $(this).attr('data-qty');
loc = $(this).attr('data-loc');
product = $(this).attr('data-product');
});
}


I think I can use this. Thanks mhodges!

Another, related issue:

var orders = '<table>';
$.each(cart,function(j,contents){
if(contents[n].loc === contents[o].loc){
//group the two
} else {
orders += '<tr><td>'+contents.qty+'<br/>Sending from '+contents.loc+'</td><td>'+contents.product+'<br>'+contents.options+'<br>'+comments+'</td><td>'+number_format(order.Price,2,'.',',')+'</td><td>'+number_format(order.subtotal,2,'.',',')+'</td></tr>';
orders += '<tr><td><input class="carrier" id="carrier_'+contents.cartId+'" placeholder="Carrier"></td><td><input class="tracking" id="cartid_'+contents.cartId+'" data-item="'+contents.product+' '+contents.options+'" placeholder="Tracking # for this item"><button class="btn-small send" id="send-tracking_'+contents.cartId+'">Send</button></td><td><input type="hidden" class="send-po" data-loc="'+contents.loc+'" data-product="'+contents.product+' '+contents.options+'" data-qty="'+contents.qty+'"><textarea id="afs-comments-'+contents.loc+'" placeholder="Comments to Vendor"></textarea><br/><button id="sendPO-'+contents.loc+'">Send PO</button></td></tr>';
orders += '<tr><td colspan="4"><hr></td></tr>';
}
});
orders += '</table>';
$('#orders').html(orders).show();


Right now I have 2 sets of output for each contents[] see graphic what I have now)

What I need is to have the inputs and send PO only once per location: only have the inputs once per location (contents.loc)

Any suggestions?

Answer

As mentioned in my comment:

You can use the data attribute in a selector to group items by a certain data attribute. Example: $(".send-po[data-loc=0]") will get you all of the items with the class "send-po" as well as a data-loc attribute equal to 0

If you do not know which value you are looking for, or you wish to loop over all of the potential values, rather than guessing at how many you have and creating a for loop with a static set of values, you can actually retrieve the current list of values at any time and then iterate over those. That helps you in three ways:

1) It removes any unnecessary loop iterations / operations

2) It makes your code scalable and future-proof

3) It allows your data-loc values to be any value - strings, non-sequential numbers, etc.

Here's what the code might look like:

// Get the current list of all data-loc values
var locations = [];
$(".send-po[data-loc]").each(function () {
    var location = $(this).data("loc");
    // check to see if the value is already in the array
    if (locations.indexOf(location) === -1) {
        // if not, push it onto the array
        locations.push(location );
    }
});
locations.each(function (index, location) {
    // group the .send-po by data-loc value
    $('.send-po[data-loc='+ location + ']').each(function(i,item){
        console.log(item);
        qty = $(this).attr('data-qty');
        loc = $(this).attr('data-loc');
        product = $(this).attr('data-product');
    });
});
Comments