[英]How to populate bootstrap grids using Jquery and JSON?
我已經建立了一個由3x4網格組成的NEWS網站。 我想用新聞標題,描述,圖像等填充這些網格。我無法在我的網站上顯示任何內容。
HTML代碼:
<div class="Article">
<div class="col-md-4" title="News">
<h3></h3>
<p></p>
</div>
<div class="col-md-4" title="News">
<h3></h3>
<p></p>
</div>
<div class="col-md-4" title="News">
<h3></h3>
<p></p>
</div>
</div>
<div class="Article">
<div class="col-md-4" title="News">
<h3></h3>
<p></p>
</div>
<div class="col-md-4" title="News">
<h3></h3>
<p></p>
</div>
<div class="col-md-4" title="News">
<h3></h3>
<p></p>
</div>
</div>
<div class="Article">
<div class="col-md-4" title="News">
<h3></h3>
<p></p>
</div>
<div class="col-md-4" title="News">
<h3></h3>
<p></p>
</div>
<div class="col-md-4" title="News">
<h3></h3>
<p></p>
</div>
</div>
<div class="Article">
<div class="col-md-4" title="News">
<h3></h3>
<p></p>
</div>
<div class="col-md-4" title="News">
<h3></h3>
<p></p>
</div>
<div class="col-md-4" title="News">
<h3></h3>
<p></p>
</div>
</div>
</div>
JS代碼:
$(document).ready(function() {
var news_source =["the-times-of-india","business-insider","techcrunch","bbc-sport"];
for(var i=0;i<news_source.length;i++){
$.getJSON('https://newsapi.org/v1/articles?source='+ news_source[i] +'&sortBy=top&apiKey=my-api-key',function (json) {
console.log(json);
for(var j=0;j<3;j++){
$(".Article News h3").eq(j).html(json.articles[j].title);
$('.Article News p').eq(j).html(json.articles[j].description);
}
});
}
});
我無法使用JSON顯示任何數據,我已經制作了一系列網站資源, news_sources[]
因為每個資源都返回4到5個對象,以便可以在網格中顯示它,總共制作了12個網格。 我想在網格系統的第一行中顯示商業新聞,在第二行中顯示體育新聞,在第三行中顯示技術新聞,等等,這就是為什么我制作了一系列news_sources[]
來顯示來自不同Web來源的文章的原因。
JSON數據:
網站布局:
好吧...首先看一下HTML。 我沒有測試此代碼的方法,但是您會希望受到這種影響。
var news_source = ["the-times-of-india", "business-insider", "techcrunch", "bbc-sport"]; $(function() { // get the articles var $sections = $("[data-place=article]"); // get the max-length var sec_len = $sections.length; // set for accessing the right section. var sec_count = 0; // gets all the sections, this should be a promise for (var i = 0; i < news_source.length; i++) { // i made this into a string var get_string = 'https://newsapi.org/v1/articles?source='+news_source[i]+'&sortBy=top&apiKey=my-api-key'; $.getJSON(get_string, function(json) { sec_count++; // there is no more room if (sec_count === sec_len) { return false; } else { for (var j = 0; j < json.length; j++) { var section = makeSection(); // returns div var header = makeHeader(json.articles[j].title, "3"); // returns header var paragraph = makeParagraph(json.articles[j].description); // returns paragraph section.append(header); // attach header section.append(paragraph); // attach para $sections.eq(sec_count).append(section); // append to document } } }); } }); function makeSection() { return $("<div />", { "class": "col-md-4", "title": "news" }) } function makeHeader(string, size) { return $("<h" + size + " />", { "text": string }); } function makeParagraph(string) { return $("<p />", { "text": string }); }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="Article" data-place="article"></div> <div class="Article" data-place="article"></div> <div class="Article" data-place="article"></div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.