title: working with JSON data array from Ajax response?
body: <p>Is it possible to work with a response from AJAX request in PHP? I am not really a JS dev so i am polling my hair out with this one.</p>
  
  <p>I have sort of hacked this together:</p>
  
  <pre><code>      var base_url = 'http://dev.local/westview/public';
  
    $('select.child_id').change(function() {
  
  var child_id = $('#child_id');
  var dataString = 'child_id=' + child_id;
  
  $.ajax({
    type: "POST",
    url: base_url + "/finance/payment-history",
    data: dataString,
    dataType: 'html',
    success: function(html) { 
      alert(html);
    },
  
  });
  return false; 
  </code></pre>
  
  <p>});</p>
  
  <p>The function appears to work ok, it gives me an alert with the correct data.</p>
  
  <pre><code>{"payments":[{"id":"19","child_id":"21","club":"Breakfast Club","term":"Half Term 3","amount":"15.00","pdate":"2015-02-25","notes":"","created_at":"2015-02-11 12:16:32","updated_at":"2015-02-11 12:16:32","starting_debt":"0","debt_start_date":"2015-01-05"},{"id":"20","child_id":"21","club":"After School Club","term":"Half Term 3","amount":"11.50","pdate":"2015-02-25","notes":"","created_at":"2015-02-11 12:16:49","updated_at":"2015-02-11 12:16:49","starting_debt":"0","debt_start_date":"2015-01-05"}]}
  </code></pre>
  
  <p>I need to be able output this to the user so that it is readable. A lot of guides I find describe replacing data but as it stands there is no data until a child_id is selected.. i then want it show the above data in a readable way. </p>
  
  <p>I have no idea how to start working with the data in my view file(php).</p>
  
  <p>Thanks</p>
  
  <p>[EDIT]updated with working code:</p>
  
  <p>var base_url = '<a href="http://dev.local/westview/public" rel="nofollow">http://dev.local/westview/public</a>';</p>
  
  <pre><code>$('select.child_id').change(function() {
  
    var response = "";
    var child_id = $('#child_id').val();
    var dataString = 'child_id=' + child_id;
  
    $.ajax({
      type: "POST",
      url: base_url + "/finance/payment-history",
      data: dataString,
      success: function(response) { 
  
        var json_obj = $.parseJSON(response);
  
        var output = "&lt;ul&gt;";
  
        for (i=0; i &lt; json_obj.payments.length; i++)
        {
          var payment = json_obj.payments[i];
          var date = moment(payment.pdate).format('Do MMM YYYY');
          output += "&lt;li&gt;&amp;pound;" + payment.amount + " - " + date + " (" + payment.club + ")&lt;/li&gt;";
        }
  
        output += "&lt;/ul&gt;";
  
        $('.history-section').html(output);
  
      },
      dataType: "html"
    });
  });
  </code></pre>