Edit in JSFiddle

var request = new XMLHttpRequest();
// Get the current weather forcast for Milwaukee, WI by feeding 'woeid = 12780915' into YQL
request.open('GET', 'https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20weather.forecast%20where%20woeid%3D%0912780915&format=json&callback=', false);

request.onload = function() {
  if (request.status >= 200 && request.status < 400) {
    // Success!
    // Set items to equal the query results
    items = JSON.parse(request.responseText).query.results.channel.item.forecast;
  } else {
    // We reached our target server, but it returned an error

request.onerror = function() {
  // There was a connection error of some sort


// Bind the data to part of the DOM
var el = document.getElementById('items');
rivets.bind(el, {
  items: items
<h1>Consuming more complex data from a JSON API</h1>
  Rivets can do a for each loops through an array. Using rv-each-[variable], you can turn the <a href="3a-ConsumeJSON.html">simple weather demo</a> into a multi-day forcast.

<div id="items">
  <!-- "rv-each-forecast" creates a for-each loop within the div. Each iteration of the loop is an changes the value of forecast to equal the next item in the items array. -->
  <div rv-each-forecast="items">
    <div class="forecastDay">
      {forecast.day} {forecast.date}
    <div class="forecast">
      There will be a high temperature of {forecast.high} and a low of {forecast.low} and it will be {forecast.text}.
    <br style="clear:both;" />
.forecastDay {
  float: left;
  width: 25%;

.forecast {
  float: left;
  width: 70%;
  margin-bottom: 5px;

External resources loaded into this fiddle: