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;
    // put items.item.condition into items.condition
    items.condition = items.item.condition;
  } else {
    // We reached our target server, but it returned an error
  }
};

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

request.send();

// Bind the data to part of the DOM
var el = document.getElementById('items');
rivets.bind(el, {
  items: items
});
<h1>Consuming a JSON API</h1>
<p>
  You can use XMLHttpRequest() to fetch data from an API and then use Rivets to display the data.
</p>

<div id="items">
  <table>
    <tr>
      <th colspan="2">Weather for {items.location.city}, {items.location.region}, {items.location.country}</th>
    </tr>
    <tr>
      <th>
        As of ...
      </th>
      <td>
        {items.lastBuildDate}
      </td>
    </tr>
    <tr>
      <th>
        Sunrise
      </th>
      <td>
        {items.astronomy.sunrise}
      </td>
    </tr>
    <tr>
      <th>
        Sunset
      </th>
      <td>
        {items.astronomy.sunset}
      </td>
    </tr>
    <tr>
      <th>
        Wind Chill
      </th>
      <td>
        {items.wind.chill}
      </td>
    </tr>
    <tr>
      <th>
        Humidity
      </th>
      <td>
        {items.atmosphere.humidity}
      </td>
    </tr>
    <tr>
      <th>
        Temperature
      </th>
      <td>
        {items.condition.temp}
      </td>
    </tr>
    <tr>
      <th>
        Condition
      </th>
      <td>
        {items.condition.text}
      </td>
    </tr>
  </table>
</div>
tr {
  text-align: left;
}

th {
  width: 40%;
}

External resources loaded into this fiddle: