title: unidentified red dots (json) in chrome network panel response tab
body: <p>I am developing an API using slim framework, when I test this api with postman, phostorms built in tool it works fine and returns valid json. But when I call it from angular it is not getting parsed by angular. It shows unexpected index error.</p>
  
  <p>I tried monitoring the payload in the network tab, surprisingly there are some red bullet mark like dots are appended before the actual json response. </p>
  
  <p><a href="https://i.stack.imgur.com/KBlqd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KBlqd.png" alt="screenshot in response tab"></a></p>
  
  <p>but it is not showing up in the preview tab..</p>
  
  <p><a href="https://i.stack.imgur.com/Qjiaj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Qjiaj.png" alt="screenshot in preview tab"></a></p>
  
  <p>I don't have a clue where are those dots are coming. I googled about it and find a way about the BOM Problem on windows. But I am not sure how to solve it.
  Can you please help me to understand the problem and rectify it. Is this a problem caused by code or database or something else.</p>
  
  <p>For information I'm using</p>
  
  <blockquote>
    <ul>
    <li>Operating System : Windows 7,</li>
    <li>Browser : google chrome,</li>
    <li>front end MVC : angular (problem only happens here),</li>
    <li>Backend : Slim Framework (PHP),</li>
    <li>Database : Mysql ( tables and columns have mixed collations       between utf8mb4_bin and latin1_swedish_ci)</li>
    <li>IDE : PHPStorm 8</li>
    </ul>
  </blockquote>
  
  <p>EDIT : screenshot from fiddler
  I used fiddlr to see whats going on and here is the hexview of the response<a href="https://i.stack.imgur.com/PyD7I.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PyD7I.png" alt="hewview"></a></p>