I am trying to extract the book URL from a link using microdata. The format is specified in schema.org. Here is my html.

  <div class="col-sm-4 col-md-3" itemscope itemtype="http://schema.org/Book">
                    <div class="thumbnail">
                        <img src="{{ book.thumbnailurl }}" itemprop="thumbnailUrl" style="width: 100px;height: 200px;">
                        <div class="caption">
                            <h4><span itemprop="name">{{ book.name }}</span> - <span itemprop="author">{{ book.author }}</span></h4>
                            <p><span itemprop="about"> {{ book.about }}</span></p>
                            <p> 

                                    <a href="{{ book.url }}" itemprop="url" onclick="trackOutboundLink(‘{{ book.name }}’);">
                                      <button type="button" class="btn btn-default btn-md">
                                        <span class="glyphicon glyphicon-book"></span>Read
                                      </button>
                                    </a>

                            </p>
                        </div>
                    </div>
                 </div>

When I use google snippet testing tool the JSON API returns book as a html link. However when I make the call in javascript the value of url is text("Read").

What am i missing ?