How to insert multiple HTML elements using jQuery

Question

I have a webpage that is taking data from the Yahoo! Weather API. I am using this query. I would like to build a table using jQuery that inserts elements with IDs. Here is my current code:

$.get("https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20weather.forecast%20where%20woeid%20in%20(select%20woeid%20from%20geo.places(1)%20where%20text%3D%22canberra%22)&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys", function(data) {
  $("#title").append(data.query.results.channel.title);
  $("#sunrise").append(data.query.results.channel.astronomy.sunrise);
  $("#sunset").append(data.query.results.channel.astronomy.sunset);
  $("#title-2").append(data.query.results.channel.item.title);
  for (var i = 0; i < 10; i += 1) {
    var newRow = $("<tr></tr>").attr("id", "row-" + (i + 1));
    var newDate = $("<td></td>").attr("id", "date-" + (i + 1));
    var newMin = $("<td></td>").attr("id", "min-" + (i + 1));
    var newMax = $("<td></td>").attr("id", "max-" + (i + 1));
    var newConditions = $("<td></td>").attr("id", "conditions-" + (i + 1));
    $("#weather").append(newRow);
    $("#row-" + (i + 1)).append(newDate, newMin, newMax, newConditions);
    $("#date-" + (i + 1)).append(data.query.results.channel.item.forecast[i].day + " " + data.query.results.channel.item.forecast[i].date);
    $("#min-" + (i + 1)).append((Math.floor(((data.query.results.channel.item.forecast[i].low) - 32) / 1.8)) + "°C");
    $("#max-" + (i + 1)).append((Math.floor(((data.query.results.channel.item.forecast[i].high) - 32) / 1.8)) + "°C");
    $("#conditions-" + (i + 1)).append(data.query.results.channel.item.forecast[i].text);
  }
  $("#lastBuild").append(data.query.results.channel.lastBuildDate);
}, "json");

div#main {
  width: 595px;
}
table#weather {
  border-collapse: collapse;
  width: 595px;
}
table#headers {
  width: 595px;
}
td,
th {
  width: 148.75px;
  text-align: center;
}
tr {
  height: 28px;
}

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

<div id="main">
  <h1 id="title"></h1>
  <ul id="sun">
    <li id="sunrise"><strong>Sunrise: </strong></li>
    <li id="sunset"><strong>Sunset: </strong></li>
  </ul>
  <h2 id="title-2"></h2>
  <table id="headers">
    <tr>
      <th id="date">Date</th>
      <th id="min">Min</th>
      <th id="max">Max</th>
      <th id="conditions">Conditions</th>
    </tr>
  </table>
  <table id="weather" border="1"></table>
  <br />
</div>
<em id="lastBuild">Data last built at: </em>

My question is this:

Am I going about the correct way of doing this? It works, but it might just be an autofill by the interpreter (like leaving off semicolons). Is this right, and if not, how can I fix it? All help appreciated.

Chan MT · Accepted Answer · 2018-08-17T03:31:33.540

1

Currently it looks good to me. If your page will only ever query the information once, then it should be fine as long as it is working now. If you want to allow multiple queries (like allowing the user to select a date and press a button to retrieve information of another day), you might want to empty the relevant elements before appending new items to them.

edited Aug 17 '18 at 03:31

answered Aug 17 '18 at 03:10

Chan MT

495
4
9

Thanks! I've just tested it and it works brilliantly! P.S. was my questions a good question? – Jack Bashford Aug 17 '18 at 03:14
Usually a good question is asking about a problem someone faced during development. Your code works well and you're mostly asking for opinions or possible improvements, which does not seem to fit into the "good question" category by SO standard. – Chan MT Aug 17 '18 at 03:38
Ok, thanks. I was just wondering (most of my posts are answers) – Jack Bashford Aug 17 '18 at 03:39

How to insert multiple HTML elements using jQuery

My question is this:

1 Answers1