Appending string to value of array

Question

Hi Im populating select > options using my json using below code. Here my doubt is I want to add custom attribute only if value is "IN". Anyone can help to achieve this

$.each( data, function( i, val ) {
    items.push( "<option value='" + val.countryCode + "'>" + val.countryName + "</option>" );
});

What did you try? Simply check your `IN` value in the function (if/ else) — Nicolas R, Sep 01 '14 at 12:43
I dont want to check "val.countrycode" in loop. Is it possible to add attr once array populated — prakashstar42, Sep 01 '14 at 12:45
"I dont want" --- any technical argumentation behind this behaviour? — zerkms, Sep 01 '14 at 12:46
I thought there will be best alternate to do this instead of checking in loop(FYI array length is 250), after array populated — prakashstar42, Sep 01 '14 at 12:48
"best" --- the best from what perspective? `if` statement takes one line. Is a single line too complicated? — zerkms, Sep 01 '14 at 12:49
Here I dont meant number of line. My doubt is, is it necessary to do if condition? — prakashstar42, Sep 01 '14 at 12:52
@zerkms Whats your problem, I don't think your trying to solve my problem. — prakashstar42, Sep 01 '14 at 12:54

Kartikeya Khosla · Answer 1 · 2014-09-01T13:09:17.417

0

$.each( data, function( i, val ) {
   if(val.countryCode !='IN') {
     items.push( "<option value='" + val.countryCode + "'>" + val.countryName + "</option>" );
  }
   else {
     items.push( "<option data-id=1 value='" + val.countryCode + "'>" + val.countryName + "</option>" );
  }
});

edited Sep 01 '14 at 13:09

answered Sep 01 '14 at 12:45

Kartikeya Khosla

18,743
8
43
69

2

It makes sense to teach newbies with something that doesn't look like spaghetti: 1. with `{}` that enclose `if-else` bodies 2. with proper indentation 3. without insane amount of duplication – zerkms Sep 01 '14 at 12:47
the above answer is absolutely correct with proper formatting and inside ifelse statement we can give one line without {} so its not the issue... – Kartikeya Khosla Sep 01 '14 at 13:01
It is syntactically correct. But it's not smart to teach newbies with terrible code. – zerkms Sep 01 '14 at 13:05
2

Still terrible, sorry. Indentation, braces position, duplication. This piece of code won't pass a code review in a decent company. – zerkms Sep 01 '14 at 13:10

score 0 · Answer 2 · answered Sep 01 '14 at 12:47

0

Try something like this

$.each( data, function( i, val ) {
    items.push( "<option value='" + val.countryCode +( val.countryCode == "IN" ? "data-attr = 'value'" : "" ;) "'>" + val.countryName + "</option>" );
});

answered Sep 01 '14 at 12:47

Pranav C Balan

113,687
23
165
188

score 0 · Answer 3 · edited May 23 '17 at 12:12

Currently it's only possible with a if condition. You can increase speed by breaking on the first found result, but you need to use a for-loop:

for(var i=0;i<countryArr.length;i++) {
  if(countryArr[i].countryCode === "IN") {
    items.push( "<option value='" + countryArr[i].countryCode + "'>" + countryArr[i].countryName + "</option>" );
    break;
  }
});

If you want to use forEach see this post.. But a some expression might be easier:

countryArr.some(function(data) {
    var check=countryArr[i].countryCode ==="IN";
    if(check) {
       items.push("<option value='" + data.countryCode + "'>" + data.countryName + "</option>");
    }
    return check; //some stops, if it returns true
});

ECMA6 will introduce a find method so you can shortcut this:

items.push(countryArr.find(function(data) {
  return data.countryCode === "IN";
});

Adrian Kalbarczyk · Answer 4 · 2014-09-05T12:23:06.467

-1

If I understand your question correctly:

$.each( data, function( i, val ) {
  items.push( "<option "+ (val.countryCode === "IN" && "data-id=1" || "") + " value='" +  val.countryCode + "'>" + val.countryName + "</option>" );
});`

edited Sep 05 '14 at 12:23

answered Sep 01 '14 at 12:51

Adrian Kalbarczyk

728
5
9

Even though technically it will work - it's terribly unreadable. – zerkms Sep 01 '14 at 12:53
Just as every HTML generated by JS. That's why people (including me) created templating engines I created https://github.com/adriank/ACFrontend. But the question is about generating HTML in JS and this is one-liner:). Could be also val.countryCode === "IN" ? "data-id=1" : "" – Adrian Kalbarczyk Sep 01 '14 at 12:58
"Just as every HTML generated by JS" --- not even close. You could introduce a local variable to hold the conditional expression evaluation result. Do you realize that `+` has a higher precendence than a conditional operator? `+` also has the higher precedence than `===`. So it will run `" – zerkms Sep 01 '14 at 12:59
@zerkms it's just a matter of taste. For me thinking about variable names, "var" and managing variables is extremely troublesome. It's better to read code from left to right like a book. In book you have 2 to 5 paragraphs per page and each paragraph has multiple lines. I like to see the same in source code. But of course JS doesn't look as elegant here as for example Python, for sure. – Adrian Kalbarczyk Sep 01 '14 at 13:07
It has nothing to do with *taste*. So your book analogy fails as soon as you write an expression that you cannot (and you actually cannot, because your code is incorrect) evaluate in your head easily. `+` has higher precedence than a conditional operator. `'1' + true === true ? '2' : '3'` Check your *intuition* (must be *knowledge* actually) – zerkms Sep 01 '14 at 13:08
Oh, and even after 2 days you haven't fixed the mistake. That's weird :-S – zerkms Sep 04 '14 at 07:07
From what I see here you also can type and definitely have much more time than me, so why haven't you fix that? – Adrian Kalbarczyk Sep 05 '14 at 12:22

Appending string to value of array

4 Answers4