Add an if statement inside a for loop jquery

Question

I have a javascript array with a list of informations about people. I populate this array dynamically into a table on the frontend.

But, not every person has a website. So I want to enter a condition for the website e.g. if(url !== "") {<a href="'+ list[i].url + '">Webseite</a>}

But it just tells me "unexpected token if". Ideas?

for(var i = 0; i < list.length; ++i ) {
   $(".list").append('\
     <tr>\
     <td>'+ list[i].name + '</td>\
     <td>' + list[i].area1 + ',<br> ' + list[i].area2 + ',<br> ' + list[i].area3 + '</td>\
     <td>'+ list[i].small_area + '</td>\
     <td>'+ list[i].studies + '</td>\
     <td>'+ list[i].email + '</td>\
     <td><a href="'+ list[i].url + '">Webseite</a></td>\
     <td>'+ list[i].other + '</td>\
     </tr>\
   ');
 };

Sanchit Patiyal · Accepted Answer · 2018-02-18 19:59:31Z

1

You can't use if condition inside append instead you can use a ternary operator like this

for (var i = 0; i < list.length; ++i) {
  $(".list").append('\
    <tr>\
    <td>' + list[i].name + '</td>\
    <td>' + list[i].area1 + ',<br> ' + list[i].area2 + ',<br> ' + list[i].area3 + '</td>\
    <td>' + list[i].small_area + '</td>\
    <td>' + list[i].studies + '</td>\
    <td>' + list[i].email + '</td>\
    <td>' + (list[i].url != null ? '<a href="' + list[i].url + '">Webseite</a>' : '') + '</td>\
    <td>' + list[i].other + '</td>\
    </tr>\
    ');

};

answered Feb 18, 2018 at 19:59

Sanchit Patiyal

4,9301 gold badge16 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Eliane Over a year ago

hmm it doesnt work for me... it says missing ) after argument list

Miro · Accepted Answer · 2018-02-18 20:02:40Z

0

You can prepare a variable called Webseite before the append and then add it to the rest. In one case it's the url in the other it's empty.

 var list = [
 {name:"One",url:'http://google.com'},{name:"Two", url:""}
  
 ];
 
 for(var i = 0; i < list.length; ++i ) {
     
     
     if(list[i].url !== "") {
        var Webseite = '<a href="'+ list[i].url + '">Webseite</a>'
     }else{
        var Webseite = '';
     } 
     
     $(".list").append('\
    <tr>\
    <td>'+ list[i].name + '</td>\
    <td>' + list[i].area1 + ',<br> ' + list[i].area2 + ',<br> ' + list[i].area3 + '</td>\
    <td>'+ list[i].small_area + '</td>\
    <td>'+ list[i].studies + '</td>\
    <td>'+ list[i].email + '</td>\
    <td>' + Webseite + '</td>\
    <td>'+ list[i].other + '</td>\
    </tr>\
    ');
 }

td{
padding:10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list"></div>

answered Feb 18, 2018 at 20:02

Miro

8,7104 gold badges40 silver badges75 bronze badges

1 Comment

Miro Over a year ago

Glad I could help. Please feel free to mark it as answered.

Taha Azzabi · Accepted Answer · 2018-02-18 20:04:38Z

0

Try this

(list[i].url) ? list[i].url : ''

This is a shorthand if..else using conditional (ternary) operator

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator

edited Feb 18, 2018 at 20:04

answered Feb 18, 2018 at 19:57

Taha Azzabi

2,5881 gold badge23 silver badges33 bronze badges

Comments

hassen zouari · Accepted Answer · 2018-02-18 20:07:11Z

0

You can create a string as a result and checking each time if the element of the object exists then add it.

for(var i = 0; i < list.length; ++i ) {
    var result = '<tr>'
    result += '<td>'+ list[i].name + '</td>';
    result += '<td>' + list[i].area1 + ',<br> ' + list[i].area2 + ',<br> ' + list[i].area3 + '</td>';
    result += '<td>'+ list[i].small_area + '</td>';
    result += '<td>'+ list[i].studies + '</td>';
    result += '<td>'+ list[i].email + '</td>';
    if (list[i].url) {
      result += '<td><a href="'+ list[i].url + '">Webseite</a></td>';
    }
    result += '<td>'+ list[i].other + '</td>';
    result += '</tr>';
    $(".list").append(result);
  };

answered Feb 18, 2018 at 20:07

hassen zouari

9712 gold badges11 silver badges18 bronze badges

Collectives™ on Stack Overflow

Add an if statement inside a for loop jquery

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related