Почему возникает ошибка при попытке передать данные в виде JSON из PHP в JS?

Данные на странице выводятся нормально. Но когда пытаюсь их передать js обработчику для корзины, выдает ошибку. Вот код шаблона:

foreach ($dishes as $item) {
    <div class="products_one_price_card">
        <?php 
        $productJSON = json_encode($item, JSON_UNESCAPED_UNICODE);
        ?>
        <button data-product="<?php echo $productJSON; ?>">В КОРЗИНУ</button>
    </div>
}

код js:

const oneProductCardButton = document.querySelectorAll('.products_one_price_card button');

oneProductCardButton.forEach((oneProductCardButtonItem) => {
    oneProductCardButtonItem.addEventListener('click', (event) => {
        const productJSON = oneProductCardButtonItem.getAttribute('data-product');
        const product = JSON.parse(productJSON);

        console.log(product);
    });
});

и выдает ошибку: Uncaught SyntaxError: Expected property name or '}' in JSON at position 1 (line 1 column 2) at JSON.parse () at HTMLButtonElement.

Я вывожу переменную $productJSON с помощью var_dump, вроде выводится нормальный json:

{"id":"1","name":"Пицца 4 сезона","eng_name":"pizza-4-sezona","description":"Здесь краткое описание если нужно, состав, ингридиенты и т.д.","img":"pizza-4-sezona-family-time.jpg","price":"3200","category":"pizza","dishes_option_name":"pizza_size","dishes_option_values":"30_3200,40_3900"}

в чем может быть проблема?