將外部json數據附加到div類別明智的

Question

我不知道如何將外部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 2類[游戲]

<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>

JSON

   {
    "category": {
        "books": [
            {"title":"Sentra", "url":"https:/goo.gl/4cPCdn","button":"https:google.in"},
            {"title":"Maxima", "url":"https:/goo.gl/4cPCdn"},"button":"https:google.in"}
        ],
    "games": [
            {"title":"Taurus", "url":https:/goo.gl/4cPCdn},"button":"https:/google.in"}
            {"title":"Escort", "url":https:/goo.gl/4cPCdn},"button":"https:/google.in"}
        ]
    }
}

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>

小提琴

小提琴代碼點擊編輯

Answer 1

這不是完美的方法，但它應該為您提供一些幫助，幫助您了解如何通過jQuery附加到div。 您的數據被弄亂了，因此我將其修復並使其成為有效的對象。 您可能需要使用之類的東西的JSLint之前測試你的網頁來檢查您的數據- https://jsonlint.com/

 var data = { "category": { "books": [ {"title":"Sentra", "url":"https:/goo.gl/4cPCdn", "button":"https:google.in"}, {"title":"Maxima", "url":"https:/goo.gl/4cPCdn", "button":"https:google.in"} ], "games": [ {"title":"Taurus", "url":"https:/goo.gl/4cPCdn","button":"https:/google.in"}, {"title":"Escort", "url":"https:/goo.gl/4cPCdn","button":"https:/google.in"} ] } } /* not needed for test, we've already included our data above $.ajax({ url: 'json-data.json', type: "get", dataType: "json", success: function (data) { drawTable(data); } }); */ data = data.category; drawTable(data) function drawTable(theData) { for (category in theData) { console.log('category is '+category) var categoryEntries = theData[category] for (var i = 0; i < categoryEntries.length; i++) { var rowData = categoryEntries[i]; drawRow(category,rowData) } } } function drawRow(category,rowData) { // console.log(JSON.stringify(rowData)) var title = rowData.title; var url = rowData.url; var button = rowData.button var newDiv = '<div class="card">'+ '<div class="card-body">'+ '<h4 class="card-title">'+title+'</h4>'+ '<img class="img-fluid z-depth-3 rounded-circle" src="'+url+'" alt="Card image cap">'+ '<h4 class="card-title">'+category+'</h4>'+ '<a href="'+button+'" class="btn btn-primary">Button</a>'+ '</div>'+ '</div>' $('#'+category).append(newDiv); } 

 #books,#games { display:block; width: 100%; clear:both; } .card { float:left; width: 30vw; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/> <div id="books"> </div> <div id="games"> </div>