Using conditions inside JavaScript

Question

I have this infinite scroll code which works perfectly fine.

I m trying to use if-else conditions inside my Code but due to some syntax (i think) error its not echoing out.

My code goes as :

function addrows(rows) {
        let postList = $("#post-list");
        $.each(rows, function (i, row) {
            var img = row.image;
            let rowHtml = `
                 <div class="mt-3">
             `+if (img == null){ +`
                    <a href="post?id=`+row.id+`" style="color:black;">
                       <p style="font-size: 30px;padding: 15px 30px 15px 30px;">`+row.title+`</p>
                    </a>
             `+} else { +`
                    <a href="post">
                       <img src="images-main/images/`+row.image+`" alt="post-image" class="img-fluid rounded w-100">
                    </a>
              `+}+`
                 </div>
           `;
                        
            postList.append(rowHtml);            

        });
    }

Please note that the whole infinite scroll code works fine if I m to remove those if-else conditions.

Any help is greatly appreciated.

because "str" + if (condtion) { + "true" + } else { + "false" + } is nowhere near valid javascript ... use ternary operator ... (condition) ? (value when true) : (value when false) - for the above, I would use () liberally to make sure you get the right result — Jaromanda X
– Jaromanda X, Commented Oct 28, 2020 at 5:31
@JaromandaX i used this , and it says "unexpected var" var beverage = (age >= 21) ? "Beer" : "Juice"; console.log(beverage); — Harry K
– Harry K, Commented Oct 28, 2020 at 5:37
where did you put var? inside the "string" + "another string"?? — Jaromanda X
– Jaromanda X, Commented Oct 28, 2020 at 5:38

Noman Fareed · Accepted Answer · 2020-10-28 05:39:48Z

1

You can not concat the if else with the string, it is not valid syntax in javascript, either you can use the ternary conditional operator or using if else like this

  let postList = $("#post-list");
  $.each(rows, function (i, row) {
    var img = row.image;
    let rowHtml = `<div class="mt-3">`;
    if (img == null) {
      rowHtml += `<a href="post?id=` + row.id + `" style="color:black;">
                      <p style="font-size: 30px;padding: 15px 30px 15px 30px;">`+ row.title + `</p>
                  </a>`;
    }
    else {
      rowHtml += `<a href = "post" >
                      <img src="images-main/images/`+ row.image + `" alt = "post-image" class="img-fluid rounded w-100" >
                  </a>`;
    }
    rowHtml += '< /div>';
    postList.append(rowHtml);
  });
}

answered Oct 28, 2020 at 5:39

Noman Fareed

2843 silver badges11 bronze badges

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

3 Comments

Harry K Over a year ago

and hei, can you help me with some other issue in the same code../

Harry K Over a year ago

can you join this chat room, will explain the situation there. Thanks chat.stackoverflow.com/rooms/222945/…

Harry K Over a year ago

Bro can you please respond on the chat

Phil · Accepted Answer · 2020-10-28 05:45:37Z

1

As you've seen, you cannot inline an if..else into string concatenation.

One thing jQuery makes very easy is DOM element creation and manipulation so why not use it

function addrows(rows) {
  $("#post-list").append(rows.map(row => {
    const a = $("<a>")
    if (row.image) {
      a.append($("<img>", {
        src: `images-main/images/${row.image}`,
        alt: "post-image"
      }).addClass("img-fluid rounded w-100"))
    } else {
      a.css({ color: "black" }).append($("<p>", {
        text: row.title
      }).css({ fontSize: "30px", padding: "15px 30px" }))
    }
    
    return $("<div>").addClass("mt-3").append(a)
  })
}

answered Oct 28, 2020 at 5:45

Phil

166k25 gold badges265 silver badges269 bronze badges

1 Comment

Harry K Over a year ago

Glad to know this as well. will practice on this

Collectives™ on Stack Overflow

Using conditions inside JavaScript

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related