Question

我创建了一个由3x4网格组成的新闻网站。我想用NEWS标题，描述，图像等填充这些网格。我无法在我的网站上显示任何内容。

HTML code：

<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[]数组以显示来自不同网络资源的文章。

JSON数据：

网站布局：

Answer 1

好的......首先看一下HTML。我无法测试此代码，但您会想要一些这样的影响。

＆＃13;

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

＆＃13;

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

＆＃13;

如何使用Jquery和JSON填充bootstrap网格？

1 个答案: