CODEWITHSUNDEEP
javascriptjqueryjson
user9616496
user9616496

Reputation:

How to run an if statement inside of an append statement

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>"
    );
  }
});

Upvotes: 3

Views: 354

Answers (2)

Joe Warner
Joe Warner

Reputation: 3452

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>

Upvotes: 2

Grafluxe
Grafluxe

Reputation: 481

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);
  }
);

Upvotes: 1

Related Questions