Append comma (,) plus html if td has any text otherwise append only html

Question

I'm working in some jQuery code and I've some doubts. This is what I've until now:

var html = '';
data.entities.forEach(function (value, index, array) {
    html += index !== data.entities.length-1 ? value.pais + ', ' : value.pais;
});

var rowUpdate = $('#distribuidorBody').find('#td-' + data.idToUpdate);
rowUpdate.text() !== "" ? html += ', ' + html : html;
rowUpdate.append(html);

The big idea: I can execute the same code several times so the first time rowUpdate doesn't have any values so text() is empty and I will get some output in HTML as for example: Country1, Country2, Country3 and so on then rowUpdate.text() should be Country1, Country2, Country3. So if second time I ran the same code and add Country4, Country5 then rowUpdate.text() should be Country1, Country2, Country3, Country4, Country5. Is my code right? If not any help? I'm not getting errors but I need to understand if what I'm doing is right or wrong. Also I like to know what this code does:

rowUpdate.text() !== "" ?: html += ', ' + html;

It's not mine I see it around it but doesn't know what it does.

MamaWalter · Answer 1 · 2014-11-24T22:08:00.710

1

An alternative to forEach could be map.

var text = data.entities.map(function(v){ return v.pais }).join(', ');

or reduce:

var text = data.entities.reduce(function(a, b){ return {pais: a.pais +', '+ b.pais}}).pais;

and for the ternary operator, you need two expressions: condition ? expr1 : expr2 MDN

var rowUpdate = $('#distribuidorBody').find('#td-' + data.idToUpdate);
text = (rowUpdate.text() !== "") ? ', ' + text : text;
// alternative with if
// if(rowUpdate.text() !== "") text = ', ' + text ;
rowUpdate.append(text);

Update: add span on each value

var text = data.entities.map(function(v){ return '<span class="countryToDelete">' + v.pais + '</span>'  }).join(', ');

edited Nov 24 '14 at 22:08

answered Nov 24 '14 at 20:16

MamaWalter

2,073
1
18
27

This answer is the nicest one +1. It's how [I'd do it](http://stackoverflow.com/questions/16607557/javascript-perform-join-on-value-in-object-array/16607599#16607599). To OP - don't append a `span class` and don't find based on `$("#id-" +text` - those are both horrible - you're querying your presentation layer for business logic. Instead store the items in an array and add click handlers to each one. Map to elements and then append handlers to them - not to strings. Keep a reference to the row element itself rather than a selector to select it with. – Benjamin Gruenbaum Nov 25 '14 at 11:36

score 0 · Accepted Answer · answered Nov 24 '14 at 19:51

A probably better solution is to build up an array of the items that you want to display, and then use .join(', ') to create the text:

var items = [];
data.entities.forEach(function (value, index, array) {
    items.push(value.pais);
});
var displayText = items.join(', ');
$('#distribuidorBody').find('#td-' + data.idToUpdate).html(displayText);

Now, the last line, because '#td-' + data.idToUpdate is an ID, it should be unique to the page (if not, you should make it so that it is). If or once that is true, you can shorten it to

$('#td-' + data.idToUpdate).html(displayText);

and what about if I have previous text as I mention in my post? It will be keep or will be overwrite? Also thinking, now I'll need to append some `` to each items on the array since later I'll allow remove them by click on each one, how? — ReynierPM, Nov 24 '14 at 21:05

Append comma (,) plus html if td has any text otherwise append only html

2 Answers2