Question

what would be the best way to simplify this code. I thought about using .contains but I’m unsure how. Tell me if you need more code.

Thank you.

$.each(catalog.products,
      function(index, value) {

          if (filterValue == '' || value.name.toUpperCase().indexOf(filterValue.toLocaleUpperCase()) != -1) {
              items.push('<li id="' + index + '">' +
                      '<a data-identity="productId"  href="./details.page?productId=' + index + '" >' +
                      '<img class="ui-li-thumb" src="' + value.thumbnail + '"/>' +
                      '<p>' + value.brand + '</p>' +
                      '<h3>' + value.name + '</h3>' +
                      '<span class="ui-li-count">' + value.price + ' $</span></li>') +
              '</a>';
          }


          else if (filterValue == '' || value.brand.toUpperCase().indexOf(filterValue.toLocaleUpperCase()) != -1) {
              items.push('<li id="' + index + '">' +
                      '<a data-identity="productId"  href="./details.page?productId=' + index + '" >' +
                      '<img class="ui-li-thumb" src="' + value.thumbnail + '"/>' +
                      '<p>' + value.brand + '</p>' +
                      '<h3>' + value.name + '</h3>' +
                      '<span class="ui-li-count">' + value.price + ' $</span></li>') +
              '</a>';
          }
      }
        );

Answer 1

It looks like a simple addition of an or clause to the top if statement, or am I missing something?

Have you already tried this?

$.each(catalog.products,
  function(index, value) {

      if (filterValue == '' || value.name.toUpperCase().indexOf(filterValue.toLocaleUpperCase()) != -1 || value.brand.toUpperCase().indexOf(filterValue.toLocaleUpperCase()) != -1) {
          items.push('<li id="' + index + '">' +
                  '<a data-identity="productId"  href="./details.page?productId=' + index + '" >' +
                  '<img class="ui-li-thumb" src="' + value.thumbnail + '"/>' +
                  '<p>' + value.brand + '</p>' +
                  '<h3>' + value.name + '</h3>' +
                  '<span class="ui-li-count">' + value.price + ' $</span></li>') +
          '</a>';
      }

  }
    );