1

I'm creating a js template in Magento 2. When I call js, I get an Uncaught SyntaxError: Unexpected token 'in JSON at position 96. Why jsonParse () does not get the value? Can somebody help me?

file .phtml

<?php
$productData = [
    ["sku"=>"Tshirt-Red",
        "name"=>"Tshirt Red Armani",
        "price"=>"5000"],
    ["sku"=>"Tshirt-Blue",
            "name"=>"Tshirt Blue Armani",
            "price"=>"6000"],
    ["sku"=>"Tshirt-Yellow",
            "name"=>"Tshirt Yellow Armani",
            "price"=>"7000"]
        ];
$jsonProductData = $this->helper('Magento\Framework\Json\Helper\Data')->jsonEncode($productData);
?>
<script type="text/x-magento-init">
    {
        "*": {
                "Bss_JsTemplate/js/jstemplate":{
                "Data" : '<?php echo $jsonProductData; ?>'
            }
        }
    }
</script>
<script id="product-template" type="text/x-magento-template">
    <% _.each(data, function(value, key) { %>
    <ul>
        <li> Product <%-key %>  : <%- value %></li>
    </ul>
    <% }); %>
</script>
<button id="getInfo">Get  Info</button>
<div id ="product" style="display: none;"></div>

file jstemplate.js

define([
    "jquery",
    "mage/template"
], function ($, template) {
    "use strict";
     return function (config, element) {
        var product;
        $.each($.parseJSON(config.Data), function () {
            var productTemplate = template('#product-template');
            product = productTemplate({
                data: {
                    sku: this['sku'],
                    name: this['name'],
                    price: this['price']
                }
            });
            $('#product').append(product);
        });
        $("#getInfo").click(function () {
            $("#product").toggle();
        });
    };
});

error : enter image description here enter image description here

0

JSON standard doesn't allow the single quote('). We need to use the double quote (").
But, in your case, I think we don't need to use the double quote. Just simply uses: (Not test yet)

<script type="text/x-magento-init">
    {
        "*": {
                "Bss_JsTemplate/js/jstemplate":{
                "Data" : <?php echo $jsonProductData; ?>
            }
        }
    }
</script>

And $productData array should look like:

$productData = [
  'data' => [
     ["sku"=>"Tshirt-Red",
        "name"=>"Tshirt Red Armani",
        "price"=>"5000"],
    ["sku"=>"Tshirt-Blue",
            "name"=>"Tshirt Blue Armani",
            "price"=>"6000"],
    ["sku"=>"Tshirt-Yellow",
            "name"=>"Tshirt Yellow Armani",
            "price"=>"7000"] 
   ]
]

In your each statement, don't need to use $.pareJSON() function.

  • Tks u. How can I get "Data" into jsonParse (). I tried that but jsonParse () could not get the value.Can u help me ? – Thành Trung Tô Oct 7 '18 at 14:20
  • statement in the file js $.each($.parseJSON(config.Data), function () { – Thành Trung Tô Oct 7 '18 at 14:21
  • config.Data doesn't give any value? – Khoa TruongDinh Oct 7 '18 at 14:26
  • hmm.When I put "Data": <? php echo $ jsonProductData; ?> and $ .each ($. parseJSON (config.Data), function () {. I still have the same error – Thành Trung Tô Oct 7 '18 at 14:34
  • Maybe I'm wrong. How about using the double quote (")? "Data": "<? php echo $ jsonProductData; ?>" – Khoa TruongDinh Oct 7 '18 at 14:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.