title: jQuery: mysterious Json parsing error
body: <p>I am getting an error on a page with a code that works perfectly on another page... Here it is:</p>
  
  <pre><code>$.each(json,function(index,element){
  var tr = $("&lt;tr&gt;").appendTo($tabbody);
  $(tr).append('&lt;td&gt;&lt;a target="_blank" href="forum.php?t='+element.topic_id+'"&gt;'+element.topic_nom+"&lt;/a&gt;&lt;/td&gt;"+'&lt;td&gt;'+element.date_heure+"&lt;/td&gt;");
  });
  </code></pre>
  
  <p>json is the result of a GET request on a php page:</p>
  
  <pre><code>$data = $query-&gt;fetchAll(PDO::FETCH_ASSOC);
  echo json_encode($data);
  </code></pre>
  
  <p>An exemple of result:</p>
  
  <pre><code>[
      {
      "topic_nom": "Deuxième question de linterro manip 5",
      "topic_id": "1",
      "user_nick": "Symael",
      "user_id": "1",
      "msg_id": "10",
      "date_heure": "2013-02-17 18:28:04"
      },
      {
      "topic_nom": "Quel est le sens de la vie ?",
      "topic_id": "2",
      "user_nick": "Symael",
      "user_id": "1",
      "msg_id": "10",
      "date_heure": "2013-02-17 18:28:04"
      }
  ]
  </code></pre>
  
  <p>Which is valid Json... The error I get is:</p>
  
  <pre><code>TypeError: invalid 'in' operand e
  ...ute(i),"string"==typeof r){try{r="true"===r?!0:"false"===r?!1:"null"===r?null:+r...
  </code></pre>
  
  <p>And if I try $.parseJSON(json); :</p>
  
  <pre><code>SyntaxError: JSON.parse: unexpected character
  ...ute(i),"string"==typeof r){try{r="true"===r?!0:"false"===r?!1:"null"===r?null:+r...
  </code></pre>
  
  <p>When I validate my Json on <a href="http://jsonlint.com/" rel="nofollow">http://jsonlint.com/</a> the result is:</p>
  
  <pre><code>Parse error on line 1:
  [    {        "to
  ^
  Expecting '{', '['
  </code></pre>
  
  <p>And if a manually rewrite the first [ it suddenly becomes valid.
  I think I'm the victim of a very strange glitch here, could anyone help me ? Oo</p>
  
  <hr>
  
  <p>Here is the solution, see Stoive's answer for explanations.</p>
  
  <pre><code>  obj = $.parseJSON(json.trim());
      $.each(obj,function(index,element){
        var tr = $("&lt;tr&gt;").appendTo($tabbody);
        $(tr).append('&lt;td&gt;&lt;a target="_blank" href="forum.php?t='+element.topic_id+'"&gt;'+element.topic_nom+"&lt;/a&gt;&lt;/td&gt;"+'&lt;td&gt;'+element.date_heure+"&lt;/td&gt;");
      });
  </code></pre>