Error: JSON.parse: unexpected end of data at line 1 column 1 of the JSON data

Question

I have the following code below, that I use to add products to the cart, but every time I add a product to the cart, the product is added to the cart, but i'm getting the error: unexpected end of data at line 1 column 1 of the JSON data is shown in firefox. Now in chrome, i'm getting the error: Uncaught SyntaxError: Unexpected end of JSON input at JSON.parse () at Object.success

I already tried to use console.log but php is not returning to me any errors. I tried several solutions but I could not solve them, so I came to ask for help here.

jQuery:

$(document).ready(function () {

//add a product in the cart
$('#add-to-cart').click(function () {

    $("#addtocartform").submit(function(e) {
    var prod_id = $("#add-to-cart").data("id");
    var prod_mode = $("input[name=course_mode]:checked").val();


    $.ajax
        ({
            url: '/cart/add',
            type: 'POST',
            data: jQuery.param({ prod_id: prod_id, prod_mode: prod_mode}),
            dataType: 'text',
            contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
            success: function (data) {
                //console.log(data);
                var frontend_cart_result = JSON.parse(data);
                $('#dropdowncart').html( frontend_cart_result['cart_li'] );
                $('.badge').text( frontend_cart_result['cart_item_quantity'] );
                $(location).attr('href', '/checkout');

            },
            error: function () {
                alert("error");
            }

        });
         e.preventDefault(); // avoid to execute the actual submit of the form.
        });
});

})

PHP: Path /cart/add

public function add() {

    //session_destroy();
    //$_SESSION['cart'][0]['id'] = 'teste'; 

    $cart_go = true;
    if (!empty($_SESSION['cart'])) {

        foreach ($_SESSION['cart'] as $valor) {
            if ($valor['id'] == $_POST['prod_id']) {
                $cart_go = false;
            }
        }
    }

    if ($cart_go) {

        $db = new productModel();

        //check if product has already been added
        if (!empty($_SESSION['cart'])) {
            $next_key = max(array_keys($_SESSION['cart']));
            $next_key++;
        } else {
            $next_key = 0;
        }

        $_SESSION['cart'][$next_key] = $db->selecionaproduto(array("prod_id" => $_POST['prod_id']));
        //add all the products filds in session
       //bought the online course
        if ($_POST['prod_mode'] == 1) {

            $_SESSION['cart'][$next_key]['classroom_price'] = '';
        }
        //bought the classroom course
        if ($_POST['prod_mode'] == 2) {

            $_SESSION['cart'][$next_key]['online_price'] = '';
        }


        $frontend_cart = '';


        foreach ($_SESSION['cart'] as $valor2) {

            $frontend_cart = $frontend_cart . '<li>
                  <span class="item">
                      <span class="item-left">
                          <img src="/web-files/img/course/' . $valor2['id'] . '/' . $valor2['top_nav_cart_thumbnail'] . '" alt="">
                          <img src="/web-files/img/course/' . $valor2['id'] . '/' . $valor2['top_nav_cart_thumbnail'] . '" alt="">
                          <span class="item-info">
                              <span>' . $valor2['name'] . '</span>
                              <span><strong>R$ ' . number_format($valor2['online_price'] . $valor2['classroom_price'], 2, ',', '.') . '</strong></span>
                          </span>
                      </span>
                      <span class="item-right">
                          <button data-id="' . $valor2['id'] . '" class="btn btn-xs btn-danger pull-right delete-cart-item">x</button>
                      </span>
                  </span>
              </li>';
        }

        $frontend_cart = $frontend_cart . '<li class="divider"></li>
                                  <li><a class="text-center" href="/checkout">Cart</a></li>
                                  <li class="divider"></li>
                                  <li><a class="text-center" href="/checkout">Checkout</a></li>';


        $frontend_cart_result = array(
            "cart_li" => $frontend_cart,
            "cart_item_quantity" => count($_SESSION['cart'])
        );

        echo json_encode($frontend_cart_result);
    }
}

here is the console.log

{"cart_li":"<li>\r\n                      <span class=\"item\">\r\n                          <span class=\"item-left\">\r\n                              <img src=\"\/web-files\/img\/curso\/1\/psicofarmacologia-na-infancia-e-adolescencia-top-nav-cart.jpg\" alt=\"\">\r\n                              <span class=\"item-info\">\r\n                                  <span>Curso de atualiza&ccedil;&atilde;o em psicofarmacologia na inf&acirc;ncia e adolesc&ecirc;ncia<\/span>\r\n                                  <span><strong>R$ 999,00<\/strong><\/span>\r\n                              <\/span>\r\n                          <\/span>\r\n                          <span class=\"item-right\">\r\n                              <button data-id=\"1\" class=\"btn btn-xs btn-danger pull-right delete-cart-item\">x<\/button>\r\n                          <\/span>\r\n                      <\/span>\r\n                  <\/li><li class=\"divider\"><\/li>\r\n                                      <li><a class=\"text-center\" href=\"\/checkout\">Cart<\/a><\/li>\r\n                                      <li class=\"divider\"><\/li>\r\n                                      <li><a class=\"text-center\" href=\"\/checkout\">Checkout<\/a><\/li>","cart_item_quantity":1}

Tank you!

Answer 1

I would recommend not to store HTML as values in your json response.

In your AJAX request try:

dataType: 'json', 

Answer 2

You are telling your ajax call to expect text as the data type of the response. You are then creating HTML in your PHP script and json encoding it before you output it as a response to the ajax request.

What could possibly go wrong?