Question

我不知道如何将外部json数据附加到div。 我知道追加表。但是，我很困惑div.please帮助我解决这个疑问。因为，它需要附加选定类别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＆amp; 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>

小提琴

Fiddle codes click to edit

Answer 1

这不是完美的，但它应该帮助你理解如何通过jQuery追加div。你的数据搞砸了，所以我修复了它并使它成为一个有效的对象。在测试页面之前，您可能希望使用JSLint之类的东西检查数据 - https://jsonlint.com/

＆＃13;

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);
   
}

＆＃13;

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

＆＃13;

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

＆＃13;

将外部json数据附加到div类别

1 个答案: