title: Sum values inan arrays is not working- jQuery
body: <p>I'm building a property valuation form.<br />
  U can filter by postcode and type.<br />
  after filtering, I should show a list with the properties and the average price but I don't know why the sum is not working.</p>
  <p>Thank you in advance for your help :)<br />
  here my code
  .................................
  ...
  ...
  ...
  ...
  ...
  ...
  ...
  ...</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var houses = [{
      Postcode: "2011",
      Type: "typehouse1",
      Price: "101"
  },
  {
      Postcode: "2011",
      Type: "typehouse1",
      Price: "200"
  },
  {
      Postcode: "2010",
      Type: "typehouse1",
      Price: "234"
  },
  {
      Postcode: "2011",
      Type: "typehouse1",
      Price: "100"
  },
  {
      Postcode: "2012",
      Type: "typehouse2",
      Price: "500"
  },
  {
      Postcode: "2011",
      Type: "typehouse2",
      Price: "100"
  },
  {
      Postcode: "2013",
      Type: "typehouse2",
      Price: "100"
  },
  {
      Postcode: "2013",
      Type: "typehouse2",
      Price: "455"
  }];
  var postcodeArray = [];
  var typeArray = [];
  
  // adding unique years to yearsArray
  $.each(houses, function (index) {
      var postcode = houses[index].Postcode;
      if ($.inArray(postcode, postcodeArray) == -1) {
          postcodeArray.push(postcode);
      }
  });
      
  //sorting by postcode
  postcodeArray.sort();
  var $pcode = $("#postcode");
  var $housetype = $("#type");
  var $container = $("#details").find("tbody");
  // append the years to select
  $.each(postcodeArray, function (i) {
      $pcode.append('&lt;option value="' + postcodeArray[i] + '"&gt;' + postcodeArray[i] + '&lt;/option&gt;');
  });
  
  $pcode.change(function () {
      var selectedpcode = this.value;
      //filter based on  selected postcode.
      typeArray = jQuery.grep(houses, function (product, i) {
          return product.Postcode == selectedpcode;
      });
      
      updateTable(typeArray);
  });
  
  $housetype.change(function () {
      var selectedtype = this.value;
      //filter select based on selected type
      selectedArray = jQuery.grep(typeArray, function (product, i) {
          return product.Type == selectedtype;
          
      });
      updateTable(selectedArray);
  
      var sum = 0;
        
        $(selectedArray).each(function() {
          sum += $(this)[0].Price;
          console.log("Added: ", $(this)[0].Price) 
        });
        
        console.log("Sum is:", sum);
        console.log("The average is:", sum / selectedArray.length)
  });
      
      
        
  
  //To update the table element with selected items
  updateTable = function (collection) {
      $container.empty();
      for (var i = 0; i &lt; collection.length; i++) {
          $container.append("&lt;tr&gt;&lt;td&gt;" + collection[i].Postcode + "&lt;/td&gt;&lt;td&gt; " + collection[i].Type + "&lt;/td&gt;&lt;td&gt;" + collection[i].Price + "&lt;/td&gt;&lt;/tr&gt;");
      }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div id="DrpDwn"&gt;
          Postoce&lt;input id="postcode"&gt;&lt;/input&gt;
          House type:&lt;select id="type"&gt;
                  &lt;option&gt;None&lt;/option&gt;
                  &lt;option value="typehouse1"&gt;type house 1&lt;/option&gt;
                  &lt;option value="typehouse2"&gt;type house 2&lt;/option&gt;
              &lt;/select&gt;       
  &lt;/div&gt;
  &lt;br /&gt;
  Filtered houses information
      &lt;table id="details"  border="1" cellpadding="2" cellspacing="2"&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;Postcode&lt;/th&gt;
              &lt;th&gt;Type&lt;/th&gt;
              &lt;th&gt;Price&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt; 
      &lt;tbody&gt;&lt;/tbody&gt;   
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>