How to run an if statement inside of an append statement

Admin 1
Viewed 206

I'm trying to run an if statement inside of an append but it seems to come out as true regardless of what I expect the result to be. The problematic code is on lines 13 and 14, Code:

I've tried declaring it using the typical method of... if(xxx != "false") but this broke the entire page and no JS ran.

 $.getJSON("https://raw.githubusercontent.com/Fazyyy/Fazyyy.github.io/master/data/product.json", function(posts) {
  for(var post = 0; post < posts.length; post++) {
   $(".posts").append("<li " + 
    "data-price='"+ posts[post].price + "'" +
    "data-reviews='"+ posts[post].reviews + "'" +
    "data-name='"+ posts[post].name + "'" +
    "data-saving='"+ posts[post].was_price + "'" +
    ">" +
    "<div class='spacer'>" +
    "<img src='./img/" + posts[post].img +".jpg' />" +
    "<h2>" + posts[post].name + "</h2>" +
    "<p>" + "£<span class='price'>" + posts[post].price + "</span></p>" +
    ( posts[post].was_price != "false" ? "<p class='red'>£<span     class='strike'>" + posts[post].was_price + "</span></p>" : '<p></p>') +
    ( posts[post].reviews != "false" ? "<p class='reviews'>" +     posts[post].reviews + "% reviews score" : '<p></p>') +
    "<p><a href='#' class='basket'>Add To Basket</a></p>" + "</div>" +     "</li>"
    );
  }
});
jquery json javascript
2 Answers

Quick answer is don't.

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

you should abstract your problems following the DRY principles 'dont repeat yourself' and focus on making it easy to read and everything just has one responsibility.

you can see in my example that it almost looks like it would in html but in your example you have to struggle to parse the logic.

Another few things to note was you were doing something != 'false' where you had to do != instead of !== because you were comparing 'false' to false. read up on type equality

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness

$.getJSON("https://raw.githubusercontent.com/Fazyyy/Fazyyy.github.io/master/data/product.json", function(posts = []) {
  // appending only after we've created all posts to stop appending multiple times
  appendToPosts(posts.reduce((acc, post) => acc + createPost(post), ''))
});

function appendToPosts(html) {
  $(".posts").append(html);
}


function createPost(post) {
  return `<li
            data-price='${post.price}' 
            data-reviews='${post.reviews}'
            data-name='${post.name}'
            data-saving='${post.was_price}'>
              <div class='spacer'>
                <img src='./img/${post.img}.jpg' />
                <h2>${post.name}</h2>
                <p>£<span class='price'>${post.price}</span></p>
                ${hasPreviousPrice(post)}
                ${hasReviews(post)}
              </div>
         </li>`;
}

function hasPreviousPrice(post) {
  return post.was_price ?
    `<p class='red'>£<span class='strike'>${post.was_price}</span></p>` :
    ``
}

function hasReviews(post) {
  return post.reviews ?
    `<p class='reviews'>${post.reviews}% reviews score` :
    `<p><a href='#' class='basket'>Add To Basket</a></p>`
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="posts"></div>

user_82842390

Here's another approach. This one does not append multiple times, as it's a more expensive operation.

const productTmpl = ({was_price, reviews, price, name, img}) => {
  const wasPriceNode = was_price
    ? `<p class="red">£<span class="strike">${was_price}</span></p>` 
    : "<p></p>"
  const reviewsNode = reviews
    ? `<p class="reviews">${reviews}% reviews score</p>` 
    : "<p></p>"

  return `
    <li data-price="${price}"
      data-reviews="${reviews}"
      data-name="${name}"
      data-saving="${was_price}"
    > 
      <div class="spacer'">
        <img src="./img/${img}.jpg"/>
        <h2>${name}</h2>
        <p>£<span class="price">${price}</span></p>
        ${wasPriceNode}
        ${reviewsNode}
        <p>
          <a href="#" class="basket">Add To Basket</a>
        </p>
      </div>
    </li>
  `;
}

$.getJSON(
  "https://raw.githubusercontent.com/Fazyyy/Fazyyy.github.io/master/data/product.json",
  products => {
   const listItems = products.reduce((acc, cur) => acc + productTmpl(cur), "");
   $(".posts").html(listItems);
  }
);
user_73220300
Related