Javascript 向div category-wise追加外部json数据

我不知道如何将外部json数据附加到div。我知道使用表进行附加。但是，我对div感到困惑。请帮助我解决这个疑问。 因为，它需要使用所选类别div追加数据

div1分类[图书]

<div class="col-xs-12 col-sm-5 col-md-3 col-lg-2 card">
                <!--Card content-->
                <div class="card-body">
                    <!--Title-->
                    <h4 class="card-title">Card title</h4>
                    <!--Text-->
                    <img class="img-fluid z-depth-3 rounded-circle" src="https:/goo.gl/4cPCdn"
                        alt="Card image cap">
<h4 class="card-title">Category</h4>
                    <!--Card content-->
                    <a href="www.gogle.com" class="btn btn-primary">Button</a>
                </div>
            </div>

<div class="col-xs-12 col-sm-5 col-md-3 col-lg-2 card">
                <!--Card content-->
                <div class="card-body">
                    <!--Title-->
                    <h4 class="card-title">Card title</h4>
                    <!--Text-->
                    <img class="img-fluid z-depth-3 rounded-circle" src="https:/goo.gl/4cPCdn"
                        alt="Card image cap">
<h4 class="card-title">Category</h4>
                    <!--Card content-->
                    <a href="www.gogle.com" class="btn btn-primary">Button</a>
                </div>
            </div>

Javascript和jquery

<script>
        $.ajax({

            url: 'json-data.json',
            type: "get",
            dataType: "json",

            success: function (data) {
                drawTable(data);
            }
        });

        function drawTable(data) {
            for (var i = 0; i < data.length; i++) {
                drawRow(data[i]);
            }
        }

        function drawRow(rowData) {
            **This part i dont know please teach me**
        }
    </script>

$.ajax({
url:'json data.json'，
键入：“获取”，
数据类型：“json”，
成功：功能（数据）{
图纸（数据）；
}
});
函数绘图表（数据）{
对于（变量i=0；i

小提琴

---

这并不完美，但它应该可以帮助您理解如何通过jQuery追加到div。你的数据被弄乱了，所以我修复了它，使它成为一个有效的对象。您可能希望在测试页面之前使用JSLint之类的工具检查数据-

var数据={
“类别”：{
“书籍”：[
{“title”：“Sentra”，“url”：“https:/goo.gl/4cPCdn”，“button”：“https:google.in”}，
{“title”：“Maxima”，“url”：“https:/goo.gl/4cPCdn”，“button”：“https:google.in”}
],
“游戏”：[
{“title”：“Taurus”，“url”：“https:/goo.gl/4cPCdn”，“button”：“https:/google.in”}，
{“title”：“Escort”，“url”：“https:/goo.gl/4cPCdn”，“button”：“https:/google.in”}
]
}
}
/*不需要测试，我们已经包含了上面的数据
$.ajax({
url:'json data.json'，
键入：“获取”，
数据类型：“json”，
成功：功能（数据）{
图纸（数据）；
}
});
*/
data=data.category；
图纸（数据）
函数绘图表（数据）{
对于（数据中的类别）{
console.log（'类别为'+类别）
var categoryEntries=数据[类别]
对于（变量i=0；i

#书籍#游戏{
显示：块；
宽度：100%；
明确：两者皆有；
}
.卡片{
浮动：左；
宽度：30vw；
}

---

你是我最好的老师……哇，我学到了很多东西，今天创建了很多项目，谢谢你的帮助。。。

<script>
        $.ajax({

            url: 'json-data.json',
            type: "get",
            dataType: "json",

            success: function (data) {
                drawTable(data);
            }
        });

        function drawTable(data) {
            for (var i = 0; i < data.length; i++) {
                drawRow(data[i]);
            }
        }

        function drawRow(rowData) {
            **This part i dont know please teach me**
        }
    </script>