title: Can not parse JSON data(containing HTML tags) in ajax response
body: <p><strong>EDIT</strong></p>
  
  <p>I simplified the array that I was trying to JSON encode in php script. The <strong>returnArr</strong> in php script now has only one key, value pair and still I am getting invalid character error:</p>
  
  <pre><code>PHP script:
      $returnArr["a"] = "val";
      er('Content-type:application/json;charset=utf-8');
      echo(json_encode($returnArr));
  </code></pre>
  
  <hr>
  
  <p>I am trying to return an array(in the form of key=>value) to my ajax call from the server side php script. Ajax receives the response but is unable to parse the JSON data returned by server. Gives error "Invalid character" on the line where I am parsing the returned data inside ajax success function.</p>
  
  <p>Below is my server side script:</p>
  
  <pre><code>$returnArr = Array();
  
      header('Content-Type: application/json');
      foreach($selectUpdatedRecord as $eachRow)
      {
          $key = $eachRow['cat_id'];
          $htmlStr = '&lt;td&gt;'.$eachRow["cat_id"].'&lt;/td&gt;
              &lt;td&gt;'.$eachRow["cat_name"].'&lt;/td&gt;
              &lt;td&gt;
                  &lt;select name="statCat-catId-'.$eachRow["cat_id"].'" disabled="disabled"&gt;
                      &lt;option value="'.$eachRow["cat_status"].'" selected="selected"&gt;'.$eachRow["cat_status"].'&lt;/option&gt;
                      &lt;option value="Enabled"&gt;Enabled&lt;/option&gt;
                      &lt;option value="Disabled"&gt;Disabled&lt;/option&gt;
                  &lt;/select&gt;&lt;/td&gt;
              &lt;td&gt;'.$eachRow["created_at"].'&lt;/td&gt;
              &lt;td&gt;&lt;button type="submit" id="save-cat-'.$eachRow["cat_id"].'" name="save-cat-'.$eachRow["cat_id"].'" class="btn btn-info save-ind"&gt;Save&lt;/button&gt;&lt;/td&gt;
              &lt;td&gt;&lt;input type="checkbox" class="select_cats" name="cat_edit_array" value="'.$eachRow['cat_id'].'"&gt;&lt;/td&gt;
          ';
  
          $returnArr[$key] = $htmlStr;
      }
      echo json_encode($returnArr);
  </code></pre>
  
  <p>FYI, the <strong>$key</strong> is numeric and the <strong>$htmlStr</strong> variable will hold some table cells with values. I would use the <strong>$key</strong> to identify some unique rows and populate the rows with the corresponding html content. the console.log() call is just a test to see whether parsing is successful.
  And here is the ajax function:</p>
  
  <pre><code>$.ajax({
          type: "GET",
          url: "ajax_catEdit_loader.php",
          data:{'get_updatedData':sendDataToAjax},
          success: function(returnedText) {
                      console.log(JSON.parse(returnedText)); //---&gt;error on this line
          error: function(xhr, status, error) {
                      alert("failed");
                      console.log("ajax failed: "+error);
                      }
          });
  </code></pre>
  
  <p>I have tried to include the <strong>datatype:</strong> as JSON in the ajax call and omit the JSON.parse call but still same result.</p>
  
  <p>Would really appreciate some help.</p>