working with JSON data array from Ajax response?

Question

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.

I have sort of hacked this together:

      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;

});

The function appears to work ok, it gives me an alert with the correct data.

{"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"}]}

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.

I have no idea how to start working with the data in my view file(php).

Thanks

[EDIT]updated with working code:

var base_url = 'http://dev.local/westview/public';

$('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 = "<ul>";

      for (i=0; i < json_obj.payments.length; i++)
      {
        var payment = json_obj.payments[i];
        var date = moment(payment.pdate).format('Do MMM YYYY');
        output += "<li>&pound;" + payment.amount + " - " + date + " (" + payment.club + ")</li>";
      }

      output += "</ul>";

      $('.history-section').html(output);

    },
    dataType: "html"
  });
});

you are asking to parse data. use parseJSON (yourdata), this will convert you JSON string into Object, then you can Iterate it like payment[0].amount — Murtaza Khursheed Hussain
– Murtaza Khursheed Hussain, Commented Mar 11, 2015 at 11:42

Murtaza Khursheed Hussain · Accepted Answer · 2015-03-11 12:58:22Z

6

Do like this.

var data = $.parseJSON("your_json");
var output= "<ul>";

for (i=0; i < data.payments.length; i++){
    output += "<li>" + data.payments[i].id + ", " + data.payments[i].child_id + "</li>";
}

output += "</ul>";

edited Mar 11, 2015 at 12:58

answered Mar 11, 2015 at 12:50

Murtaza Khursheed Hussain

15.3k7 gold badges61 silver badges83 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Goodbytes Over a year ago

Thanks but still get the object error, is it a problem with my JSON data: [{"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"}]

Goodbytes Over a year ago

whoops, here is my json now: {"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"}]}

Goodbytes Over a year ago

alert(output); doesn't return anything. .. alert(data); returns [Object]

Goodbytes Over a year ago

It's working, the problem is dataType: "json" changing it to "html" works which is obviously not correct behaviour but at least it's working.

Manoj Dhiman · Accepted Answer · 2015-03-11 11:26:21Z

4

use

dataType: 'json',

instead

dataType: 'html',

and then use each to fetch the record from response in success function

answered Mar 11, 2015 at 11:26

Manoj Dhiman

5,1616 gold badges32 silver badges71 bronze badges

3 Comments

Goodbytes Over a year ago

when i do this it just returns: [Object]

Manoj Dhiman Over a year ago

you need to fetch data from the jason object with .each function . follow the link i attached

Goodbytes Over a year ago

Thanks, i have updated my first post. made small progress (i think)

Ronak Patel · Accepted Answer · 2015-03-11 11:42:49Z

3

Use $.parseJSON() For Convert Json Format Data To Array

Right code at sucess of ajax.. Like,

var data = $.parseJSON(html);

data in you get array format of responce

edited Mar 11, 2015 at 11:42

answered Mar 11, 2015 at 11:37

Ronak Patel

3055 silver badges14 bronze badges

Comments

paddyfields · Accepted Answer · 2015-03-11 11:42:49Z

0

You need to use json_encode() in your php file to send the data back as an array

For example;

$myarray = array("data1"=>"value1","data2"=>"value2");

echo json_encode($myarray);

You can then access the data separately in the js file like this;

 success: function(html) { 
    alert(html.data1);
    alert(html.data2);
  },

You also need to change the dataType to 'json'

answered Mar 11, 2015 at 11:42

paddyfields

1,5492 gold badges17 silver badges28 bronze badges

Comments

Kamal Kumar · Accepted Answer · 2015-03-11 12:20:57Z

$('input[name=\'product_attribute[' + attribute_row + '][name]\']').catcomplete({
    delay: 0,
    source: function(request, response) {
        $.ajax({
            url: 'index.php?route=catalog/attribute/autocomplete&token=<?php echo $token; ?>',
            type: 'POST',
            dataType: 'json',
            data: 'filter_name=' +  encodeURIComponent(request.term),
            success: function(data) {   
                response($.map(data, function(item) {
                    return {
                        category: item.attribute_group,
                        label: item.name,
                        value: item.attribute_id
                    }
                }));
            }
        });
    }, 
    select: function(event, ui) {
        $('input[name=\'product_attribute[' + attribute_row + '][name]\']').attr('value', ui.item.label);
        $('input[name=\'product_attribute[' + attribute_row + '][attribute_id]\']').attr('value', ui.item.value);

        return false;
    }
});

You Can map your json something like this

Collectives™ on Stack Overflow

working with JSON data array from Ajax response?

5 Answers 5

4 Comments

3 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related