Javascript I'；I’我得到一个；“未定义”；尝试将产品添加到购物车时控制台中的消息

我试图使我的功能工作，最终不得不添加项目到我的购物车。然而，我下面的教程是利用html中的数据，他在元素本身中传递了数据类型。我正在从json文件中检索数据。我想知道我如何才能使这个简单的功能工作，所以我可以继续工作的功能。此时，我在控制台中返回“未定义”

Html代码：

           <div class="row touchViewSection">
                <!-- shopping sector -->
                <!-- touchView -->
                <!-- categories menu -->
                <div class="col-3 categoriesSection">
                    <div class="categories">
                        <p style="background-color: white; margin-bottom: 0px" > Categories </p>
                        <a class="nav-link" id="all" href="#">All</a>
                        <a class="nav-link" id="black-thunder" href="#">Black-thunder</a>
                        <a class="nav-link" id="blue-eagle-fireworks" href="#">Blue-eagle-fireworks</a>
                        <a class="nav-link" id="crystal-exclusive" href="#">Crystal-exclusive</a>
                        <a class="nav-link" id="empire-fireworks" href="#">Empire-fireworks</a>
                        <a class="nav-link" id="grondbloemen" href="#">Grondbloemen</a>
                    </div>
                </div>

                <!-- categories menu -->
<!--                <p style="background-color: white; margin-bottom: 0px" > Products </p>-->
                <div class="col-9 productItems" >
                    <br>
                    <div class="row" id="touchViewProducts">

                    </div>
                </div>
            </div>
            <!--/touchView -->
            <!--Keyboard View -->
            <div class="row keyboardViewSection">
                <div class="col-12 keyboardViewRow">
                    <table id="data-table" class="table table-bordered" style="width: 100%;">
                        <thead id="tableHead">
                        <tr>
                            <th> # </th>
                            <th> Product name </th>
                            <th> Free Stock </th>
                            <th> Price </th>
                            <th> Action </th>
                        </tr>
                        </thead>
                    </table>
                </div>
            </div>
            <!--/Keyboard View -->
            <div class="footer">
                <div class="container">
                    <p class="text-muted"> Developed by Vesta Group</p>
                </div>
            </div>
        </div>
        <!--/shopping sector-->
        <div class="col-4 cartSection">
            <!--cart-->
            <div class="row">
                <div class="col-5">Product</div>
                <div class="col-1">Pcs.</div>
                <div class="col-2">Price</div>
                <div class="col-3">Total</div>
            </div>
            <hr style="background-color: white;">

            <div class="row cartCheck">
                <div class="col-5">Number of products</div>
                <div class="col-1">1</div>
                <div class="col-2">Subtotal</div>
                <div class="col-3 total">&euro; 0,00</div>

                <div class="col-5"></div>
                <div class="col-1"></div>
                <div class="col-2">Total </div>
                <div class="col-3">&euro; 0,00</div>

                <div class="col-12 checkoutBtn"> Checkout </div>
                <div class="col-6 addDiscountBtn"> Add discount </div>
                <div class="col-6 cancelBtn"> Cancel </div>
            </div>
            <!--/cart-->
        </div>
    </div>
</div>

</div>
    

类别



# 
产品名称
免费库存
价格
行动
维斯塔集团开发的

产品
个人计算机。
价格
全部的

产品数量
1.
小计
&欧元；0,00
全部的
&欧元；0,00
结账
加折扣
取消

JS代码：

   <script>
        $.getJSON("assets/products/sample_products.json", function(data) {
            var product_data = '';
            $.each(data.data, function (key, value) {
                // console.log(data);
                product_data += '<div class="col-3 productCard">';
                product_data += '<a href="#" class="productItem">';
                product_data += '<div class="card">';
                product_data += '<img src="assets/images/Firecracker.jpg" alt="Avatar" style="width:100%; height: 8vh;">';
                product_data += '<div class="container">';
                product_data += '<p>' + value.name + '</p>';
                product_data += '</div>';
                product_data += '</div>';
                product_data += '</a>';
                product_data += '</div>';
            });
            $('#touchViewProducts').append(product_data);


            //function to add item to shopping cart
            $(".productItem").click(function(e){
                e.preventDefault();

                var productInfo = $(this.dataset);
                console.log(productInfo[0].name);

            })
        })
  
    </script>

$.getJSON（“资产/产品/样本_products.json”），函数（数据）{
var乘积_数据=“”；
$.each（数据、数据、函数（键、值）{
//控制台日志（数据）；
产品数据+=''；
产品数据+=''；
产品数据+=''；
});
$（'touchViewProducts'）。追加（产品数据）；
//用于将项目添加到购物车的函数
$（“.productItem”）。单击（函数（e）{
e、 预防默认值（）；
var productInfo=$（this.dataset）；
console.log（productInfo[0].name）；
})
})

仔细查看

数据集

的功能或相关数据，然后查看

中的内部HTML。productItem

中没有单个数据属性，难怪

数据集

无法获取任何数据且未定义。请告诉我在

console.log（productInfo[0].name）中需要什么结果里面应该是什么，我们将提取它

您只需执行以下操作即可获取名称：

$(this).text()

为了澄清这一点，单击函数是从HTML中提取数据，而不是JSON数据本身。您将JSON数据放入动态变红的HTML中，然后单击即可获得它

另外，如果只需要一个名称作为结果，请记住，如果您在
中添加了更多的文本。productItem
您将需要使用“单击选择器”进行更深入的挖掘，请调整它。在当前的示例中，它正在工作。
示例：


/$.getJSON（“资产/产品/样本_products.json”），函数（数据）{
var乘积_数据=“”；
var数据={“数据”：[{“id”：“1333”，“物品编号”：“4016”，“条形码”：“heeftgeenbarcode4”，“姓名”：“白色白化病患者”}]}；
$.each（数据、数据、函数（键、值）{
//控制台日志（数据）；
产品数据+=''；
产品数据+=''；
产品数据+=''；
});
$（'touchViewProducts'）。追加（产品数据）；
//用于将项目添加到购物车的函数
$（“.productItem”）。单击（函数（e）{
e、 预防默认值（）；
console.log（$（this.text（））；
var productInfo=$（this.dataset）；
//console.log（productInfo[0].name）；
})
//})

类别



# 
产品名称
免费库存
价格
行动
维斯塔集团开发的

产品
个人计算机。
价格
全部的

产品数量
1.
小计
&欧元；0,00
全部的
&欧元；0,00
结账
加折扣
取消
您在哪里得到未定义？！？在哪一行代码上，什么是未定义的？还添加控制台登录的数据示例
//console.log（数据）@ikiK单击功能触发时，console.log中出现错误。这是我的json文件中的一个对象的快速示例：{“data”：[{“id”：“1333”，“article_number”：“4016”，“barcode”：“heeftgeenbarcode4”，“name”：“White Albino”}]@ikiK谢谢你的反应，我对这个有点陌生。我想显示json数据数组中第一个产品的名称，在本例中是“White Albino”。