title: Ajax post returns multiple arrays with objects that have multiple values
body: <p>So I have a php file that gets messages from a database (ajax.php) and a javascript file that makes ajax request to that ajax.php file (main.js).</p>
  
  <p>What I want: When the php is responding multiple times, the js file would make a table row for every one of them.</p>
  
  <p>main.js:</p>
  
  <pre><code>function doAjax(variable) {
      $.ajax({
          type: "POST",
          url: "ajax.php"
          data: { content: variable },
          dataType: 'JSON',            
          success: function (response) {
              response.forEach(function(data) {
                $(".messages-table").append("&lt;tr&gt;&lt;th&gt;"+from+"&lt;/th&gt;&lt;th&gt;"+text+"&lt;/th&gt;&lt;th&gt;"+date+"&lt;/th&gt;&lt;th&gt;"+num+"&lt;/th&gt;&lt;/tr&gt;")
              })
          },
          error: function(jqXHR, textStatus, errorThrown) {
              console.log(textStatus, errorThrown);
          }
      });
  }
  </code></pre>
  
  <p>ajax.php:</p>
  
  <pre><code>&lt;?php
  
  ...
  
  foreach ($messages as $message) {
      $from = $message['contact_value'];
      $text = $message['message'];
      $date = $message['date'];
      $num = $user['phone_number'];
      echo json_encode(array("from"=&gt;"$from", "text"=&gt;"$text", "date"=&gt;"$date", "num"=&gt;"$num"));
  ?&gt;
  </code></pre>
  
  <p>But when i do that I get this error in developer console:</p>
  
  <pre><code>parsererror SyntaxError: Unexpected token &lt; in JSON at position 0
      at parse (&lt;anonymous&gt;)
      at Qb (jquery.min.js:4)
      at A (jquery.min.js:4)
      at XMLHttpRequest.&lt;anonymous&gt; (jquery.min.js:4)
  </code></pre>
  
  <p>Cheers</p>