CODEWITHSUNDEEP
javascriptjquery
user1260827
user1260827

Reputation: 1520

get text from attribute and format it

I have a div elements with data-seat and data-row property:

<div class='selected' data-seat='1' data-row='1'></div>
<div class='selected' data-seat='2' data-row='1'></div> 
<div class='selected' data-seat='3' data-row='1'></div> 
<div class='selected' data-seat='1' data-row='2'></div>
<div class='selected' data-seat='2' data-row='2'></div>

I want print friendly message for selected seats:

var  selectedPlaceTextFormated =''; 
$(".selected").each(function () {

        var selectedPlace = $(this);

        selectedPlaceTextFormated += "Row " + selectedPlace.attr("data-row") + " (seat " + selectedPlace.attr("data-seat") + ")\n";
    });
alert(selectedPlaceTextFormated);

This code works well and shows the following:

Row 1 (seat 1)
Row 1 (seat 2)
Row 1 (seat 3)
Row 2 (seat 1)
Row 2 (seat 2)

But, I want group seats by row, i.e I want the following:

Row 1(seats: 1,2,3)
Row 2(seats: 1,2)

also, order by row number. How can I do this?
Thanks. DEMO

Upvotes: 2

Views: 105

Answers (5)

adeneo
adeneo

Reputation: 318232

I'd just do this:

var text = []; 
$(".selected").each(function () {
    var a = parseInt($(this).data('row'), 10),
        b = $(this).data('seat');
    text[a] = ((text[a])?text[a]+', ':'')+b;
});

var selectedPlaceTextFormated ='';
$.each(text, function(index, elem) {
    if (!this.Window) selectedPlaceTextFormated += "Row " + index + " (seat " + elem + ")\n";
});

alert(selectedPlaceTextFormated);

FIDDLE

Upvotes: 1

Daedalus
Daedalus

Reputation: 7722

This can be achieved with a few slight modifications to your existing code to use arrays; these arrays are then used to build a string:

var selectedPlaceTextFormated = [];
var textFormatted = '';
$(".selected").each(function(i) {

    var selectedPlace = $(this);
    var arr = [];

    selectedPlaceTextFormated[selectedPlace.attr("data-row")] += "," + selectedPlace.attr("data-seat");

});

selectedPlaceTextFormated.shift();

for (var i = 0; i < selectedPlaceTextFormated.length; i++) {
    var arr2 = selectedPlaceTextFormated[i].split(",");
    arr2.shift();
    textFormatted += "Row " + (i + 1) + " seats: (" + arr2.join(",") + ")\n";
}

alert(textFormatted);

​ Demo

Upvotes: 1

Jithin
Jithin

Reputation: 2604

You need to use another variable to store the row, and format accordingly.

var selectedPlaceTextFormated =''; 
var prevRow = 0;
$(".selected").each(function () {
    var selectedPlace = $(this);
    var row = selectedPlace.attr("data-row");
    var seat = selectedPlace.attr("data-seat");
    if(prevRow == row){
        selectedPlaceTextFormated += "," + seat;
    }
    else{
        if(selectedPlaceTextFormated != ''){
            selectedPlaceTextFormated += ')\n';
        }
        selectedPlaceTextFormated += "Row " + row + " (seat " + seat;
        prevRow = row;
    }

});
selectedPlaceTextFormated += ')\n';
alert(selectedPlaceTextFormated);

Check http://jsfiddle.net/nsjithin/R8HHC/

Upvotes: 1

Thariama
Thariama

Reputation: 50832

Here is the code

var selectedPlaceTextFormated ='';
var row_array = [];

$(".selected").each(function () {
    var selectedPlace = $(this);
    if (!row_array[selectedPlace.attr("data-row")]){
      row_array[selectedPlace.attr("data-row")] = selectedPlace.attr("data-seat");
    }
    else row_array[selectedPlace.attr("data-row")] += ','+selectedPlace.attr("data-seat");
});

for (row in row_array){
    alert("Row "+ row +"(seat " + row_array[row] + ")\n" );
}

And here the link to the working fiddle: http://jsfiddle.net/3gVHg/

Upvotes: 3

jAndy
jAndy

Reputation: 236032

First of all, jQuery is kind enough to automatically grab data- attributes into its data expando object, that means, you can access those data via:

jQueryObject.data('seat');

for instance.

Your actual question could get solved like

var $selected      = $('.selected'),
    availableRows  = [ ],
    selectedPlaceTextFormated = '',
    currentRow,
    currentSeats;

 $selected.each(function(_, node) {
     if( availableRows.indexOf( currentRow = $(node).data('row') ) === -1 ) {
         availableRows.push( currentRow );
     }
 });

 availableRows.forEach(function( row ) {
     selectedPlaceTextFormated += 'Row ' + row + '(';

     currentSeats = $selected.filter('[data-row=' + row + ']').map(function(_, node) {
         return $(this).data('seat');
     }).get();

    selectedPlaceTextFormated += currentSeats.join(',') + ')\n';
 });

jsFiddle: http://jsfiddle.net/gJFJW/3/

Upvotes: 2

Related Questions