title: How to add images depending on the value in an array
body: <p>I have a <code>&lt;li&gt;</code> and images sitting next to the 'li' text. I want to insert images depending on the value that array has. Ex:</p>
  
  <pre><code>  $.each(state.qaccess, function (i, products) {
      var prodIcon = '';
      if (products["product"] === 'wm.od.prod.nsr'){
      prodIcon = '&lt;span class="product-icons" id="product-icons"&gt;&lt;/span&gt;'
      }else if (products["product"] === 'gp.od.dev.nsr'){
      prodIcon = '&lt;span class="product-icon" id="product-icon"&gt;&lt;/span&gt;'
      }
      allproducts.push(products.product);
  });
  </code></pre>
  
  <p>where state.qaccess` is an object (shown in the img)</p>
  
  <p><img src="https://i.stack.imgur.com/0Qtqy.png" alt="enter image description here"></p>
  
  <p>As you can see in the above image, the object has a field 'product' and 'product' has multiple values. Now depending on those values I'd like to insert icons. viz: for <code>product ==='wm.od.prod.nsr'</code> I'd like to insert the <code>&lt;span class="product-icons"&gt;&lt;/span&gt;</code> (since im using the image sprites im using the  element to insert icons).
  With the above code, i get all the icons for <code>gp.od.dev.nsr</code> and none for the <code>wm.od.prod.nsr</code>? 
  Any ideas on how to achieve this?
  Thanks!!</p>