title: encodeURIComponent not working with array
body: <p>I'm trying to pass data between pages using Javascript, and I need to decode a pair of number that will be passed from Page1 to Page2.
  The array containing the number is a <code>JSON.parse</code> result from an <code>AJAX</code> request to <code>PHP</code> file, that queries a <code>SQL DB</code> (you can now release your breath).</p>
  
  
  
  <pre class="lang-js prettyprint-override"><code>response = '[{"id":"3","course_category":"Dancing &amp; Fitness"}, {"id":"2","course_category":"Fighting"}]';
  var myArray = JSON.parse(response);
  console.log(myArray[1]['id']);
  var foo = encodeURIComponent(myArray[1]['id']);
  console.log(foo);
  </code></pre>
  
  
  
  <p>the encode always shows </p>
  
  <p><code>Uncaught TypeError: Cannot read property 'id' of undefined</code> </p>
  
  <p>which is funny, because the first <code>console.log</code> always returns <strong>a correct number</strong>. I've also tried to do this</p>
  
  <pre><code>var foo=encodeURIComponent(myArray[1]['id']).toString();
  </code></pre>
  
  <p>but no luck.
  What am I doing wrong?</p>
  
  <p>Example JSON parsed data</p>
  
  <pre><code>console.log(myArray[0]['id']) //--&gt;shows 3
  </code></pre>
  
  <p>The function handling the ChangePageEvent </p>
  
  <pre><code>$("#el" + (myArray[i].id).on("click", function () {
      var url = "single_course_page.html?idcat=" + encodeURIComponent(myArray[i].id);
      window.location.href = url;
  });
  </code></pre>