Laravel 5: how to decode json returned from ajax call

Question

I am working on a shopping cart application. when the user clicks the add to cart button, I want the ajax call to my controller function to return two values: totalPrice and totalQty which are to be displayed on the page. I have been able to return the values in as json: {"totalPrice":100,"totalQty":1}. Now how do i extract the totalPrice and totalQty to display on different parts of the page. Thanks.

Here is my code:

<a data-id="{{ $product->id }}" class="btn btn-success addToCart" >Add to cart</a>

Here is code for my ajax:

    <script type="text/javascript">
    $(function(){
        $.ajaxSetup({
            headers: {
                'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $('.addToCart').click(function(){
            var id = $(this).data('id');

            $.ajax({
                url  : "{{ route('product.addToCart') }}",
                type : "POST",
                data : {
                    'id' : id,
                    "_token": "{{ csrf_token() }}"
                },
                success:function(data){
                   alert(data); // returns {"totalPrice":100,"totalQty":1}
                   // how do I decode and display data returned here?
                }
            });
        });

    });
</script>

Here is my controller method:

public function addToCart(Request $request){
    $post = $request->all();
    $id = $post['id'];
    $product = Product::find($id);

    //some code is excluded to simplify this function

    $total_price = 100;
    $total_qty = 1;
    $vals = array('totalPrice' => $total_price,'totalQty' => $total_qty);
    $vals = json_encode($vals);
    echo $vals;
    exit();

}

This is where json values returned are supposed to be displayed:

<a href="{{ route('product.shoppingCart') }}">
Cart - <span class="cart-amunt">//display amount here</span> 
<span class="product-count"> //display totalQty here </span>
</a>

try JSON.parse(data);

Rakesh Sojitra
– Rakesh Sojitra

2016-08-30 06:53:00 +00:00
Commented Aug 30, 2016 at 6:53 — Rakesh Sojitra
– Rakesh Sojitra, Commented Aug 30, 2016 at 6:53

Mayank Pandeyz · Accepted Answer · 2016-08-30 06:52:48Z

3

Try this:

var response = JSON.parse(data);

alert(response.col_name);  // will print the column value

Parse json documentation

answered Aug 30, 2016 at 6:52

Mayank Pandeyz

26.3k4 gold badges43 silver badges61 bronze badges

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

Comments

hasan movahed · Accepted Answer · 2016-08-30 07:10:03Z

2

when you use ajax method for send and receive , you better using from datatype

if using dataType:'json', , This problem was solved .

and you can using in success :

success:function(data){
  alert(data.totalPrice); 
}

answered Aug 30, 2016 at 7:10

hasan movahed

3644 silver badges17 bronze badges

Comments

Samundra · Accepted Answer · 2016-08-30 07:17:32Z

2

If you are returning encoded json data from Laravel then in jQuery you can use dataType:'json' while making ajax request and it will convert response data to json itself, you don't need to convert to JSON manually, jQuery will do it for you.

$.ajax({
    ...
    dataType:"json",
    data : {
        'id' : id,
        "_token": "{{ csrf_token() }}"
    },
    ...
});

see http://api.jquery.com/jquery.ajax/ for full list of values that you can use in dataType.

answered Aug 30, 2016 at 7:17

Samundra

1,91517 silver badges28 bronze badges

Comments

SteD · Accepted Answer · 2016-08-30 06:55:29Z

1

Have a look at Laravel's json response. If you merely echo it out in your controller, it will be returned as string, if you return it as a json response. You can just refer it as data.totalPrice in your javascript.

Thus you can do something like this:

 success:function(data){
               $(".product-count").html(data.totalQty);
 }

answered Aug 30, 2016 at 6:55

SteD

14.1k13 gold badges69 silver badges77 bronze badges

Comments

Jamal Abdul Nasir · Accepted Answer · 2016-08-30 06:58:49Z

1

You can use JSON.parse() in case you are json_encode() encoding in the controller. If you dont do json_encode() in the controller then you can access response values without JSON.parse()

answered Aug 30, 2016 at 6:58

Jamal Abdul Nasir

2,6885 gold badges31 silver badges47 bronze badges

Collectives™ on Stack Overflow

Laravel 5: how to decode json returned from ajax call

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related