Iterate through a JSON list with JS function

Question

I'm looking for a way to append some JSON results, I'm working with a list (array?) and there's multiple elements, I know I can add some styling directly in the JS code but I'm more comfortable with this method. How can I iterate through elements and implement in some divs, then create similar divs with the next elements.

The only way to achieve that goal afaik is like this:

$("#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>

not totally sure what the question asks.. What you are doing seems okay. Probably you are looking to ease your task of rendering your api response. The keywords to search online are frontend js html templating engine. there is handlebars.js that is popular among other. — Vasif
– Vasif, Commented Aug 21, 2017 at 23:19
@Vasif No my question is how to render those articles correctly? — Blacksun
– Blacksun, Commented Aug 21, 2017 at 23:21

trincot · Accepted Answer · 2017-08-21 23:41:12Z

1

You can do this by creating the elements (with jQuery) as needed, and appending them to a container:

$("#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)
            );
        });
    });
});

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

edited Aug 21, 2017 at 23:41

answered Aug 21, 2017 at 23:36

trincot

357k38 gold badges282 silver badges339 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Joshua K · Accepted Answer · 2017-08-21 23:40:13Z

First: remove the ids. If you want to create similar containers, the ids will be there multiple times, that won't work.

Second: Take the div with $('.row.vertical-center-row') and clone it.

Third: set the values at the cloned HTMLNode und append it to $('.container.container-table')

Something like that (untested):

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

Collectives™ on Stack Overflow

Iterate through a JSON list with JS function

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related