从对象数组中删除未定义的元素

Question

I have an array of objects, some of these objects have the property "discount" with a value and some of them don't have the property at all. When I loop thru the array I would like to remove all the undefined elements because this is giving me an error. Here's some images to show you my issue:

 var data = [ { product: "Dusty Jumpsuit", url: "", image: "https://static1.squarespace.com/static/560c458be4b0af26f729d191/560c5de0e4b083d9c365515f/560d4d0de4b0edc898c43a14/1443712276073/kimem-dusty-jumpsuit_0358.jpg?format=2500w", altDesc: "Blouse", price: "$299.00", discount: "$350.00" }, { product: "Jacky Trousers", url: "", image: "https://static1.squarespace.com/static/560c458be4b0af26f729d191/560c5de0e4b083d9c365515f/560d4d2fe4b0edc898c43b3c/1443712308758/kimem-jacky-bicolor-waist-trousers-navy-black_0374+%28Michelle+Liv%27s+conflicted+copy+2015-08-31%29.jpg?format=750w", altDesc: "Pants", price: "$228.00" }, { product: "Lisa Shirt", url: "", image: "https://static1.squarespace.com/static/560c458be4b0af26f729d191/560c5de0e4b083d9c365515f/560d4d67e4b094d8b81ba47a/1443712364244/kimem-lisa-oversized-shirt-navy_0363.jpg?format=750w", altDesc: "Shirt", price: "$253.00" }, { product: "Jane Skirt", url: "", image: "https://static1.squarespace.com/static/560c458be4b0af26f729d191/560c5de0e4b083d9c365515f/560d4d8fe4b0f1182e35da9a/1443712404868/kimem-long-pleated-skirt-black_0354.jpg?format=750w", altDesc: "Shirt", price: "$150.00", discount: "$263.00" }, ]; function clothingView(item, index) { return (` <a href="${item.url}" class="shop-item"> <img src=${item.image} alt="${item.altDesc}" class="shop-item__img"> <div class="quickview"> <span class="quickview__icon">Quick View</span> <span class="quickview__info">${item.product} <br> <span class="quickview__price">${item.price}<span class="quickview__price--discount">${item.discount}<span></span> </span> <span class="clothing-index">${index}</span> </div> </a>`) }; var $productContainer = $('.products'); for (var i = 0; i < data.length; ++i) { $productContainer.append( clothingView(data[i], i) ) } 

 * { margin: 0; padding: 0; } *, *::before, *::after { box-sizing: inherit; } html { box-sizing: border-box; font-size: 40%; -webkit-font-smoothing: subpixel-antialiased; } body { font-family: "Karla", sans-serif; font-weight: 400; line-height: 1.6; color: #222; } .products { width: 100%; display: flex; flex-wrap: wrap; } .shop-item { width: calc(100% / 5); margin: 1rem; position: relative; display: flex; justify-content: center; } .shop-item__img { width: 100%; height: 100%; object-fit: cover; } .quickview { width: 100%; height: 100%; position: absolute; display: flex; flex-direction: column; justify-content: space-between; align-content: center; padding-bottom: 2rem; color: #222; letter-spacing: 0.15rem; text-transform: uppercase; opacity: 0; transition: all ease-in-out 250ms; } .quickview:hover { opacity: 1; } .quickview__icon { font-size: 1rem; background-color: rgba(204, 204, 204, 0.9); padding: 0.7rem 1rem; align-self: center; } .quickview__info { font-size: 1.2rem; align-self: center; text-align: center; } .quickview__info--price { font-size: 1rem; color: rgba(61, 61, 61, 0.6); } .clothing-index { display: none; } .quickview__price--discount { margin-left: .5rem; text-decoration: line-through; } 

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

I need to learn how to explain myself better, but I hope the images and the sample code is good enough to clarify the situation here. I tried adding {discount: ""} to all objects but I am not sure if that would be the best way to do this. Thanks in advance.

Answer 1

Change the template literal so that if there is no discount property, the quickview__price--discount span is not included in the HTML string:

function clothingView(item, index) {
  return (`
    <a href="${item.url}" class="shop-item">
      <img src=${item.image} alt="${item.altDesc}" class="shop-item__img">
      <div class="quickview">
        <span class="quickview__icon">Quick View</span>
        <span class="quickview__info">${item.product}
          <br>
          <span class="quickview__price">${item.price}
          ${ item.discount
             ? `<span class="quickview__price--discount">${item.discount}<span>`
             : '' }
          </span>
        </span>
        <span class="clothing-index">${index}</span>
      </div>
    </a>`)
};

 var data = [ { product: "Dusty Jumpsuit", url: "", image: "https://static1.squarespace.com/static/560c458be4b0af26f729d191/560c5de0e4b083d9c365515f/560d4d0de4b0edc898c43a14/1443712276073/kimem-dusty-jumpsuit_0358.jpg?format=2500w", altDesc: "Blouse", price: "$299.00", discount: "$350.00" }, { product: "Jacky Trousers", url: "", image: "https://static1.squarespace.com/static/560c458be4b0af26f729d191/560c5de0e4b083d9c365515f/560d4d2fe4b0edc898c43b3c/1443712308758/kimem-jacky-bicolor-waist-trousers-navy-black_0374+%28Michelle+Liv%27s+conflicted+copy+2015-08-31%29.jpg?format=750w", altDesc: "Pants", price: "$228.00" }, { product: "Lisa Shirt", url: "", image: "https://static1.squarespace.com/static/560c458be4b0af26f729d191/560c5de0e4b083d9c365515f/560d4d67e4b094d8b81ba47a/1443712364244/kimem-lisa-oversized-shirt-navy_0363.jpg?format=750w", altDesc: "Shirt", price: "$253.00" }, { product: "Jane Skirt", url: "", image: "https://static1.squarespace.com/static/560c458be4b0af26f729d191/560c5de0e4b083d9c365515f/560d4d8fe4b0f1182e35da9a/1443712404868/kimem-long-pleated-skirt-black_0354.jpg?format=750w", altDesc: "Shirt", price: "$150.00", discount: "$263.00" }, ]; function clothingView(item, index) { return (` <a href="${item.url}" class="shop-item"> <img src=${item.image} alt="${item.altDesc}" class="shop-item__img"> <div class="quickview"> <span class="quickview__icon">Quick View</span> <span class="quickview__info">${item.product} <br> <span class="quickview__price">${item.price} ${ item.discount ? `<span class="quickview__price--discount">${item.discount}<span>` : '' } </span> </span> <span class="clothing-index">${index}</span> </div> </a>`) }; var $productContainer = $('.products'); for (var i = 0; i < data.length; ++i) { $productContainer.append( clothingView(data[i], i) ) } 

 * { margin: 0; padding: 0; } *, *::before, *::after { box-sizing: inherit; } html { box-sizing: border-box; font-size: 40%; -webkit-font-smoothing: subpixel-antialiased; } body { font-family: "Karla", sans-serif; font-weight: 400; line-height: 1.6; color: #222; } .products { width: 100%; display: flex; flex-wrap: wrap; } .container { padding: 4rem 5rem !important; } .shop-item { width: calc(100% / 4); margin: 1.5rem; position: relative; display: flex; justify-content: center; } .shop-item__img { width: 100%; height: 100%; object-fit: cover; } .quickview { width: 100%; height: 100%; position: absolute; display: flex; flex-direction: column; justify-content: space-between; align-content: center; padding-bottom: 2rem; color: #222; letter-spacing: 0.15rem; text-transform: uppercase; opacity: 0; transition: all ease-in-out 250ms; } .quickview:hover { opacity: 1; } .quickview__icon { font-size: 1rem; background-color: rgba(204, 204, 204, 0.9); padding: 0.7rem 1rem; align-self: center; } .quickview__info { font-size: 1.2rem; align-self: center; text-align: center; } .quickview__info--price { font-size: 1rem; color: rgba(61, 61, 61, 0.6); } .popup { height: 100vh; width: 100%; background-color: rgba(245, 239, 236, 0.8); display: flex; justify-content: center; align-items: center; position: fixed; top: 0; left: 0; z-index: 100; opacity: 0; visibility: hidden; transition: all ease-in-out 250ms; } .popup__img { height: 95%; } .popup__close-icon { position: absolute; top: 1rem; right: 2.5rem; font-size: 3rem; color: #d1d1d1; cursor: pointer; transition: all ease-in-out 250ms; } .popup__close-icon:hover { color: rgba(61, 61, 61, 0.6); } .popup__close-icon-clothing { position: absolute; font-size: 3.6rem; font-weight: lighter; color: #222; top: -1rem; right: 1.5rem; cursor: pointer; } .overlay { position: fixed; overflow-y: scroll; overscroll-behavior: contain; top: 0; right: 0; bottom: 0; left: 0; opacity: 0; visibility: hidden; background-color: rgba(240, 240, 240, 0.6); } .popup-item { width: 75%; height: 150vh; background-color: #fff; margin: 5rem auto; display: flex; justify-content: center; } .product-info { padding: 5rem 3.5rem; letter-spacing: 0.1rem; color: #222; } .product-info--shop { padding: 0 3.5rem; } .product__price { font-size: 2.4rem; margin: 3rem 0; display: block; color: rgba(29, 29, 29, 0.7); } .product-info__text { font-size: 1.4rem; margin-bottom: 3rem; color: rgba(29, 29, 29, 0.7); } .detail-group { color: #222; margin-bottom: 4rem; } .detail-group__span { font-size: 1.1rem; text-transform: uppercase; } .detail-group__size { width: 12.5rem; font-size: 1.1rem; letter-spacing: 0.1rem; padding: 1.1rem 2rem; margin-top: 0.5rem; -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 0; border: 0; outline: none; background: url(../img/down-arrow.png) 85%/7% no-repeat #f8f8f8; } .detail-group__quantity { width: 7.5rem; padding: 1.1rem 1.6rem; margin-top: 0.5rem; outline: none; border: 0; background-color: #f8f8f8; } .clothing-item-flex { height: 100%; background-color: #fff; display: flex; } .clothing-item-flex__img-wrapper { min-width: 60%; margin: 1.5rem; overflow: hidden; } .clothing-item-flex__img-wrapper--no-margin { margin: 0; } .clothing-item-flex__img { width: 100%; height: 100%; object-fit: cover; } .btn { display: inline-block; font-size: 1.2rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2rem; padding: 1.2rem 2.6rem; border: 2px solid #fff; color: #fff; text-decoration: none; outline: none; transition: all 250ms ease-in-out; } .btn:hover { color: #222; background-color: #fff; } .btn--form { color: #222; border: 2px solid black; font-weight: 400; padding: 1.4rem 3.5rem; cursor: pointer; } .btn--form:hover { color: #fff; background-color: #222; } .btn--form--shop { padding: 2.3rem 3.4rem; } .btn-view { display: block; width: 10.5rem; margin-top: 4rem; font-size: 1.4rem; letter-spacing: 0.1rem; text-decoration: none; color: rgba(61, 61, 61, 0.6); border-bottom: 1px solid rgba(162, 162, 162, 0.7); } .popup-btn { width: 3rem; height: 3rem; position: absolute; top: 50%; right: 9%; cursor: pointer; } .popup-btn--prev { transform: rotate(180deg); left: 9%; } .popup-btn__icon { height: 100%; } .clothing-index { display: none; } .quickview__price--discount { margin-left: .5rem; text-decoration: line-through; } 

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