Javascript 如何使用Jquery和JSON填充引导网格？

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

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

    });

    }
});

$（文档）.ready（函数（）{
var news_source=[《印度时报》、《商业内幕》、《techcrunch》、《bbc体育》]；
对于（var i=0；i好的……首先看一下HTML。我没有办法测试这段代码，但您会希望有一些东西能够影响它


var news_source=[《印度时报》、《商业内幕》、《techcrunch》、《bbc体育》]；
$（函数（）{
//拿到文章
var$sections=$（“[dataplace=article]”）；
//获取最大长度
var secu_len=$sections.length；
//设置为访问右侧部分。
var sec_计数=0；
//获取所有部分，这应该是一个承诺
对于（var i=0；i”{
“文本”：字符串
});
}

您正在将json解析为一个对象吗？控制台日志的结果是什么？此外，您正在selcond
for
循环中覆盖
i
，您应该将其中一个从
i
更改为其他内容。为什么不在循环时构建网格的标记（而不是查找和加载）然后再附加一次标记？@Pogrindis我编辑了这个问题，请看一看，你收到我的问题了吗。我在jquery代码中做错了什么吗。@Mikey我编辑了这个问题，请看一看，我想在我的网站上显示新闻文章，我想我在jquery代码中做错了什么。@Mikey我只想显示描述
标签中的新闻标题和
标签中的新闻标题。感谢您提供详细的解决方案。我是web开发新手，我想问您，我应该总是在需要时动态创建元素，还是以后填充元素，遵循哪一个是好的做法。没问题，只是一个简短的说明。您的字符串中有“mu api密钥”将API密钥存储在字符串中是不安全的。使用您网站的任何人都可以看到该密钥。如果您有权访问be，我会让be为您获取此数据。您会调用服务器获取数据。@Christain4423不，我不是将API密钥存储为字符串，而是将其传递给
我的API密钥
。我如何才能然后封装它？@rockstone动态创建元素对于异步程序中的JSON数据是一个好主意。这可以保持它的轻量级。但是对于页面加载来说，这不是一个好主意。但是如果您可以访问后端，您可以让服务器呈现HTML，也可以让前端javascript加入返回的HTML。