Question

我正在寻找一种方法来附加一些JSON结果，我正在使用一个列表（数组？）并且有多个元素，我知道我可以直接在JS代码中添加一些样式但是我更舒服用这种方法。如何迭代元素并在某些div中实现，然后使用下一个元素创建类似的div。

实现这一目标的唯一方法是：

$("#article").append(data[i].datetime + data[i].headline + "<br />" + "<hr />"       + data[i].summary);

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Project JS 02</title>
  <link rel="stylesheet" href="assets/main.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>

<body>


<div class="container container-table">
<div class="row vertical-center-row">

  <div class="col-md-4 col-md-offset-4">

  <button type="submit" class="btn btn-primary" style="width: 100%" class="search" id="getnews">Get News!</button>
  <h1 id="headline"></h1><br>
  <h3 id="datetime"></h3><br>
  <div id="summary"></div><br>
  <h6 id="source"></h6><br>

  </div>

</div>
</div>


  <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

  <script>
document.getElementById("getnews").addEventListener("click", function () {

	var newsurl = "https://api.iextrading.com/1.0/stock/aapl/news"

	$.getJSON(newsurl, function (data) {

		for (i in data)
		{
		  $("#headline").append(data[i].headline);
		  $("#datetime").append(data[i].datetime);
		  $("#summary").append(data[i].summary);
		  $("#source").append(data[i].source);

		}

})

})

</script>



</body>
</html>

Answer 1

您可以根据需要创建元素（使用jQuery）并将它们附加到容器中来执行此操作：

＆＃13;

$("#getnews").on("click", function () {
    var newsurl = "https://api.iextrading.com/1.0/stock/aapl/news"
    $('#data').text("...loading...");
    $.getJSON(newsurl, function (data) {
        $('#data').html("");
        data.forEach(function (article) {
            $('#data').append(
                $('<h1>').text(article.headline),
                $('<h3>').text(article.datetime),
                $('<div>').text(article.summary),
                $('<h6>').text(article.source)
            );
        });
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn btn-primary search" 
        style="width: 100%" id="getnews">Get News!</button>
<div id="data"></div>

＆＃13;

Answer 2

首先：删除ID。如果你想创建类似的容器，那么id会多次出现，这将无法工作。

第二：用$('.row.vertical-center-row')取div并克隆它。

第三步：在克隆的HTMLNode上设置值，并将其附加到$('.container.container-table')

类似的东西（未经测试的）：

<div class="container container-table">
  <div class="row vertical-center-row">
    <div class="col-md-4 col-md-offset-4">
      <button type="submit" class="btn btn-primary" style="width: 100%" class="search" class="getnews">Get News!</button>
      <h1 class="headline"></h1><br>
      <h3 class="datetime"></h3><br>
      <div class="summary"></div><br>
      <h6 class="source"></h6><br>
    </div>
  </div>
</div>

<script>
document.getElementsByClassName("getnews").forEach((el)=>el.addEventListener("click", function () {
  var newsurl = "https://api.iextrading.com/1.0/stock/aapl/news"
  $.getJSON(newsurl, function (data) {
    var $elClone = $('.row.vertical-center-row').clone(true).appendTo($('.container.container-table'));
    for (i in data) {
      $(".headline", $elClone).append(data[i].headline);
      $(".datetime", $elClone).append(data[i].datetime);
      $(".summary", $elClone).append(data[i].summary);
      $(".source", $elClone).append(data[i].source);
    }
  })
}));
</script>

使用JS函数迭代JSON列表

2 个答案: